вРаскрутка и SEO

Сайт не оптимизирован для мобильных устройств — инструкция по оптимизации mobile-friendly

Сайт не оптимизирован для мобильных устройств

Всем привет! Сегодня планирую подробно описать план действий при получении вами письма от компании Google, в котором они уверяют вас, что ваше “детище”, любимый сайт/блог, не оптимизирован для мобильных устройств и вы понесете жесткое наказание в виде понижения ранжирования в результатах поиска на смартфонах. Мне уже начали приходить такого рода “письма счастья”. Просыпаешься ты утром, открываешь почту, а там с добрым утром (рис.1)

рис.1

В принципе, можно конечно “забить” на это дело. Письма в спам и жить спокойно дальше. Написано же на русском языке, что пока сайт не адаптируете под смартфоны и планшеты, он будет пессимизирован в поисковой выдаче на мобильных устройствах, да еще и в ПС Google, которая на просторах России не такая популярная, как Яндекс. Поэтому, тем кто так считает можно дальше не напрягать себя изучением материала. А для всех остальных продолжим. Учитывая тот факт, что все нововведения Гугла рано или поздно подхватывает Яндекс, надо все таки шевелиться. К тому же, рынок смартфонов и планшетов растет с невообразимой скоростью, поэтому придется подстраивать свои сайты под все разрешения экранов, чтобы не терять посетителей.

Перенос сайта с Joomla 2.5 на joomla 3.x

Начнем по порядку. Все нижесказанное на примере сайта, который был сделан на Joomla 2.5 три года назад. И с ним были проведены работы по переносу на Joomla 3, а так же оптимизация его под требования Google, т.е. придание ему mobile-friendly вида. Что же заставило меня начать действовать?

Первое, это я уже описал в начале статьи, а второе – это новогодний подарок от разработчиков joomla. Они прекратили поддержку Joomla 2.5 (рис.2)

Joomla! 2.5 Support Ended

рис.2

Сильно подробно не буду расписывать данный процесс, но на основных деталях остановлюсь.

Первое, что сделал, это создал поддомен, что бы потом было легче и не надо было переносить сайт. Просто пере назвать папку и готово. (рис.3)

Создание поддомена

рис.3

Далее, залил туда последнюю версию joomla установил ее и прикрутил более менее подходящий шаблон. Благо, что с шаблонами можно выделывать такое, что даже сами создатели не узнают, что это их “детище”. Самое кропотливое в этом занятии, это сделать основную страницу так, чтобы было похоже и немного лучше. На мой взгляд у меня получилось, да и владельцам сайта понравилось (рис.4)

рис.4

После настройки главной страницы осталось дело за малым :) . Перенести весь контент. Т.к. человек я ленивый, то естественно решил упростить себе задачу и перенести таблицы из базы данных SQL и скопировать папки images с содержимым, чтобы все картинки подтянулись. Но не тут то было, то, что на K2, перенеслось без проблем и комментарии jcomments, а вот материалы и категории джумловские не захотели с 2.5 на тройку вставать. Их пришлось переносить руками. Кстати, по поводу комментариев jcomments была небольшая проблема, они показывались только в админке, а на страницах материалов нет, это было из-за несовпадения ID материала. Его, как вы понимаете тоже пришлось изменить в БД. Вообщем с переносом сайта особых проблем не возникло, только время много на все это ушло.

Адаптация сайта под мобильные устройства и не только

До переноса сайта в PageSpeed Insights все выглядело очень удручающе (рис.5)

Результыты проверки сайта на PageSpeed Insighst

рис.5

Видно не вооруженным глазом, что ни о какой оптимизации речь не идет, да и мобильная версия отсутствует напрочь. При переносе, чтобы потом не возвращаться к этому, я рекомендую оптимизировать изображения. Сложного в этом ничего нет, а вот при закачки их на сервер можно сэкономить кучу времени. Делается это при помощи специального онлайн-сервиса. На самом деле их, подобного рода сервисов, превеликое множество, но я пользовался этим, поэтому его и рекомендую.

