Як домогтися результату 100/100 в Google Page Speed ​​Test Tool?

100 из 100 в pagespeed

Оцінюючи юзабіліті сайту, швидкість завантаження ресурсу, ми вважаємо ключовим, принципово важливим параметром. Саме цей показник займає не останнє місце серед численних факторів ранжування SEO. Насправді, сьогодні винятковий користувач буде чекати на завантаження сторінки довше, ніж п’ять секунд після кліку (ще добре, якщо він витримає бодай 2-3 секунди очікування). Напрошується безперечний висновок – між натисканням користувача на посилання і завантаженням даних сторінки повинен бути найкоротший, мінімальний із можливих часовий проміжок.

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

Більше 50% інтернет-користувачів – власників мобільних гаджетів – взагалі розраховують на блискавичне завантаження сайтів. Ось від цього статистичного факту ми і будемо відштовхуватися, розкриваючи тему, як домогтися результату 100 зі 100 у Google PageSpeed ​​Insights для десктопів і мобільних пристроїв. Прикладом нам буде сайт “Monitor Backlinks”.

Мотивація – прагнення до досконалості

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

Під час використання інструменту PageSpeed Tool був виявлений несподіваний нюанс – у веб-ресурсу компанії Google виявилися дуже невисокі параметри швидкості завантаження (всього 59/100) для мобільних гаджетів. google pagespeed

Версія для десктопів демонструє при цьому набагато кращі результати – 95/100. Теоретично, їм варто було б використовувати власний інструмент, щоб оптимізувати свій власний сайт. Це цілком логічно, чи не так? Можливо, результат 100/100 – це щось недосяжне? Ні, зовсім ні. Це цілком реально, було би бажання. Якщо ви прагнете до досконалості, та вас не лякають технічні труднощі, ви теж зможете домогтися бездоганно швидкого завантаження. Давайте перейдемо до докладного розгляду методів і маніпуляцій, за допомогою яких початкові показники “піддослідного” сайту 87/100 перетворилися на ось таку картину:monitorbacklinks speed

5 кроків, які допоможуть прискорити завантаження веб-сторінок

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

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

1. Оптимізуємо зображення на веб-ресурсі

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

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

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

2. Мінімізуємо JavaScript, CSS і HTML

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

Для ліквідації цієї проблеми на сервері встановлюється Gulpjs – інструмент, здатний в автоматичному режимі створювати новий CSS-файл і знищувати усі зайві байти – пропуски, переноси рядків і відступи. Новий файл CSS буде автоматом створюватися щоразу, коли вам знадобиться внести чергові зміни. У випадку, який ми розглядаємо як приклад, ці дії допомогли у два рази скоротити розмір основного CSS файлу – від 300Kb до 150Kb. Такий істотний результат був досягнутий за рахунок видалення зайвих символів.

Якщо ви працюєте на платформі WordPress, можна рекомендувати вам встановити плагін Autoptimize. Ви також можете завантажити оптимізовані дані з сервісу PageSpeed. Нижче наведений результат, який став можливий після робіт із мінімізації CSS і JavaScript.
нет проблем с кодом

3. Використовуємо кеш браузера

кеш браузера
Більшість веб-майстрів вважає застосування кешування браузера досить об’ємним. Для виконання цього завдання доводиться переміщувати кожен статичний файл із веб-ресурсу на CDN.

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

До прикладу, припустимо, головний сервер сайту розташовується у Техасі, а користувач, що зайшов на сайт, знаходиться в Амстердамі. Завдяки використанню CDN, користувачу не треба чекати, поки весь контент “добиратиметься” із американського сервера. Сайт досить швидко (практично блискавично) завантажиться із місцевого (амстердамського або іншого довколишнього) сервера CDN.

Проілюструємо наочно принцип роботи CDN:
CDN

На сайті-зразку були переміщені на CDN усі зображення та файли JavaScript і CSS, тому на центральному сервері залишилися для зберігання виключно HTML файли. Таке переміщення має істотний вплив на швидкість завантаження веб-ресурсу. Після виконання дій із перенесення файлів, PageSpeed ​​наполегливо пропонував, застосувати кешування браузера для деяких сторонніх ресурсів. Дивіться на скріншот:
кэш сторонних ресурсов

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

