Швидкість завантаження сайту є одним з найважливіших показників юзабільний ресурсу, і що не менш важливо, це один із сотні факторів ранжирування 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-тегів.
Згідно з вищезазначеними правилами кожне зображення на сайті було завантажено, а також вручну стисло і підігнано за розмірами. А щоб не морочитися з оптимізацією зображень після їх завантаження на сайт, краще візьміть за звичку спочатку оптимізувати всі нові зображення, що завантажуються на сервер. Кожне нове зображення повинно бути стисло і підігнано до необхідних параметрів.
Щоб усунути цю проблему, на сервері був встановлений Gulpjs. Це інструмент, який автоматично створює новий файл CSS і видаляє всі непотрібні пропуски. Також він автоматично створює новий файл CSS кожен раз, коли ви вносите нові зміни. У наведеному прикладі, це допомогло зменшити розмір основного файлу CSS приблизно з 300Kb до 150Kb. Така різниця в розмірах обумовлена непотрібними символами.
Зменшити CSS можна, використовуючи інструменти YUI Compressor і cssmin.js.
У разі використання Wordpress, рекомендується встановлювати плагін Autoptimize.
Також можна завантажити оптимізовані файли безпосередньо з PageSpeed Tool.
Крок № 3: Використання кеш браузера
Для багатьох веб-майстрів етап використання кешування браузера є найскладнішим.
Щоб вирішити це питання, довелося перенести всі статичні файли з сайту на CDN (content delivery network / мережу доставки контенту).
Наприклад, якщо основний сервер сайту знаходиться в Техасае, то без CDN, відвідувачеві з Амстердама доведеться чекати, поки контент сайту подолає весь шлях від сервера розташованого в США. З CDN, сайт завантажиться набагато швидше з найближчого до користувача сервера, в даному випадку з Амстердама. Таким чином, скорочується відстань доступу до даних і сайт завантажуватися практично миттєво.
Ось візуалізація того, як працює CDN:
Після вищезазначених маніпуляцій інструмент PageSpeed прикро продовжував пропонувати використовувати кешування браузера для окремих сторонніх ресурсів. Ось скріншот:
Рішення проблеми зі скриптом Google Analytics досить складне завдання. Так як Analytics був потрібен, і його не можна видаляти з сайту, довелося шукати інші рішення.
У разі відсутності оновлень, код Analytics буде завантажуватися з кешованої версії на CDN.
Ось скріншот з Pingdom Tools на якому показані всі завантаження з CDN, в тому числі і код Google Analytics. Єдиний файл завантаження з сервера, це файл домашньої сторінки, обсяг якого лише 15,5Kb. Усунення всіх сторонніх скриптів значно поліпшило загальну швидкість завантаження.
Крок № 4: Видалення блокуючих кодів
Крок № 5: Включення стиснення
Крок № 6: Оптимізація мобільного формату
Аналіз мобільного формату показує адаптивність мобільної версії сайту під різні типи дозволу, використання відповідних шрифтів, і наявність хорошої навігаційної системи.
За допомогою Google Chrome ви можете подивитися, як ваш сайт виглядає в різних мобільних версіях. Для цього натисніть на іконку меню (гамбургер) налаштувань і управління браузером в верхньому правому куті, а потім виберіть "Додаткові інструменти → Інструменти розробника". На панелі інструментів виберіть іконку із зображенням мобільних пристроїв. Ось і все, дивіться:
У разі прикладу, не треба було будь-яких радикальних змін.
Серед всіх виконаних дій по оптимізації сайту можна виділити три найважливіших:
Хочеться ще раз нагадати про те, що Google PageSpeed Tools є всього лише допоміжним інструментом для оптимізації ресурсу. Інструменти призначені для скорочення часу між запитом (кліком по посиланню) і відгуком сторінки сайту (відображення перших елементів сторінки), щоб відвідувачі не залишали сайт, так і не дочекавшись його завантаження. Також рекомендації, надані інструментом, необхідно застосовувати з обережністю, щоб користувачам не показувалася розвалена верстка або якийсь не стилізований набір блоків.
Зверніть увагу. Швидке завантаження сторінок сайту побічно впливає на ранжування ресурсу в пошукових системах, тобто: вище швидкість завантаження → більше і довше відвідування → вище ранжування.
Також не забувайте про те, що фахівці UAWEB завжди готові надати необхідну допомогу в питаннях створення, оптимізації та просування вашого веб-ресурсу, щоб кожна секунда проведена користувачами на вашому сайті приносила вам вигоду!