Всім привіт! Сьогодні планую докладно описати план дій при отриманні вами листа від компанії Google, в якому вони запевняють вас, що ваше “дітище”, улюблений сайт/блог, не оптимізований для мобільних пристроїв і ви понесете жорстке покарання у вигляді пониження ранжирування результатів пошуку на смартфонах. Мені вже почали приходити такого роду “листи щастя”. Ти вранці прокидаєшся, відкриваєш пошту, а там з добрим ранком (рис.1)
рис.1
В принципі, звичайно, можна “забити” на цю справу. Листи в спам і жити спокійно далі. Написано ж російською мовою, що поки сайт не адаптуєте під смартфони та планшети, він буде пессимизирован в пошуковій видачі на мобільних пристроях, та ще й в ПС Google, яка на теренах Росії не така популярна, як Яндекс. Тому, тим хто так вважає можна далі не напружувати себе вивченням матеріалу. А для всіх інших продовжимо. Враховуючи той факт, що всі нововведення Гугла рано чи пізно підхоплює Яндекс, треба все таки ворушитися. До того ж, ринок смартфонів і планшетів зростає з неймовірною швидкістю, тому доведеться підлаштовувати свої сайти під всі дозволу екранів, щоб не втрачати відвідувачів.
Перенесення сайту з Joomla 2.5 на joomla 3.x
Почнемо по порядку. Все нижческазане на прикладі сайту, який був зроблений на Joomla 2.5 три роки тому. І з ним були проведені роботи по перенесенню на Joomla 3, а також оптимізація його під вимоги Google, тобто надання йому mobile-friendly виду. Що ж змусило мене почати діяти?
Перше, це я вже описав на початку статті, а друге – це новорічний подарунок від розробників joomla. Вони припинили підтримку Joomla 2.5 (рис.2)
рис.2
Сильно я не буду детально розписувати даний процес, але на основних деталях зупинюся.
Перше, що зробив, це створив піддомен, що б потім було легше і не треба було переносити сайт. Просто пере назвати папку і готово. (рис.3)
рис.3
Далі, залив туди останню версію joomla встановив її і прикрутив більш менш підходящий шаблон. Благо, що з шаблонами можна виробляти таке, що навіть самі творці не дізнаються, що це їх “дітище”. Саме копітка в цьому занятті, це зробити основну сторінку так, щоб було схоже і трохи краще. На мій погляд у мене вийшло, так і власникам сайту сподобалося (рис.4)
рис.4
Після налаштування головної сторінки залишилася справа за малим 
. Перенести весь контент. Оскільки людина я лінивий, то природно вирішив спростити собі завдання і перенести таблиці з бази даних SQL і скопіювати папки images із вмістом, щоб всі картинки підтягнулися. Але не тут то було, те, що на K2, перенеслося без проблем і коментарі jcomments, а ось матеріали і категорії джумловские не захотіли з 2.5 на трійку вставати. Їх довелося переносити руками. До речі, з приводу коментарів jcomments була невелика проблема, вони показувалися тільки в адмінці, а на сторінках матеріалів немає, це було із-за неспівпадання ID матеріалу. Його, як ви розумієте теж довелося змінити в БД. Вообщем з перенесенням сайту особливих проблем не виникло, тільки час багато на все це пішло.
Рекомендую до прочитання: чи Варто створювати сайт?
Адаптація сайту під мобільні пристрої і не тільки
До перенесення сайту в PageSpeed Insights все виглядало дуже гнітюче (рис.5)
рис.5
Видно не озброєним оком, що ні про яку оптимізації мова не йде, так і мобільна версія відсутнє. При перенесенні, щоб потім не повертатися до цього, я рекомендую оптимізувати зображення. Складного в цьому нічого немає, а от при закачування їх на сервер можна заощадити купу часу. Робиться це за допомогою спеціального онлайн-сервісу. Насправді їх, подібного роду сервісів, превелика безліч, але я користувався цим, тому його і рекомендую.
Природно, першим ділом, після всіх своїх мук я перевірив, що вийшло тільки завдяки перенесення сайту на новий движок (рис.6)
рис.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)
рис.7
Для стиснення файлів CSS рекомендую використовувати цей оптимізатор, перевірено на особистому досвіді. Все до неподобства просто і дуже ефективно. Порядок дій наступний:
- заходимо на сайт по FTP
- переходимо за запропонованим Google шляху (дивимося на картинці вище)
- на всякий випадок копіюємо куди-небудь вихідний файл
- далі відкриваємо його будь-яким редактором типу Notepad++
- копіюємо весь код і вставляємо його в вищезазначений оптимізатор CSS
- натискаємо кнопку оптимізувати і отримуємо те, що треба Вихідний код: 21.862 Кб, Оптимізований код: 16.258 Кб, Коефіцієнт: 25.6% (-5604 байт)
- тепер копіюємо отриманий код (він знаходиться нижче) і вставляємо його замість вихідного
- зберігаємо і заливаємо файл назад, на хостинг, ну або зберігаємо з заміною
Після цього повинне вийти наступне (рис.8):
рис.8
Точно таким же чином треба діяти з JavaScript, тільки в цьому випадку рекомендую скористатися ось цим онлайн компресором. Точно також, нічого складного.
Тепер залишилося лише перевести сайт на VPS і встановити необхідні модулі для кешування, стиснення і видалення з верхньої частини сторінки кодів JavaScript і CSS, блокуючих відображення. Про це в наступній частині.
Сподіваюся, це допоможе вам прискорити і полегшити ваші сайти. Якщо щось не зрозуміло, запитуємо в коментарях, чим зможу, допоможу. Удачі всім!