Але, виявилася ще одна проблема, більш неприємна, ніж нюанс зі скриптами соцмереж. Код Google Analytics уповільнював функціонування сайту. Вирішити це завдання виявилося складнішим, ніж попереднє. Оскільки Analytics дійсно необхідний і видаляти його з сайту недоцільно, постало питання щодо пошуку альтернативи видаленню. Google вкрай рідко вносить зміни у код Analytics, не частіше ніж 1-2 рази на рік. Тому Razvan розробив специфічний скрипт, для перевірки наявності оновлень коду Analytics. Перевірки здійснюються постійно і регулярно – по 3 рази на день. Якщо скрипт виявляє оновлення, він одразу завантажує їх. Це зручне рішення дозволяє розміщувати JavaScript код Analytics на сервері і знімає потребу завантажувати його із серверів Google кожного разу, коли новий відвідувач заходить на сайт.

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

Подивіться на скріншот із Pingdom Tools, який ілюструє усі завантаження з мережі серверів CDN, разом із кодом Google Analytics. Залишилося лише одне завантаження файлу із сервера – головна сторінка, обсяг файлу абсолютно незначний – 15,5 Kb. Ліквідувавши усі сторонні скрипти, вдалося досить істотно вплинути на зростання загальної швидкості завантаження сайту.улучшение скорости

4. Видаляємо коди, що є блокуючими

блокираторыПозбутися від блокаторів – ще одне технічно складне завдання у нашій покроковій інструкції, як підвищити швидкість завантаження сайту до максимального показника. Щоб упоратися із цим, потрібні специфічні знання та навички. Головна проблема, яка потребує вирішення, – це перевірка усього коду JavaScript знизу доверху, від заголовка до футера на кожній сторінці сайту. Якщо ваш сайт працює на WordPress, найбільш ймовірно ви зможете вирішити поставлене завдання за допомогою плагіна Autopmize. Спробуйте після перевірки налаштувань зняти позначку “Force JavaScript” у <head> та поставити позначку на “Inline all CSS”.

5. Вмикаємо стиснення

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

6. Оптимізуємо мобільну версію

Гнучка мобільна версія для різних видів розширення екрану передбачає використання правильних шрифтів і присутність відмінної системи навігації на сайті. Google Chrome дає можливість оцінити, який зовнішній вигляд буде у вашого сайту в тій чи іншій мобільній версії. Вам потрібно натиснути на іконку меню налаштувань, розташовану вгорі ліворуч, вибрати “додаткові інструменти”, а в них – “інструменти розробника”. На останній панелі вибирайте іконку, на якій зображені мобільні пристрої. Ця операція дуже проста, тепер подивіться на отриманий результат.адаптивный дизайн

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

Висновки

Як бачите, ми послідовно здійснили усі шість кроків, що склали для вас покрокову інструкцію. Ці цілеспрямовані дії дозволили домогтися вражаючого результату, якого ми і прагнули, – отримати для сайту “Monitor Backlinks” ідеальні показники у Google PageSpeed ​​Tools – 100 зі 100. Оптимізації піддалася як головна сторінка сайту, так і усі інші сторінки веб-ресурсу.

Якщо потрібно вибрати із перерахованих шести кроків кілька дій, найбільш значущих і ефективних для наших цілей, то до скороченого списку потраплять наступні поради:

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

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

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

Не забувайте також про той факт, що прискорення завантаження ресурсу впливає (нехай і не безпосередньо) на ранжування сайту у пошукових системах. Чим вищою буде швидкість завантаження ресурсу, тим більшою буде кількість відвідувачів, тим довшим – термін їхнього перебування на сайті та тим вищими ваші позиції у пошуковому рейтингу.
Якщо ви вже практикували для оптимізації власного веб-ресурсу пропозиції інструменту Google PageSpeed ​​Insights, нам було б цікаво дізнатися про результати, яких вам вдалося досягти. Поділіться своїми успіхами і розкажіть про свій індивідуальний досвід іншим веб-майстрам у коментарях до статті.

BLOG & NEWS

Залиште відповідь

ББудемо на зв'язку

Зв'яжіться з нами

  • вул. Дж. Вашингтона 5а, Львів, Україна
  • email: [email protected]
Дякуюємо!Ми отримали ваш запит.
Представник команди зв'яжеться з Вами найближчим часом.
Зазвичай це протягом 1-2 робочих годин.