Чек-лист по оптимізації швидкості завантаження

Як відомо, швидкість завантаження є фактором ранжування в пошуковій системі Google. Причому пошукова система використовує не тільки дані тестів PageSpeed (або Lighthouse), але і дані реальних користувачів Chrome.

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

Пункт №1 – лінива завантаження зображень

Ліниве завантаження (lazy loading) – техніка відкладання завантаження некритичних ресурсів сторінки до моменту їх появи у видимій області браузера. Застосовуючи ледаче завантаження для зображень і відео на сторінці ви не тільки прискорюєте завантаження першого екрану сайту, але й економите ресурси хостингу.

Для того, щоб пошуковик коректно враховував зображення завантажувані ліниво, необхідно розмістити посилання на джерело зображення в атрибуті data-src (або data-original) тега img. При цьому, для коректного обліку зображення в Google досить того що воно завантажується відразу після потрапляння у viewport.

Пункт №2 – використання CDN

Content Delivery Network – географічно розподілена мережева інфраструктура (група серверів), що дозволяє оптимізувати доставлення і дистрибуцію вмісту кінцевим користувачам.

Використання CDN дозволяє швидше доставляти статичні ресурси (зображення, стилі, скрипти та шрифти) кінцевому користувачеві. Варто звернути увагу що якщо ваш сайт надає послуги тільки по Україні, то і CDN варто вибирати в першу чергу такий, що забезпечує швидку доставку контенту по Україні (а не по США і Європі).

Пункт №3 – коректні формати зображень

Кожен формат створювався спеціально під певний тип зображень. Ні до чого використовувати більш витратний на ресурси формат для зображення на якість якого це не вплине, інакше це знизить швидкість завантаження сторінки.

Формат:

  • SVG для іконок;
  • JPEG для фотографій і банерів;
  • PNG для зображень з прозорістю;
  • GIF для анімованих зображень.

Можна використовувати більш сучасний і економний формат WebP від Google (замість JPEG, PNG і GIF), але для його коректного відображення в браузерах потрібно додатково підключати поліфіл – скрипт, який додає підтримку WebP в застарілі браузери.

Пункт № 4 – Менеджмент стилів

Стилі сторінок повинні зберігатися в мінімально необхідній кількості CSS-файлів, а також повинні ділитися на ті що відповідають за формування контенту першого екрану і ті що впливають на контент поза першого екрану.. Уникаємо використання стилів в HTML і пам’ятаємо що перший екран на мобільних пристроях і комп’ютерах різний!

Перший екран:

<link charset=”utf-8″ media='(min-width: 1200px)’ rel=”stylesheet” type=”text/css” href=”/desktop-before.css” />

Поза першим екраном:

<link charset=”utf-8″ media=”none” onload=”if(media!='(min-width: 1200px)’) media='(min-width: 1200px)'” rel=”stylesheet” type=”text/css” href=”/desktop-after.css” />

Пункт №5 – браузерне кешування

Ми можемо рекомендувати браузеру кешувати ресурси, які повторно використовуються на інших сторінках сайту. Це робиться за допомогою HTTP-заголовків Cache-Control і Expires (якщо термін кешування не заданий в Cache-Control).

Вказуємо кешуючий заголовок терміном на 1 рік для всіх статичних ресурсів: CSS, JS, шрифтів, зображень і відео.

Для змінюваних CSS і JS вказуємо версії (і міняємо їх в HTML при зміні файлів):

<link href=”/bitrix/cache/css/kernel_main.css?14356674393041″ type=”text/css” rel=”stylesheet”>

Якщо сервер Apache вказуємо у файлі .htaccess наступні рядки:

<filesMatch “.(ico|pdf|flv|jpg|jpeg|png|gif|js|css|swf)$”>
Header set Cache-Control “max-age=2592000, public”
</filesMatch>

Якщо сервер Nginx вказуємо у файлі конфігурацій / etc / nginx / site-enabled / default наступні рядки:

location ~* \.(png|jpg|jpeg|gif|js|css|pdf|html|swf)$ {
expires 365d;
add_header Cache-Control “public, no-transform”;
}

Пункт № 6 – серверне кешування

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

До серверного кешування відноситься:

  1. кешування сторінки цілком (не чіпаємо сторінки з авторизацією!);
  2. кешування результатів виконання окремих скриптів;
  3. кешування окремих блоків сторінки;
  4. кешування результатів запитів до бази даних у Зведені таблиці.

Пункт № 7 – Мініфікація коду

Мініфікація – видалення зайвих символів з коду, загальмовують читання коду браузером або сервером.

Мініфікуємо: серверні скрипти (PHP і т.п.), HTML, CSS і JS.

Звичайний код:

.check-item {
float: left;
font-family: ‘Golos’;
margin: .5em 0;
position: relative;
}

Мініфікований код (без пробілів, табуляції та нових рядків):

.check-item{float:left;font-family:Golos;margin:.5em 0;position:relative}

Пункт № 8 – Передзавантаження шрифтів

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

<link rel=”preload” href=”font.woff2″ as=”font” type=”font/woff2″ crossorigin>

Пункт № 9 – Менеджмент скриптів

Скрипти (як і стилі) повинні зберігатися в мінімально необхідній кількості JS-файлів, а також повинні ділитися на ті що відповідають за формування контенту сторінки і ті що не впливають на контент (до взаємодії).

Уникаємо використання скриптів в HTML!

Вказуємо атрибут async (спрацьовує скрипт який раніше завантажився) або defer (скрипти спрацьовують послідовно) для всіх скриптів.

<script src=”1.js” defer></script>

<script src=”2.js” defer></script>

Пункт №10 – Протокол HTTP/2

Протокол HTTP / 2 дозволяє швидше та ефективніше передавати дані між сервером і браузером (або роботом Googlebot). На відміну від HTTP/1 він не створює окреме з’єднання для завантаження кожного файлу, а завантажує їх всі паралельно, одним потоком.

Пункт №11 – Last Modified + 304

HTTP заголовок Last-Modified повідомляє клієнту час останньої зміни сторінки (об’єкта).

Якщо клієнт (браузер, пошуковий робот) отримав заголовок Last-Modified, то при наступному зверненні до адреси, за умови, що сторінка (об’єкт) є в кеші, він додасть питання If-Modified-Since (чи не змінилася сторінка після дати, отриманої в Last-Modified). Якщо сторінка не змінювалася, то клієнт отримає відповідь 304 Not Modified без контенту сторінки (його він візьме зі свого кешу).

Пункт №12 – стиснення GZIP

Gzip – стиснення використовує алгоритм DEFLATE, який знаходить однакові рядки в текстовому файлі і тимчасово їх замінює, тим самим зменшуючи загальний розмір файлу.

Грунтується на комбінації алгоритму стиснення LZ77 і кодування Хаффмана.

Cookie-Free домен – такий домен, який не підтримує обробку cookie-файлів. А значить браузеру не потрібно відправляти в запиті до нього купу ваших cookie-файлів.

Використовуємо такий домен для розміщення файлів CSS, JS, шрифтів і зображень.

Оцініть статтю
Додати коментар