Як отримати 100/100 в Google Page Speed Test Tool?
- мотивація
- Як прискорити завантаження сторінок?
- Крок № 1: Оптимізація зображень
- Крок № 2: Мінімізація JavaScript, CSS і HTML
- Крок № 3: Використання кеш браузера
- Крок № 4: Видалення блокуючих кодів
- Крок № 5: Включення стиснення
- Крок № 6: Оптимізація мобільного формату
- висновок
Антон Юдін | 40952
Оптимізація, SEO |
12.04.2016 |
Швидкість завантаження сайту є одним з найважливіших показників юзабільний ресурсу, і що не менш важливо, це один із сотні факторів ранжирування SEO . Дійсно, сучасний користувач, який клікнув по посиланню, не чекає завантаження сторінки більше 5 секунд. Тому, чим довше вантажиться ваш сайт, тим більше ви втрачаєте потенційних клієнтів.
Більше 50% користувачів інтернету з мобільних пристроїв, очікують практично миттєвого завантаження сайту. Виходячи з такої статистики, мова в цій статті піде про те, як досягти показників 100/100 в сервісі Google PageSpeed Insights для стаціонарних і мобільних пристроїв на прикладі сайту "Monitor Backlinks".
мотивація
Сайт-зразок і так завантажується досить швидко, тому в даному випадку будуть поліпшуватися результати до можливого максимуму.
Одного разу, під час роботи з PageSpeed Tool, було помічено, що сайт компанії Google має дивно низькі показники для мобільних пристроїв - 59/100. Ситуація з версією для стаціонарних пристроїв була краще - 92/100.
Здавалося б, що вони повинні були використовувати свій же інструмент для оптимізації свого веб-сайту, чи не так? Так невже результат 100/100 недосяжний?
Саме це послужило стимулом для досягнення максимально швидкого завантаження сайту, щоб довести, що досягти результатів 100/100 реально, і при бажанні ви також зможете це зробити. Це не одержимість, це просто прагнення досягти досконалості.
Стартові показники піддослідного сайту - 87/100.
У підсумку, після застосування певних маніпуляцій, було отримано такі результати:
Про те, як вдалося досягти таких показників, читайте далі.
Як прискорити завантаження сторінок?
Перш ніж приступити до покрокових дій згідно з інструкцією, дозвольте зазначити, що інструмент PageSpeed є всього лише орієнтиром для веб-майстрів на шляху оптимізації ресурсу. До того ж інструмент містить рекомендації щодо прискорення завантаження сторінок вашого сайту, а досягнення позитивних результатів багато в чому залежить від налаштувань сервера.
Зверніть увагу, на те, що деякі з кроків інструкції можуть зажадати технічних знань, незалежно від використовуваної системи управління контентом (CMS).
Отже, приступимо:
Крок № 1: Оптимізація зображень
Щоб зображення завантажувалися швидше, PageSpeed Insights Tool запропонував оптимізувати їх за рахунок зменшення розмірів файлів. Щоб вирішити це завдання, необхідно виконати дві важливі речі:
- Стиснути все зображення, використовуючи такі інструменти як Compressor.io і TinyPNG. Це безкоштовні інструменти, за допомогою яких можна зменшити розмір графічного файлу більш ніж на 80%, а в деяких випадках, без погіршення якості самого зображення.
- Зменшити розміри зображень до мінімуму без зниження їх якості. Наприклад, якщо на сайті нам потрібна картинка 150x150px, то і на сервері картинка повинна бути відповідних розмірів. Установки фотозйомки не повинні підганяти за допомогою CSS або HTML-тегів.
Згідно з вищезазначеними правилами кожне зображення на сайті було завантажено, а також вручну стисло і підігнано за розмірами. А щоб не морочитися з оптимізацією зображень після їх завантаження на сайт, краще візьміть за звичку спочатку оптимізувати всі нові зображення, що завантажуються на сервер. Кожне нове зображення повинно бути стисло і підігнано до необхідних параметрів.
PageSpeed Insights пропонує опцію завантаження вже оптимізованих зображень, тому їх можна завантажити на сервер безпосередньо з даного сервісу. Те ж саме можна зробити і з JavaScript і CSS.
Крок № 2: Мінімізація JavaScript, CSS і HTML
У прикладі, Google пропонує скоротити обсяги 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:
Крок № 3: Використання кеш браузера
Для багатьох веб-майстрів етап використання кешування браузера є найскладнішим.
Щоб вирішити це питання, довелося перенести всі статичні файли з сайту на CDN (content delivery network / мережу доставки контенту).
CDN є мережею серверів, розташованих в різних місцях по всьому світу. Вони кешують статичні версії веб-сайтів, такі як зображення, файли JavaScript і CSS. На серверах CDN зберігаються копії вмісту сайту, а при заході на цей сайт, статичне вміст завантажується з найближчого сервера.
Наприклад, якщо основний сервер сайту знаходиться в Техасае, то без CDN, відвідувачеві з Амстердама доведеться чекати, поки контент сайту подолає весь шлях від сервера розташованого в США. З CDN, сайт завантажиться набагато швидше з найближчого до користувача сервера, в даному випадку з Амстердама. Таким чином, скорочується відстань доступу до даних і сайт завантажуватися практично миттєво.
Ось візуалізація того, як працює CDN:
На піддослідному сайті все зображення, файли JavaScript і CSS були перенесені на CDN, а на головному сервері залишилися зберігатися тільки файли HTML. Розміщення зображень на CDN грає важливу роль в тому, наскільки швидко будуть завантажуватися сторінки сайту для відвідувачів.
Після вищезазначених маніпуляцій інструмент PageSpeed прикро продовжував пропонувати використовувати кешування браузера для окремих сторонніх ресурсів. Ось скріншот:
Щоб вирішити це питання, довелося виправити скрипти соціальних мереж шляхом заміни лічильників, на статичні зображення, розміщені на CDN. Замість сторонніх скриптів, які намагалися отримувати доступ до даних з Twitter, Facebook або Google Plus, для підрахунку передплатників, був встановлений автономний лічильник, що і допомогло вирішити дане питання.
Але більш прикрим було те, що на додачу до проблем зі скриптами соціальних мереж роботу веб-сайту уповільнював код 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: Видалення блокуючих кодів
Усунення блокаторів також є досить складним етапом в процесі підвищення швидкості завантаження сторінок, що вимагає хороших технічних знань. Основна проблема, яку довелося вирішувати - це ревізія всього коду JavaScript починаючи зверху від "header" і "body" до розташованого внизу "footer" на всіх сторінках сайту.
Більш детально дивіться за посиланням: https://developers.google.com/speed/docs/insights/BlockingJS#InlineJS
Якщо ваш сайт на платформі Wordpress, плагін Autopmize, швидше за все, допоможе вам вирішити цю задачу. Перевірте свої настройки, а потім в <head> зніміть позначку з "Force JavaScript" і встановіть її на "Inline all CSS".
Крок № 5: Включення стиснення
Включити стиснення ви можете в настройках сервера. Якщо ви не впевнені в своїх технічних можливостях, зверніться за допомогою до служби технічної підтримки, вони допоможуть вам включити стиск GZIP для сервера. Додаткові рекомендації по установці GZIP стиснення дивіться тут: https://developers.google.com/speed/docs/insights/EnableCompression#-
Крок № 6: Оптимізація мобільного формату
Аналіз мобільного формату показує адаптивність мобільної версії сайту під різні типи дозволу, використання відповідних шрифтів, і наявність хорошої навігаційної системи.
За допомогою Google Chrome ви можете подивитися, як ваш сайт виглядає в різних мобільних версіях. Для цього натисніть на іконку меню (гамбургер) налаштувань і управління браузером в верхньому правому куті, а потім виберіть "Додаткові інструменти → Інструменти розробника". На панелі інструментів виберіть іконку із зображенням мобільних пристроїв. Ось і все, дивіться:
У разі прикладу, не треба було будь-яких радикальних змін.
висновок
В результаті було виконано 6 найважливіших кроків, які допомогли досягти ідеальних показників 100/100 в Google PageSpeed Tools для сайту "Monitor Backlinks". В результаті була оптимізована не тільки головна сторінка, а й всі внутрішні сторінки.
Серед всіх виконаних дій по оптимізації сайту можна виділити три найважливіших:
- Використання CDN.
- Усунення блокуючих кодів. (Уникайте JavaScript в тілі кодування, краще перемістити його в низ файлів.)
- Оптимізація розмірів і стиснення зображень.
Хочеться ще раз нагадати про те, що Google PageSpeed Tools є всього лише допоміжним інструментом для оптимізації ресурсу. Інструменти призначені для скорочення часу між запитом (кліком по посиланню) і відгуком сторінки сайту (відображення перших елементів сторінки), щоб відвідувачі не залишали сайт, так і не дочекавшись його завантаження. Також рекомендації, надані інструментом, необхідно застосовувати з обережністю, щоб користувачам не показувалася розвалена верстка або якийсь не стилізований набір блоків.
Зверніть увагу. Швидке завантаження сторінок сайту побічно впливає на ранжування ресурсу в пошукових системах, тобто: вище швидкість завантаження → більше і довше відвідування → вище ранжування.
Якщо ви використовували інструмент Google PageSpeed Insights для оптимізації свого сайту, поділіться досягнутими результатами в коментарях.
Також не забувайте про те, що фахівці UAWEB завжди готові надати необхідну допомогу в питаннях створення, оптимізації та просування вашого веб-ресурсу, щоб кожна секунда проведена користувачами на вашому сайті приносила вам вигоду!
джерело: moz.com
Читайте також:
Як автоматизувати звіти Google Analytics за допомогою Google Таблиць?
Потрібні продажу? Налаштуйте Е-commerce інтернет-магазину!
Чек-лист по налаштуванню E-commerce в Google Analytics
Як створити сайт, зберігши нерви і гроші?
Маркетинговий план розвитку сайту: 15 кроків до успіху.
Внутрішня оптимізація сайту: Мета теги
Як безкоштовно розкрутити сайт? 5 практичних порад.
Так невже результат 100/100 недосяжний?Як прискорити завантаження сторінок?
Потрібні продажу?