Як отримати 100/100 в Google Page Speed ​​Test Tool?

  1. мотивація
  2. Як прискорити завантаження сторінок?
  3. Крок № 1: Оптимізація зображень
  4. Крок № 2: Мінімізація JavaScript, CSS і HTML
  5. Крок № 3: Використання кеш браузера
  6. Крок № 4: Видалення блокуючих кодів
  7. Крок № 5: Включення стиснення
  8. Крок № 6: Оптимізація мобільного формату
  9. висновок
НАЗАД

Антон Юдін | 40952

Оптимізація, SEO |

12.04.2016 |

Швидкість завантаження сайту є одним з найважливіших показників юзабільний ресурсу, і що не менш важливо, це один із сотні факторів ранжирування SEO . Дійсно, сучасний користувач, який клікнув по посиланню, не чекає завантаження сторінки більше 5 секунд. Тому, чим довше вантажиться ваш сайт, тим більше ви втрачаєте потенційних клієнтів.

Тому, чим довше вантажиться ваш сайт, тим більше ви втрачаєте потенційних клієнтів

Більше 50% користувачів інтернету з мобільних пристроїв, очікують практично миттєвого завантаження сайту. Виходячи з такої статистики, мова в цій статті піде про те, як досягти показників 100/100 в сервісі Google PageSpeed ​​Insights для стаціонарних і мобільних пристроїв на прикладі сайту "Monitor Backlinks".

Виходячи з такої статистики, мова в цій статті піде про те, як досягти показників 100/100 в сервісі Google PageSpeed ​​Insights для стаціонарних і мобільних пристроїв на прикладі сайту Monitor Backlinks

мотивація

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

Одного разу, під час роботи з PageSpeed ​​Tool, було помічено, що сайт компанії Google має дивно низькі показники для мобільних пристроїв - 59/100. Ситуація з версією для стаціонарних пристроїв була краще - 92/100.

Ситуація з версією для стаціонарних пристроїв була краще - 92/100

Здавалося б, що вони повинні були використовувати свій же інструмент для оптимізації свого веб-сайту, чи не так? Так невже результат 100/100 недосяжний?

Саме це послужило стимулом для досягнення максимально швидкого завантаження сайту, щоб довести, що досягти результатів 100/100 реально, і при бажанні ви також зможете це зробити. Це не одержимість, це просто прагнення досягти досконалості.

Стартові показники піддослідного сайту - 87/100.

У підсумку, після застосування певних маніпуляцій, було отримано такі результати:

Про те, як вдалося досягти таких показників, читайте далі.

Як прискорити завантаження сторінок?

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

Зверніть увагу, на те, що деякі з кроків інструкції можуть зажадати технічних знань, незалежно від використовуваної системи управління контентом (CMS).

Отже, приступимо:

Крок № 1: Оптимізація зображень

Крок № 1: Оптимізація зображень

Щоб зображення завантажувалися швидше, PageSpeed ​​Insights Tool запропонував оптимізувати їх за рахунок зменшення розмірів файлів. Щоб вирішити це завдання, необхідно виконати дві важливі речі:

  • Стиснути все зображення, використовуючи такі інструменти як Compressor.io і TinyPNG. Це безкоштовні інструменти, за допомогою яких можна зменшити розмір графічного файлу більш ніж на 80%, а в деяких випадках, без погіршення якості самого зображення.
  • Зменшити розміри зображень до мінімуму без зниження їх якості. Наприклад, якщо на сайті нам потрібна картинка 150x150px, то і на сервері картинка повинна бути відповідних розмірів. Установки фотозйомки не повинні підганяти за допомогою CSS або HTML-тегів.

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

PageSpeed ​​Insights пропонує опцію завантаження вже оптимізованих зображень, тому їх можна завантажити на сервер безпосередньо з даного сервісу. Те ж саме можна зробити і з JavaScript і CSS.

Те ж саме можна зробити і з JavaScript і CSS

Крок № 2: Мінімізація JavaScript, CSS і HTML

У прикладі, Google пропонує скоротити обсяги JavaScript і CSS файлів.

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

Програмісти часто залишають багато місця і коментарі під час кодування, що може подвоїти обсяг JavaScript і CSS файлів

