1. Інтерфейс Google PageSpeed Insights
2. Рекомендації Google PageSpeed Insights
3. 2. Оптимізувати зображення
4. 3.Удаліте код JavaScript і CSS, який блокує відображення верхньої частини сторінки
5. 4. Використовуйте кеш браузера
6. 5. Скоротіть JavaScript і CSS
7. 6. Увімкніть стиснення
8. 7. Мобільна версія
9. висновки

Прискорення вашого сайту - непросте завдання. Буває важко визначити, що змушує ваш сайт працювати повільніше. Вашою проблемою може бути що завгодно - від засміченого і погано написаного коду, до зображень або якихось інших великих елементів сторінки. І вам потрібно швидко діагностувати і усунути ці проблеми. Пошуковики віддають перевагу сайтам, які завантажуються швидко. Чим швидше завантажується сайт, тим нижче показник відмов. Якщо ваш сайт швидкий, у вас більше шансів збільшити трафік в Google, в порівнянні з повільними сайтами.

Google PageSpeed Insights - відмінний інструмент, який аналізує веб-сторінку і пропонує рішення, що дозволяють прискорити її завантаження. Він дуже корисний на початковій стадії, коли розробили сайт і потрібно провести аудит швидкодії, підготувати чек-лист для оптимізатора. Ми розглянемо, як використовувати і працювати з рекомендаціями Google PageSpeed.

Інтерфейс Google PageSpeed Insights

Щоб почати роботу, відкрийте інструмент PageSpeed Insights і введіть URL вашого сайту в відповідне поле, потім натисніть "Аналізувати":

З'явиться рядок виконання, Google-бот відвідає ваш сайт на мобільному і десктопном пристроях, проведе кілька основних тестів і видасть звіт. Він розповість, що потрібно знати про вашому сайті і що може заважати його швидкодії.

Ось як виглядає мій звіт:

Вам буде показана загальна оцінка вашого сайту (оцінка з 100), як для десктопного, так і для мобільного сайту, окремо по швидкості завантаження сторінки (швидка, середня, повільна) і якістю оптимізації сайту:

• Low (червоний) - свідчить про повільну завантаженні сторінки.
• Medium (помаранчевий) - сторінка відчуває деякі проблеми зі швидким завантаженням, але не критичні.
• High (зелений) - сторінка завантажується швидко.

Швидкість завантаження сторінки змиритися з події першої відтворення контенту (FCP) і DOM Content Loaded (DCL):

Звіт складається з 3 розділів:

1. Інформація про швидкість завантаження сторінки - показує кількість операцій і звернень до сервера при завантаженні сторінки;
2. Пропозиції щодо оптимізації - чек-лист того, що потрібно впровадити на сторінці для поліпшення швидкості;
3. Впроваджені прийоми оптимізації - показує те, що вже оптимізовано на сайті.

Давайте пройдемося по всіх рекомендацій Google PageSpeed, щоб зрозуміти як їх використовувати.

Рекомендації Google PageSpeed Insights

1.Сократіте час відповіді сервера

Нормальним показником буде 200-500 мс (0,2-0,5 с). Все що вище - Google вже зазначає.

Багато що залежить від хостингу, а саме конфігурації і налаштувань сервера. Якщо він недостатньо потужний - можуть виникати затримки у відповіді сервера.

Також велика кількість різних плагінів на сайті, які постійно звертаються до бази даних, можуть збільшувати навантаження на сервер, і тим самим створювати проблеми: при великій кількості переглядів сервер падає, виникають різні неполадки і затримки.

Як додатковий варіант, можна відключити всі непотрібні служби, що працюють на сервері, щоб збільшити швидкість.
Але найбільша різниця, яку я помітив, щоб зменшити час відгуку сервера, досить перейти на нову версію PHP, наприклад PHP 7. Різні звіти в інтернеті показують збільшення швидкості на 20-50% з переходом на PHP 7.

Отже, підсумуємо, що можна зробити для збільшення час відповіді сервера:

• перейти на більш сучасний і швидкий хостинг з підтримкою PHP 7
• змінити або оновити версію CMS сайту
• відключити або видалити всі непотрібні, застарілі і "важкі" плагіни на сайті, зменшивши таким чином кількість звернень до бази даних і знизивши навантаження на CPU сервера
• очистити базу даних сайту від зайвих записів, що також зменшить використання CPU

Більше рекомендацій по оптимізації сервера в документації Google:
https://developers.google.com/speed/docs/insights/Server

2. Оптимізувати зображення

Основна причина повільного завантаження сторінок і низьких балів в PageSpeed ​​Insights - великі зображення.

Наприклад, для ПС Google все, що перевищує 100 Кб вважається великим.

Як тільки я стиснув всі свої зображення на сайті - отримав величезне збільшення у швидкості.

Якщо ви використовуєте WordPress, один з кращих способів стиснути зображення, не витративши багато часу, використовувати плагін. Мій улюблений плагін для використання - WP Smush Image Compression and Optimization:

Якщо ваш сайт страждає через велику кількість великих зображень, то їх просто потрібно стиснути. Наприклад, при збереженні в Photoshop якість стиснення jpeg-файлу має бути не вище 85%. У більшості випадків немає ніякої потреби вказувати таке високе значення. Деякі веб-дизайнери часто згадують магічне число "51" для стиснення jpeg, але ви можете самі оцінити, наскільки можете зменшити якість.