Естественно, первым делом, после всех своих мучений я проверил, что получилось только благодаря переносу сайта на новый движок (рис.6)

Проверка сайта на PageSpeedInsighst после переноса на новую CMS

рис.6

Уже есть, чем гордиться. Но, это только начало. Теперь самое интересное. Надо пройтись по всем пунктам, которые не нравятся Google и привести их в надлежащий вид. Скажу сразу, что рекомендацию “Удалите из верхней части страницы код JavaScript и CSS, блокирующий отображение” крайне сложно исправить по множеству причин, поэтому я на нее пока “забил”. Далее идет “Включите сжатие” и “Используйте кэш браузера“. Это делается на стороне хостера. Неоценимую услугу в этом нам окажут два модуля:

  • mod_headers
  • mod_expires

в результате работы которых установаются заголовки в ответ сервера и говорят вашему браузеру, что и как нужно кешировать. Обычно, какой-нибудь из этих модулей стоит у хостера, но как и в случае с любым модулем, который не входит в стандартную сборку Апача, 100% гарантии никто вам не даст. Исходя из этого, чтобы избежать 500-ую ошибку, прописываем условия для каждого из модулей путем добавления в файл .htaccess следующих правил:

 

Но в случае с этим сайтом это все не сработало. Сайт находится на хостинге reg.ru. Ни в коем случае не хочу сказать ничего плохого о них, просто у них такие правила, о них дальше расскажу. К примеру на хостинге ActiveCloud и то и другое правило заработали без лишних проблем. После переписки с хостингом выяснилось, что дополнительные модули на услуге “виртуальный хостинг” они не устанавливают и предложили воспользоваться услугой VPS. Этим я займусь в ближайшее время и обязательно напишу подробную статью.

А теперь дальше по списку. Нас просят по возможности сократить JavaScript и CSS. Можно опять таки прибегнуть к правке файла .htaccess. Включить в нем GZIP и сжать все ваши JavaScript, HTML и CSS файлы. Делается это при помощи следующего правила:

 Как вы наверное уже поняли, в случае с reg.ru это не сработало тоже. Поэтому придется пока сокращать все это дело руками, вернее при помощи специальных онлайн-сервисов. Покажу на примере двух этих файлов (рис.7)

Сжатие кода CSS позволяет сократить объем данных

рис.7

Для сжатия файлов CSS рекомендую использовать этот оптимизатор, проверено на личном опыте. Все до безобразия просто и очень эффективно. Порядок действий следующий:

  • заходим на сайт по FTP
  • переходим по предложенному Google пути (смотрим на картинке выше)
  • на всякий случай копируем куда-нибудь исходный файл
  • далее открываем его любым редактором типа Notepad++
  • копируем весь код и вставляем его в вышеуказанный оптимизатор CSS
  • нажимаем кнопку оптимизировать и получаем то, что надо Исходный код: 21.862 Кб, Оптимизированный код: 16.258 Кб, Коэффициент: 25.6% (-5604 байт)
  • теперь копируем полученный код (он находится ниже) и вставляем его вместо исходного
  • сохраняем и заливаем файл назад, на хостинг, ну или сохраняем с заменой

После этого должно получиться следующее (рис.8):

Код CSS сокращен - PageSpeedInsighst

рис.8

Точно таким же образом надо поступить с JavaScript, только в этом случае рекомендую воспользоваться вот этим онлайн компрессором. Точно также, ничего сложного.

Теперь осталось только перевести сайт на VPS и установить необходимые модули для кэширования, сжатия и удаления из верхней части страницы кодов JavaScript и CSS, блокирующих отображение. Об этом в следующей части.

Надеюсь, это поможет вам ускорить и облегчить ваши сайты. Если что-то не понятно, спрашиваем в комментариях, чем смогу, помогу. Удачи всем!

 

VN:F [1.9.22_1171]
источник: promotiger.ru

Похожие посты