Щоб усунути цю проблему, на сервері був встановлений Gulpjs. Це інструмент, який автоматично створює новий файл CSS і видаляє всі непотрібні пропуски. Також він автоматично створює новий файл CSS кожен раз, коли ви вносите нові зміни. У наведеному прикладі, це допомогло зменшити розмір основного файлу CSS приблизно з 300Kb до 150Kb. Така різниця в розмірах обумовлена ​​непотрібними символами.

Додатково зменшити розміри JavaScript і CSS можна за рахунок перейменування змінних, за умови коректної роботи селекторів і поновлення HTML.

Оптимізувати JavaScript можна за допомогою Closure Compiler, JSMin або YUI Compressor. Ви можете створити спеціальну програму, яка використовуючи перераховані вище інструменти, буде перейменовувати файли і зберігати їх в робочий каталог.

Зменшити CSS можна, використовуючи інструменти YUI Compressor і cssmin.js.

Мінімізувати HTML код можна через PageSpeed ​​Insights. Виконайте аналіз сторінки і виберіть "Скоротити HTML". Щоб оптимізувати код клікніть на "Переглянути оптимізоване зміст".

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

У разі використання Wordpress, рекомендується встановлювати плагін Autoptimize.

Також можна завантажити оптимізовані файли безпосередньо з PageSpeed ​​Tool.

Ось результати, отримані після мінімізації JavaScript і CSS:

Ось результати, отримані після мінімізації JavaScript і CSS:

Крок № 3: Використання кеш браузера

Крок № 3: Використання кеш браузера

Для багатьох веб-майстрів етап використання кешування браузера є найскладнішим.

Щоб вирішити це питання, довелося перенести всі статичні файли з сайту на CDN (content delivery network / мережу доставки контенту).

CDN є мережею серверів, розташованих в різних місцях по всьому світу. Вони кешують статичні версії веб-сайтів, такі як зображення, файли JavaScript і CSS. На серверах CDN зберігаються копії вмісту сайту, а при заході на цей сайт, статичне вміст завантажується з найближчого сервера.

Наприклад, якщо основний сервер сайту знаходиться в Техасае, то без CDN, відвідувачеві з Амстердама доведеться чекати, поки контент сайту подолає весь шлях від сервера розташованого в США. З CDN, сайт завантажиться набагато швидше з найближчого до користувача сервера, в даному випадку з Амстердама. Таким чином, скорочується відстань доступу до даних і сайт завантажуватися практично миттєво.

Ось візуалізація того, як працює CDN:

Ось візуалізація того, як працює CDN:

На піддослідному сайті все зображення, файли JavaScript і CSS були перенесені на CDN, а на головному сервері залишилися зберігатися тільки файли HTML. Розміщення зображень на CDN грає важливу роль в тому, наскільки швидко будуть завантажуватися сторінки сайту для відвідувачів.

Після вищезазначених маніпуляцій інструмент PageSpeed ​​прикро продовжував пропонувати використовувати кешування браузера для окремих сторонніх ресурсів. Ось скріншот:

Щоб вирішити це питання, довелося виправити скрипти соціальних мереж шляхом заміни лічильників, на статичні зображення, розміщені на CDN. Замість сторонніх скриптів, які намагалися отримувати доступ до даних з Twitter, Facebook або Google Plus, для підрахунку передплатників, був встановлений автономний лічильник, що і допомогло вирішити дане питання.

Але більш прикрим було те, що на додачу до проблем зі скриптами соціальних мереж роботу веб-сайту уповільнював код Google Analytics.

Але більш прикрим було те, що на додачу до проблем зі скриптами соціальних мереж роботу веб-сайту уповільнював код Google Analytics

Рішення проблеми зі скриптом Google Analytics досить складне завдання. Так як Analytics був потрібен, і його не можна видаляти з сайту, довелося шукати інші рішення.

Google досить рідко змінює код Analytics, раз чи два на рік. Тому, Razvan створив спеціальний скрипт, який кожні вісім годин перевіряє наявність останніх оновлень коду Analytics, і при наявності оновлення завантажує їх. Таким чином, можна розмістити JavaScript код Analytics на сервер, виключаючи необхідність завантажувати його з серверів Google, при кожному відвідуванні.

У разі відсутності оновлень, код Analytics буде завантажуватися з кешованої версії на CDN.

А коли Google оновить код JavaScript, то сервер автоматично завантажить нову версію і оновить його на CDN. Цей скрипт був використаний для всіх зовнішніх сторонніх скриптів.

