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

149

Всім привіт! Сьогодні планую докладно описати план дій при отриманні вами листа від компанії 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 наступних правил:

Синтаксис у mod_headers
Apache
#кешувати html і htm файли на один день
Header set Cache-Control “max-age=43200”
#кешувати css, javascript і текстові файли на один тиждень
Header set Cache-Control “max-age=604800”
#кешувати флеш і зображення на місяць
Header set Cache-Control “max-age=2592000”
#відключити кешування
Header unset Cache-Control

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

#кешувати html і htm файли на один день

Header set Cache-Control “max-age=43200”

#кешувати css, javascript і текстові файли на один тиждень

Header set Cache-Control “max-age=604800”

#кешувати флеш і зображення на місяць

Header set Cache-Control “max-age=2592000”

#відключити кешування

Header unset Cache-Control

Рекомендую до прочитання: Як встановити Google Analytics
Синтаксис для mod_expires
Apache
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»

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

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»

Але у випадку з цим сайтом це все не спрацювало. Сайт знаходиться на хостингу reg.ru. Ні в якому разі не хочу сказати нічого поганого про них, просто у них такі правила, про них далі розповім. Приміром на хостингу ActiveCloud і те й інше правило заробили без зайвих проблем. Після листування з хостингом з’ясувалося, що додаткові модулі на послугу “віртуальний хостинг” вони не встановлюють і запропонували скористатися послугою VPS. Цим я займуся найближчим часом і обов’язково напишу детальну статтю.

Рекомендую до прочитання: Як зробити свой сайт відвідуваним

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

Стиснути JavaScript, HTML і CSS файлів за допомогою GZIP
Apache
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.*

1
2
3
4
5
6
7
8
9
10

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.*

Як ви напевно вже зрозуміли, у випадку з 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, блокуючих відображення. Про це в наступній частині.

Сподіваюся, це допоможе вам прискорити і полегшити ваші сайти. Якщо щось не зрозуміло, запитуємо в коментарях, чим зможу, допоможу. Удачі всім!