Google Page Speed - Оптимізація швидкості завантаження сайту
Як тільки у вас з'являється сайт, то на думку відразу спадає думка, що саме ваш сайт повинен потрапити на першу сторінку пошукової видачі. Однак сайтів у мережі Інтернет мільйони, а перша сторінка у будь-якої пошукової системи лише одна. Конкуренція зовсім немислима.
Опускаються руки? Даремно. Робота з просування сайту трудомістка і може бути витратна, але вона того варта. А на допомогу нам існує безліч інструментів. І про одного з них ми якраз і поговоримо.
Весь процес аналізу буде здійснюватися людиною, яка стикається з сервісом вперше. І так, представляємо покроковепосібник із використання Page Speed Insights для новачків очима новачка !
Читаємо далі статтю та дивимося, що потрібно зробити, щоб допомогти своєму сайту зайняти високі позиції:
Сервіс Page Speed Insights
Сьогодні мова піде про один із сервісів від Google – Page Speed Insights. Це інструмент для перевірки швидкості завантаження сторінки.
- Якщо тривалість завантаження сайту перевищує дві секунди, задоволення користувачів знижується на 3,8%.
- Дохід із кожного користувача скорочується на 4,3%.
- Кількість кліків зменшується на 4,3%.
Що це нам дає? Які уроки можна отримати? Звичайно, можна нескінченно говорити про те, що "мій сайт тут ні до чого, нехай користувачі підключають нормальний інтернет для завантаження". Але технології змінилися, повсюдний високошвидкісний доступ до Інтернету вже не дозволяє списати швидкість завантаження на лінію зв'язку. Здебільшого, якщо ваш сайт довго вантажиться, то це проблема не мережі, а ваша.
Отже, настав час звернутися до допомоги безкоштовних інструментів усунення проблеми.Чим хорошийGoogle PageSpeed? Насамперед тим, що він показує саме ті фактори, які залежать від розробника сайту, а не від доступу до мережі. Отже, ми можемо відокремити мух від котлет і оптимізувати структуру коду, зображення та інше – все те, від чого залежить швидкість завантаження з нашого боку.
Які показники дозволяє оптимізувати Google PageSpeed?
Перш за все це швидкість завантаження верхньої частини сторінки. І, звичайно, швидкість завантаження всієї сторінки. Від чого вона залежить з погляду розробника?
Якщо ваші скрипти підключаються до завантаження шапки сайту, ви отримаєте про це попередження. Закачування скриптів та сторонніх файлів гальмує завантаження. Google рекомендує спочатку провантажити шапку, а потім уже все інше, якщо є така можливість.
На малюнку видно, яким чином сервіс повідомляє відвідувача про проблеми:
Попередження про можливі проблеми сайту в Goggle Page Speed
Способи вирішення проблем сайту за допомогою сервісу Google Page Speed ми розберемо на прикладі оптимізації звичайного односторінника.
Покрокове керівництво оптимізації швидкості завантаження сторінки
Наприклад, ми вибрали простий сайт – лендинг. Він включає кілька стильових таблиць, пару ефектів jquery і кілька функцій javascript.
Крок 1. Запускаємо перевірку
І введіть у рядок назву сайту, який ви хочете перевірити:
Перший крок перевірки швидкості завантаження сайту
Натисніть кнопку "Аналізувати", і ви побачите результат аналізу.
Як бачимо з прикладу нашого сайту, для комп'ютера негаразд погано:
Рекомендації Page Speed для оптимізації сайту для комп'ютера після аналізу
Для мобільних пристроїв картина не такарайдужна:
Рекомендації Page Speed для оптимізації сайту для мобільних пристроїв
Інструмент оцінює наш піддослідний сайт за 100-бальною шкалою. Гарний результат розпочинається від 85 балів. Як бачимо, наш сайт не дотягує до потрібних значень.
Окей, Гугл, приступимо.
Крок 2. Виправляємо критичні помилки
Перша їх – це використання кеша.
Використовуйте кешування для швидкого завантаження сайту
Так як на момент написання статті сайт ще перебував у розробці, потрібні команди не були встановлені – потрібно було постійне оновлення.
Почитати про те, як це зробити, ви можете тут – інструмент пропонує посилання на допомогу:
Рекомендації щодо кешування сайту
Скористаємося модулем Expires і впишемо в .htaccess наступну команду:
ExpiresDefault "access plus 1 month"
ExpiresByType image/gif "access plus 2 months"
ExpiresByType image/jpeg "access plus 2 місяці"
ExpiresByType image/png "access plus 2 місяці"
ExpiresByType image/x-icon "access plus 2 months"
ExpiresByType text/css "access plus 2 місяці"
ExpiresByType text/javascript "access plus 3600 seconds"
ExpiresByType application/javascript "access plus 3600 seconds"
ExpiresByType application/x-javascript "access plus 3600 seconds"
Друга помилка – неоптимізовані зображення.
Оптимізуйте зображення на своєму сайті
Скористайтеся стороннім сервісом для оптимізації наших зображень. Наприклад, сервіс tinypng. І оптимізуємо там усі картинки:
Оптимізуємо зображення на сайті за допомогою сторонніх сервісів
Крок 3. Виправляємо скрипти наскільки можна
Сервіс рекомендує оптимізуватиjavascript та css.
Рекомендації Google щодо оптимізації скриптів та стилів на сайті
Що каже нам Google?
Перед відображенням сторінки браузер повинен виконати її синтаксичний аналіз. Якщо він виявляє зовнішній скрипт, він повинен його завантажити. Це надмірний цикл операцій, який уповільнює показ сторінки.
У нас весь код підключається у перших рядках файлу. Перемістимо його безпосередньо перед завантаженням елементів у сам код html. Лічильник яндекс метрики перенесемо в кінець файлу.
Для оптимізації CSS стилів ми мало що можемо зробити. Google пропонує мінімізувати звернення до сервера за рахунок використання стилю на сторінку. Але тоді зникає сенс використання таблиць стилів. Ще один спосіб:
Якщо файл CSS занадто великий, вам необхідно знайти код CSS, який відповідає за контент у верхній частині сторінки і вбудувати його в HTML, відклавши завантаження інших стилів.
Але код завантаження у нас також великий. Тому залишимо як є.
Крок 4. Перевірка
Запускаємо аналіз ще раз.
Результат аналізу сайту по Page Speed після виконання рекомендацій
Крок 5. Оптимізація зображень засобами Google
Однак після трьох оптимізації на сервісі tinypng один з малюнків все одно потрапляє в попередження.
Завантажуємо оптимізований Гуглом контент
Звернемо увагу на те, що в архіві розміщені лише ті файли, які вимагали оптимізації.
Звертали увагу на відмінності у jquery.js та jquery.min.js? Насамперед, саме в наявності переносів, прогалин та іншого. Перший читабельний і піддається редагування, у другому суцільний текст одним рядком. Натомість місця менше займає.
Завантажуємо, розгортаємо, перевіряємо. У балах змін немає, затепопереджень поменшало.
Попереджень поменшало.
Крок 6. Для мобільних пристроїв
Для мобільної версії після виконаних кроків ми також бачимо деяке покращення:
Оптимізація мобільної версії сайту
попередньо створивши у папці відповідний файл.
Виконаємо аналіз ще раз.
Ось такого результату ми досягли після оптимізації сайту за допомогою Google Page Speed
Підсумок тішить: із 63 піднялися до 81.
Залишилася одна критична помилка, але виправляється створенням мобільної версії сайту. У нас поки що її немає, тому при її розробці в майбутньому враховуватимемо цей параметр і постараємося прибрати ефекти з шапки.
Висновок
Швидкість завантаження сторінки – один із факторів ранжирування. Та й не варто забувати, що найкращий спосіб просування – турбота про своїх відвідувачів.