Ось скріншот з Pingdom Tools на якому показані всі завантаження з CDN, в тому числі і код Google Analytics. Єдиний файл завантаження з сервера, це файл домашньої сторінки, обсяг якого лише 15,5Kb. Усунення всіх сторонніх скриптів значно поліпшило загальну швидкість завантаження.

Усунення всіх сторонніх скриптів значно поліпшило загальну швидкість завантаження

Крок № 4: Видалення блокуючих кодів

Крок № 4: Видалення блокуючих кодів

Усунення блокаторів також є досить складним етапом в процесі підвищення швидкості завантаження сторінок, що вимагає хороших технічних знань. Основна проблема, яку довелося вирішувати - це ревізія всього коду JavaScript починаючи зверху від "header" і "body" до розташованого внизу "footer" на всіх сторінках сайту.

Більш детально дивіться за посиланням: https://developers.google.com/speed/docs/insights/BlockingJS#InlineJS

Якщо ваш сайт на платформі Wordpress, плагін Autopmize, швидше за все, допоможе вам вирішити цю задачу. Перевірте свої настройки, а потім в <head> зніміть позначку з "Force JavaScript" і встановіть її на "Inline all CSS".

Крок № 5: Включення стиснення

Крок № 5: Включення стиснення

Включити стиснення ви можете в настройках сервера. Якщо ви не впевнені в своїх технічних можливостях, зверніться за допомогою до служби технічної підтримки, вони допоможуть вам включити стиск GZIP для сервера. Додаткові рекомендації по установці GZIP стиснення дивіться тут: https://developers.google.com/speed/docs/insights/EnableCompression#-

Крок № 6: Оптимізація мобільного формату

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

За допомогою Google Chrome ви можете подивитися, як ваш сайт виглядає в різних мобільних версіях. Для цього натисніть на іконку меню (гамбургер) налаштувань і управління браузером в верхньому правому куті, а потім виберіть "Додаткові інструменти → Інструменти розробника". На панелі інструментів виберіть іконку із зображенням мобільних пристроїв. Ось і все, дивіться:

У разі прикладу, не треба було будь-яких радикальних змін.

висновок

В результаті було виконано 6 найважливіших кроків, які допомогли досягти ідеальних показників 100/100 в Google PageSpeed ​​Tools для сайту "Monitor Backlinks". В результаті була оптимізована не тільки головна сторінка, а й всі внутрішні сторінки.


Серед всіх виконаних дій по оптимізації сайту можна виділити три найважливіших:

  1. Використання CDN.
  2. Усунення блокуючих кодів. (Уникайте JavaScript в тілі кодування, краще перемістити його в низ файлів.)
  3. Оптимізація розмірів і стиснення зображень.

Хочеться ще раз нагадати про те, що Google PageSpeed ​​Tools є всього лише допоміжним інструментом для оптимізації ресурсу. Інструменти призначені для скорочення часу між запитом (кліком по посиланню) і відгуком сторінки сайту (відображення перших елементів сторінки), щоб відвідувачі не залишали сайт, так і не дочекавшись його завантаження. Також рекомендації, надані інструментом, необхідно застосовувати з обережністю, щоб користувачам не показувалася розвалена верстка або якийсь не стилізований набір блоків.

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

Якщо ви використовували інструмент Google PageSpeed ​​Insights для оптимізації свого сайту, поділіться досягнутими результатами в коментарях.

Також не забувайте про те, що фахівці UAWEB завжди готові надати необхідну допомогу в питаннях створення, оптимізації та просування вашого веб-ресурсу, щоб кожна секунда проведена користувачами на вашому сайті приносила вам вигоду!

джерело: moz.com

Читайте також:

Як автоматизувати звіти Google Analytics за допомогою Google Таблиць?

Потрібні продажу? Налаштуйте Е-commerce інтернет-магазину!

Чек-лист по налаштуванню E-commerce в Google Analytics

Як створити сайт, зберігши нерви і гроші?

Маркетинговий план розвитку сайту: 15 кроків до успіху.

Внутрішня оптимізація сайту: Мета теги

Як безкоштовно розкрутити сайт? 5 практичних порад.

Так невже результат 100/100 недосяжний?
Як прискорити завантаження сторінок?
Потрібні продажу?