Всем привет! Сегодня планирую подробно описать план действий при получении вами письма от компании Google, в котором они уверяют вас, что ваше «детище», любимый сайт/блог, не оптимизирован для мобильных устройств и вы понесете жесткое наказание в виде понижения ранжирования в результатах поиска на смартфонах. Мне уже начали приходить такого рода «письма счастья». Просыпаешься ты утром, открываешь почту, а там с добрым утром (рис.1)
[twentytwenty]
[/twentytwenty]
рис.1
В принципе, можно конечно «забить» на это дело. Письма в спам и жить спокойно дальше. Написано же на русском языке, что пока сайт не адаптируете под смартфоны и планшеты, он будет пессимизирован в поисковой выдаче на мобильных устройствах, да еще и в ПС Google, которая на просторах России не такая популярная, как Яндекс. Поэтому, тем кто так считает можно дальше не напрягать себя изучением материала. А для всех остальных продолжим. Учитывая тот факт, что все нововведения Гугла рано или поздно подхватывает Яндекс, надо все таки шевелиться. К тому же, рынок смартфонов и планшетов растет с невообразимой скоростью, поэтому придется подстраивать свои сайты под все разрешения экранов, чтобы не терять посетителей.
Перенос сайта с Joomla 2.5 на joomla 3.x
Начнем по порядку. Все нижесказанное на примере сайта, который был сделан на Joomla 2.5 три года назад. И с ним были проведены работы по переносу на Joomla 3, а так же оптимизация его под требования Google, т.е. придание ему mobile-friendly вида. Что же заставило меня начать действовать?
Первое, это я уже описал в начале статьи, а второе — это новогодний подарок от разработчиков joomla. Они прекратили поддержку Joomla 2.5 (рис.2)
Сильно подробно не буду расписывать данный процесс, но на основных деталях остановлюсь.
Первое, что сделал, это создал поддомен, что бы потом было легче и не надо было переносить сайт. Просто пере назвать папку и готово. (рис.3)
Далее, залил туда последнюю версию joomla установил ее и прикрутил более менее подходящий шаблон. Благо, что с шаблонами можно выделывать такое, что даже сами создатели не узнают, что это их «детище». Самое кропотливое в этом занятии, это сделать основную страницу так, чтобы было похоже и немного лучше. На мой взгляд у меня получилось, да и владельцам сайта понравилось (рис.4)
[twentytwenty]
[/twentytwenty]
рис.4
После настройки главной страницы осталось дело за малым 🙂 . Перенести весь контент. Т.к. человек я ленивый, то естественно решил упростить себе задачу и перенести таблицы из базы данных SQL и скопировать папки images с содержимым, чтобы все картинки подтянулись. Но не тут то было, то, что на K2, перенеслось без проблем и комментарии jcomments, а вот материалы и категории джумловские не захотели с 2.5 на тройку вставать. Их пришлось переносить руками. Кстати, по поводу комментариев jcomments была небольшая проблема, они показывались только в админке, а на страницах материалов нет, это было из-за несовпадения ID материала. Его, как вы понимаете тоже пришлось изменить в БД. Вообщем с переносом сайта особых проблем не возникло, только время много на все это ушло.
Адаптация сайта под мобильные устройства и не только
До переноса сайта в PageSpeed Insights все выглядело очень удручающе (рис.5)
Видно не вооруженным глазом, что ни о какой оптимизации речь не идет, да и мобильная версия отсутствует напрочь. При переносе, чтобы потом не возвращаться к этому, я рекомендую оптимизировать изображения. Сложного в этом ничего нет, а вот при закачки их на сервер можно сэкономить кучу времени. Делается это при помощи специального онлайн-сервиса. На самом деле их, подобного рода сервисов, превеликое множество, но я пользовался этим, поэтому его и рекомендую.
Естественно, первым делом, после всех своих мучений я проверил, что получилось только благодаря переносу сайта на новый движок (рис.6)
Уже есть, чем гордиться. Но, это только начало. Теперь самое интересное. Надо пройтись по всем пунктам, которые не нравятся Google и привести их в надлежащий вид. Скажу сразу, что рекомендацию «Удалите из верхней части страницы код JavaScript и CSS, блокирующий отображение» крайне сложно исправить по множеству причин, поэтому я на нее пока «забил». Далее идет «Включите сжатие» и «Используйте кэш браузера«. Это делается на стороне хостера. Неоценимую услугу в этом нам окажут два модуля:
- mod_headers
- mod_expires
в результате работы которых установаются заголовки в ответ сервера и говорят вашему браузеру, что и как нужно кешировать. Обычно, какой-нибудь из этих модулей стоит у хостера, но как и в случае с любым модулем, который не входит в стандартную сборку Апача, 100% гарантии никто вам не даст. Исходя из этого, чтобы избежать 500-ую ошибку, прописываем условия для каждого из модулей путем добавления в файл .htaccess следующих правил:
<ifModule mod_headers.c> #кэшировать html и htm файлы на один день <FilesMatch «\.(html|htm)$»> Header set Cache-Control «max-age=43200″ </FilesMatch> #кэшировать css, javascript и текстовые файлы на одну неделю <FilesMatch «\.(js|css|txt)$»> Header set Cache-Control «max-age=604800″ </FilesMatch> #кэшировать флэш и изображения на месяц <FilesMatch «\.(flv|swf|ico|gif|jpg|jpeg|png)$»> Header set Cache-Control «max-age=2592000″ </FilesMatch> #отключить кэширование <FilesMatch «\.(pl|php|cgi|spl|scgi|fcgi)$»> Header unset Cache-Control </FilesMatch> </IfModule>
<ifModule mod_expires.c> ExpiresActive On #по умолчанию кеш в 5 секунд ExpiresDefault «access plus 5 seconds» #кэшировать флэш и изображения на месяц ExpiresByType image/x-icon «access plus 2592000 seconds» ExpiresByType image/jpeg «access plus 2592000 seconds» ExpiresByType image/png «access plus 2592000 seconds» ExpiresByType image/gif «access plus 2592000 seconds» ExpiresByType application/x-shockwave-flash «access plus 2592000 seconds» #кэшировать css, javascript и текстовые файлы на одну неделю ExpiresByType text/css «access plus 604800 seconds» ExpiresByType text/javascript «access plus 604800 seconds» ExpiresByType application/javascript «access plus 604800 seconds» ExpiresByType application/x-javascript «access plus 604800 seconds» #кэшировать html и htm файлы на один день ExpiresByType text/html «access plus 43200 seconds» #кэшировать xml файлы на десять минут ExpiresByType application/xhtml+xml «access plus 600 seconds» </ifModule>
Но в случае с этим сайтом это все не сработало. Сайт находится на хостинге reg.ru. Ни в коем случае не хочу сказать ничего плохого о них, просто у них такие правила, о них дальше расскажу. К примеру на хостинге ActiveCloud и то и другое правило заработали без лишних проблем. После переписки с хостингом выяснилось, что дополнительные модули на услуге «виртуальный хостинг» они не устанавливают и предложили воспользоваться услугой VPS. Этим я займусь в ближайшее время и обязательно напишу подробную статью.
А теперь дальше по списку. Нас просят по возможности сократить JavaScript и CSS. Можно опять таки прибегнуть к правке файла .htaccess. Включить в нем GZIP и сжать все ваши JavaScript, HTML и CSS файлы. Делается это при помощи следующего правила:
<IfModule mod_gzip.c> mod_gzip_on Yes mod_gzip_dechunk Yes mod_gzip_item_include file \.(html?|txt|css|js|php|pl)$ mod_gzip_item_include handler ^cgi-script$ mod_gzip_item_include mime ^text\.* mod_gzip_item_include mime ^application/x-javascript.* mod_gzip_item_exclude mime ^image\.* mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.* </IfModule>
Как вы наверное уже поняли, в случае с reg.ru это не сработало тоже. Поэтому придется пока сокращать все это дело руками, вернее при помощи специальных онлайн-сервисов. Покажу на примере двух этих файлов (рис.7)
Для сжатия файлов CSS рекомендую использовать этот оптимизатор, проверено на личном опыте. Все до безобразия просто и очень эффективно. Порядок действий следующий:
- заходим на сайт по FTP
- переходим по предложенному Google пути (смотрим на картинке выше)
- на всякий случай копируем куда-нибудь исходный файл
- далее открываем его любым редактором типа Notepad++
- копируем весь код и вставляем его в вышеуказанный оптимизатор CSS
- нажимаем кнопку оптимизировать и получаем то, что надо Исходный код: 21.862 Кб, Оптимизированный код: 16.258 Кб, Коэффициент: 25.6% (-5604 байт)
- теперь копируем полученный код (он находится ниже) и вставляем его вместо исходного
- сохраняем и заливаем файл назад, на хостинг, ну или сохраняем с заменой
После этого должно получиться следующее (рис.8):
Точно таким же образом надо поступить с JavaScript, только в этом случае рекомендую воспользоваться вот этим онлайн компрессором. Точно также, ничего сложного.
Теперь осталось только перевести сайт на VPS и установить необходимые модули для кэширования, сжатия и удаления из верхней части страницы кодов JavaScript и CSS, блокирующих отображение. Об этом в следующей части.
Надеюсь, это поможет вам ускорить и облегчить ваши сайты. Если что-то не понятно, спрашиваем в комментариях, чем смогу, помогу. Удачи всем!
“Удалите из верхней части страницы код JavaScript и CSS, блокирующий отображение” — вот я тоже попробовала такое сделать и махнула рукой. Не представляю, на каком сайте это могло бы адекватно работать и не создавать проблем при поддержке.
Ну, надежда у меня еще не пропала. Думаю, что после переноса на VPS я его (предупреждение) попытаюсь устранить
Привет! Спасибо за полезные советы, связанные с htaccess. От себя хочу добавить что было бы неплохо оптимизировать сам HTML код и сами таблицы стилей (удалить все дубликаты классов и по возможности написать универсальные чтобы максимально сократить код).
А для удобства просмотра на мобильных устройствах самым лучшим решением будет использование адаптивной верстки или в крайнем случае мобильной версии. Лично для меня крайне неудобно серфить с телефона по не оптимизированному сайту лежа на боку 🙂
Еще по теме оптимизации кода — вроде у вас на сайте я уже упоминал про использование фреймворков — в моем случае foundation. Благодаря автоматической компиляции на выходе получаем полностью упакованный css код без использования сервисов, а с помощью sass его легко поддерживать в будущем. Также с ним намного проще делать адаптивные сайты, которые одинаково хороши на всех устройствах.
Что-то я увлекся. Спасибо 🙂
Ух, как вы… По поводу HTML согласен, но вот с PHP так не выйдет по моему. Что касаемо фреймворков и т.д., то это уже наивысшая форма самоистязания 🙂 ИМХО
Ну почему с php не выйдет, все описанное мной выше называется (если можно применить это слово к html и css) рефакторинг. И насколько я знаю грамотное построение алгоритмов и аккуратный код всегда дают высокую производительность.
Но в данном случае фреймворк нужен чтобы облегчить работу и заниматься только версткой, а не проверкой работоспособности сайта в различных браузерах и мобильных устройствах. Но на вкус и цвет все фломастеры разные 🙂
Спасибо большое за статью! Очень информативно и полезно)
Хорошая статья и советы дельные, но можно, я дам совет намного проще? Короче, забиваете в поисковике «Резиновый шаблон для…», напишите для какого движка. Скачаете, установите и все. Резиновый шаблон будет подстраиваться под все мобильные устройства.
Статья хорошая и познавательная особенно для людей с опытом что может случится с человеком который в сайтостроении новичок а уж в оптимизации кода под мобильные устройства и говорить не приходится сайт же в таких руках может потом не то что под мобильными но и под ПК не работать, в любом случае спасибо за тему
Главное в этом деле не доходить до абсурда и не гнаться за 100/100. Сами гугловцы на конференциях рекомендуют вебмастерам, чтобы те не переусердствовали, иначе можно дойти до того, что сайт понравится гуглороботу, а пользователи будут от этого страдать.
Для примера проверьте страницу _developers.google.com (моб: 54/100, комп: 69/100), или _youtube.com (моб: 64/100, комп: 75/100).
Во всём должен быть баланс!
Спасибо за подробность, а за перенос сайта с Joomla 2.5 на joomla 3.x отдельное спасибо, подкинул идею.
О! Мне как раз пришло на почту.
Сайт _http://oduvan.net/ не оптимизирован для мобильных устройств
To: Веб-мастеру сайта _http://oduvan.net/
Мы проверили 1 360 стр. Вашего сайта и обнаружили, что 99% из них неудобно просматривать на мобильных устройствах. Из-за ошибок на этих 1 340 стр. у пользователей складывается плохое впечатление о ресурсе. Эти страницы не считаются оптимизированными для мобильных устройств с точки зрения Поиска Google, и они будут отображаться и ранжироваться в результатах поиска на смартфонах соответствующим образом.
Хотя по мне все удобно, низнаю чоэта он)
За материал спасибо
Ну да, это он на картинки в основном жалуется и на близость активных элементов — ссылок. Типа, толстыми пальцами неудобно нажимать 🙂
А как бить если используешь не Джумлу.
В принципе сайт не плохо грузится на смартфонах, но самой версии для мобильных устройств нету.
Какова вероятность получить такое письмо?
Добрый день, Дмитрий! Вероятность получения письма 50/50. Или вы получите письмо или не получите 🙂
Добавлю в избранное, спасибо за статью! Чувствую, скоро пригодится, на почту на один джумловский сайт уже пришла такая «радость»…
Спасибо за статью очень полезная.
Спасибо, очень полезная статья. Лично я столкнулся с проблемой адаптивоного сайта для мобильных это близкое расположение интерактивных элементов и ширина контента не соответствующий области просмотра.
Дельный урок и подробный. Автору респект!
Вы меня озадачили заявлением, что скоро Яндекс станет поступать подобно Гуглу, т.е. понижать в выдаче сайта за не оптимизацию под мобильные устройства. Я в ближайшее время не собирался этим заниматься. Письма счастья от Гугла пока не приходили! Но, теперь стоит подумать, хотя я не уверен, что Яндекс так кардинально поступит в ближайшие год — два! Хотя кто знает?
Неплохо. Порадовал «до и после» на jquery, так нагляднее. А есть такая же статья для WordPress ??? был бы очень признателен
А чем вам не подходит эта? На сколько я знаю, wordpress и так отлично обновляется, а все остальное применимо ко всем CMS
Недавно потратили кучу времени на оптимизацию самописного сайта под мобильные устройства ели ели сделали, с Joomla не экспериментировал но ссылкой с человеком поделюсь как раз он под Joomla и пилит свой сайт.
[censured]
Супер ПолезноИнтересная Статья!
Для WordPress плагин есть WordPress PDA & iPhone, отличная вещь — рекомендую
не ну я все понимаю но когда уже будет для мобильный телефонов!!!
Спасибо за познавательную статью, все просто и доступно
Я тоже недавно занялся оптимизацией сайта под мобильные устройства. Настроил область просмотра-добавил в header.php код viewport. А вот с остальными пунктами плоховато. На одном блоге читал что желательно использовать только один из модулей: mod_headers или mod_expires. Или это не столь важно?
Здравствуйте, Андрей! Не столь важно, обычно работает какой-то один, который на сервере стоит.
Очень кстати. Сейчас многие пользуются мобилками для пользования интернетом, поэтому адаптация сайта под мобильные — необходимая мера. Скоро мобилки будут забирать львиную долю трафика.
уже забирают. насколько я знаю, в Беларуси 14% пользователей сидят регулярно с мобильных устройств.
Тоже думаю что надо делать моб. версию, возможно лучше сделать чтоб был редирект с веб версии на моб версию сайта через htacess
Спасибо, помогло
Вчера пришло письмо от гуглы, что сайт не оптимизирован под мобильные устройства. Но я даже не знаю, какой процент трафика идет с мобильных и идет ли он вообще. В моем случае это надо весь сайт переделывать, чтобы он еще и на мобильных нормально выглядел (да и графику менять, ибо он жрет у меня 2-3 мб)…
Добрый вечер, Игорь! Ну, трафик можно посмотреть в метрике от Яндекса, к примеру. Что касается переделывания сайта, то я бы порекомендовал сжать бэкграунды, картинки, CSS. Этого будет вполне достаточно для первого шага 🙂 .
Письма от гугла стали активно сыпаться после нового года 2015. Хорошо конечно все это, но ведь не всем клиентам можно объяснить что сайт надо еще под телефонку делать, а это доп расходы, особенно если клиент деньги жмет на сайт.
Приветствую вас, Артем! Ну, не обязательно всем объяснять. И не обязательно всем делать.. Письмо от Гугла перенаправили и пусть сами думают )))
Я считаю что в нынешнее время когда у каждого есть смартфоны и планшеты данная проблема очень актуальна. Ведь часть трафика с моб. устройств терять не хочется, поэтому приходится подстраиваться под них.
да да одаптация нужна.. ведь большинство все лазяют через андройд… как не крути 50 процентов трафа может быть через мобилу
Решил оставить этот «шедевр» в первозданном виде 🙂
Для меня подстройка сайта под мобильные устройства необходимость, но в исполнении — ужас. Надо поподробнее въехать в Вашу статью, может хоть какие-то моменты подправлю. Как раз на 3 joomla сидим)А вот вообще реально все-таки самостоятельно это сделать или нужно нанимать кого-то?
Здравствуйте, Алла! Если вы прочитали и поняли, что именно написано, то можете и сами сделать. В противном случае, попросите кого-нибудь со стороны…
Да юзабилити очень важный ньюанс, хотя смотря для каких целей преднозначин сайт , в некоторых случаях на мобильную адаптацию можно и забить.Уменя на сайте из всего траффика только 1% заходяят с мобильного
ура-ура! а мне вот удалось догнать сайт до зеленой зоны, теперь буду смотреть реально это помогает получить больше трафика с гугла или нет))) правда гемороя жесть сколько
Добрый день вебмастера, вопрос такой — некоторое время назад пришло письмо «счастья», что сайт _http://premier-kredit.ru не оптимизирован для мобильных устройств и т.д.
на данный момент закончил оптимизацию сайта для мобильных довел до «зеленой зоны»,
1 вопрос — когда будет пересмотр отношения гугла к оптимизации страниц моего сайта для мобильных — это произойдет автоматом или надо куда-то написать???
Добрый день, Андрей! На сколько я знаю, писать сообщения никуда не надо. У меня на сайтах ошибки из вебмастера не удалились, но сайты в мобильном поиске показываются как надо. Вот пример
Да нет, все вообщем то понятно. Спасибо большое! Благодаря этой статье оптимизировал сайт! Добился 92/100 для мобильных устройств и 87/100 для компьютеров.
Пожалуйста!
Здравствуйте!
В первую очередь конечно хочу поблагодарить вас за полезную статью. Что-же касается вопроса, я так понимаю, что модули: mod_expires и mod_headers. Встраивают в ответе серверов спец заголовки Cache-Control или Expires, которые и указывают браузеру, на какое время, какие файлы необходимо кэшировать. Но если на сервере используется связка nginx+apache, прописываемые правила в .htaccess для mod_expires уже наверное срабатывать не будут, пока статичные файлы раздаёт nginx?
Обратившись с данным вопросом в службу поддержки хостинга, получил скупой ответ, что мол при ПО nginx время кеша задается на самом сервере. Спасибо!
Класс. А что к примеру в таком случае делать? Сайт писался в 2007 году.
под моб версии не адаптирован.
Но он работает, приносит клиентов. А возьми его сейчас начни переделывать полностью, и что тогда?
остаться совсем без посещаемости?
Я бы ничего не делал с таким сайтом, с технической точки зрения..
Это проблема нашего времени… Оптимизировать оптимизированный сайт, но уже для телефона =)) Как всегда без головной боли тут не обойтись)
Здравствуйте, такой вопрос. Чтобы оптимизировать сайт под мобильные устройства, нужно использовать темы с адаптивным дизайном. Но если не хочется менять тему, можно ее самому как то сделать адаптивной.. Что нужно менять,никто не знает ?? Например нужно оптимизировать вордпресс тему Gadget
Здравствуйте, Дмитрий! WPtouch Mobile Plugin вам в помощь.
Здравствуйте, я думаю, чтобы не менять целиком тему из за мобильной версии, как вариант можно попробовать поэкспериментировать над созданием отдельного файла css стилей, для тех кто посещает ваш ресурс с телефона. В файле: header сразу после тега: прописываем строку: . Далее в теме создаём дубликат файла стилей например под названием: style-mobili, где в дальнейшем будем вносить изменения под мобильные устройства. Возвращаемся в header, где для действующих стилей вместо: <link rel="stylesheet" href=" вставляем: <link rel="stylesheet" type="text/css" media="screen and (min-width: 641px)" href=". Ниже подключаем наш новый файл: style-mobili, пишем так: <link rel="stylesheet" media="screen and (max-width: 641px)" href=". То есть для тех пользователей у кого монитор более чем 641px стили будут браться оригинальные, у кого меньше со style-mobili который мы и будим настраивать под мобильники.
Слава Богу, мой интернет-магазин пришелся гуглу пол нраву. хотя по поводу Яндекса думаю, что проблемок не избежать
Прочитал всю статью, потому что был удивлен что увидел ту сататью про Джумлу). Хочу сказать по поводу адаптивности, сам делал всё через css, хоть шаблон моего сайта по ремонту авто и замене подшипников _http://zamena-podshipnikov.ru/ был изначально адаптирован, но вот некоторые сторонние модули — нет. в css делал через @media min и max.
Далее про скорость сайта, использовал JCH Optimtzed — бесплатная версия оптимизирует js и ccs, сжимает и преобразует в один файл все файлы, но перед этим всё равно сжимал их как описано тут, оптимизировал картинки в простом редакторе фото, кэширование настраивал так же как описано тут, помогло, НО! внешние js файлы которые грузятся в других сайтов (яндекс метрика и поиск и т.д) не удалось закэшировать, но не давно нашел интересную статью где описано как это сделать, сам не пробовал пока что — кому интересно — скину ссылку. Прикинул что если закэшиваровать их то прирост к сткорости будет около 8%
Hey there,looking to a best tool for reducing your image size and optimize without loss quality ,there are a great website _https://optimizejpeg.com/ to reduce and optimize your images ..
Я прочитал статью на seo4y.ru о необходимости оптимизации сайтов для мобильных устройств, и это было для меня настоящим открытием. Автор подробно описывает процесс адаптации сайта под мобильные устройства, начиная с переноса сайта на более современную платформу и заканчивая тонкой настройкой для улучшения производительности. Особенно полезными оказались советы по оптимизации изображений и сжатию CSS и JavaScript файлов. Эта статья стала для меня настоящим руководством по улучшению мобильной версии моего сайта, и я уже вижу значительные улучшения в показателях производительности и удобства использования сайта на мобильных устройствах. Огромное спасибо автору за такой ценный и практичный материал!