Безкоштовні сервіси для стиснення зображень:

Більш детально про оптимізацію зображень:
https://developers.google.com/speed/docs/insights/OptimizeImages

3.Удаліте код JavaScript і CSS, який блокує відображення верхньої частини сторінки

Деякі скрипти і стилі, розташовані в самому верху сторінки в header, блокують відображення сторінки.

Рекомендується дуже громіздкі скрипти переносити з верхньої частини сайту в нижню, наприклад в footer. Або ж спробувати розбити скрипти на кілька маленьких підвантажуваних файлів, що збільшить швидкість завантаження повільної сторінки.

Детальніше про блокуючих елементах коду в документації Google:
https://developers.google.com/speed/docs/insights/BlockingJS#InlineJS

4. Використовуйте кеш браузера

Кешування браузера або Leverage browser caching - ще один інструмент, який може дуже вплинути на швидкість сторінки. Отримання ресурсів для завантаження вашого сайту вимагає великих зусиль. Він вимагає завантаження кожного елемента зображення і сторінки, а потім має справу з важким HTML і кодуванням. Кожен раз, коли хтось завантажує ваш сайт, цей процес повинен відбуватися знову і знову. Ваш сайт буде занадто довго завантажуватися. І саме тут може допомогти кешування.

Кешування дозволяє вашому браузеру «пам'ятати» певні елементи, які були недавно завантажені - заголовок, навігація, логотип і т. Д. Чим більше елементів браузер може кешувати, тим менше елементів він повинен завантажувати, коли користувач робить запит і, в кінцевому рахунку, швидше завантажиться сторінка. Google рекомендує мінімальну політику кешування протягом одного тижня, а для елементів, які в основному залишаються незмінними, краще один рік.

Він працює шляхом «запам'ятовування» раніше завантажених ресурсів, тому йому не потрібно перезавантажувати їх при кожному відвідуванні. Коли відвідувач веб-сайту переміщається на нову сторінку вашого сайту, всі ваші дані, наприклад, логотипи та кінцеві рядки, більше не потрібно завантажувати. Це призведе до значного збільшення швидкості!

5. Скоротіть JavaScript і CSS

Зведення до мінімуму простору, яке займає ваше кодування в форматі Java Script, є ще одним важливим фактором отримання ідеального результату від Google. Мінімізація - це процес видалення або виправлення непотрібних або дубльованих даних, не впливаючи на те, як браузер буде обробляти HTML. Він включає в себе виправлення коду, форматування, видалення невикористаного коду і скорочення коду, коли це можливо. І ще раз, завдяки приголомшливим плагинам WordPress, вам не потрібно бути генієм програмування, щоб виправити це.

Бажано почати з валідації всього HTML-коду сайту: https://validator.w3.org

Список сервісів для оптимізації JavaScript:

Список сервісів для оптимізації CSS:

Детальніше про оптимізацію JavaScript і CSS файлів в документації Google:
https://developers.google.com/speed/docs/insights/MinifyResources

6. Увімкніть стиснення

Існує великий обсяг даних, які необхідно передавати між серверами і користувачами при доступі до сайту. На щастя, є спосіб стиснення переданої інформації. Він називається - gzip (від GNU Zip).
Користувачі WordPress можуть включити gzip стиснення, встановивши плагін GZip Ninja Speed ​​Compression.
На багатьох хостингах gzip-сжаіте вже включено за замовчуванням, але ви можете перевірити включено воно чи ні на вашому сайті за допомогою сервісу: https://checkgzipcompression.com/

Детальніше про стиснення в документації Google:
https://developers.google.com/speed/docs/insights/EnableCompression#-

7. Мобільна версія

Всі рекомендації вище стосувалися деськтопной версії сайту. Для мобільного вони мало чим відрізняються, але пов'язані з роботою сайту під смартфони і планшети. Думаю, не варто розповідати вам, наскільки важливі обидві, особливо з введенням Mobile first Index в Google. Велику роль тут відіграє адаптивність і наявність AMP-сторінок (Accelerated Mobile Pages). Що вибрати - мобільну версію або якісну адаптивну верстку - читайте в статті: Мобільний пошук в сучасному SEO

висновки

В цілому, Google PageSpeed ​​Insights - корисний інструмент, але потрібно розуміти, що він не є "мірилом" швидкості сайту, а засобом SEO аудиту з точки зору швидкодії сайту. Якщо потрібно перевірити реальну швидкість - для цього існують такі сервіси як GTMetrix , Pingdom або WebPageTest . PageSpeed ​​же збере для вас корисну інформацію по проблемних зонах, які гальмують сайт і надасть чек-лист для оптимізатора.

Так само, на мій погляд, не варто гнатися за 100/100 оцінками в PageSpeed ​​Insights. У деяких ситуаціях це практично неможливо. Щоб їх досягти, іноді потрібно піти на шкоду функціональності сайту. Та й не всі рекомендації можуть бути безпечними. Наприклад, якщо перенести CSS в нижню частину сторінки, як рекомендує PageSpeed, веб-сторінка буде спершу довантажуватися без стилів, що звичайно ж збільшить кількість відмов.

Найголовніше - це виявити і проаналізувати основні помилки сайту і вчасно почати працювати в напрямку покращення його швидкодії.

Дерзайте!