Швидкість завантаження сторінки є фактором ранжування в Google з 2010 року, коли його вперше анонсували. Подальше велике оновлення відбулося 2018 року, а потім 2020-го. У статті розглянемо, яка швидкість завантаження сторінок має бути сьогодні, як її виміряти та найголовніше — як покращити.
Що таке швидкість завантаження
Існують десятки показників, що впливають на швидкість сторінки, і Google знадобився час, щоб з’ясувати, які з них дійсно впливають на досвід користувача. Їх зібрали до групи — Core Web Vitals чи основні інтернет-показники. Вони включають швидкість завантаження основного контенту (LCP), час очікування до першої взаємодії з контентом (FID) і сукупне зміщення макета (CLS). Ці показники використовуються для вимірювання швидкості сторінки.
Швидкість завантаження основного контенту
Це час, необхідний для повного завантаження найбільшого елемента у видимій користувачеві області сторінки.
Зазвичай найбільшим елементом на сторінці є зображення, тому його оптимізація є основним фактором, що впливає на показник. Крім того, LCP залежить від часу відгуку сервера, коду, що блокує рендеринг та рендерингу на стороні клієнта.
Час очікування до першої взаємодії з контентом
Це затримка між відображенням інтерактивного елемента та моментом, коли він стає функціональним. Наприклад, на сторінці намальовано кнопку, ви натискаєте на неї, але вона ще не реагує.
FID можна оптимізувати за допомогою розділення коду та використання меншої кількості JavaScript.
Сукупне зміщення макета
Показник вимірює, чи переміщуються елементи на сторінці під час завантаження. Наприклад, сторінка виглядає так, ніби готова до використання, але потім угорі з’являється нове зображення, а решта вмісту переміщується вниз. Це і є зсув макета.
CLS залежить від правильно встановлених атрибутів розміру та від послідовності завантаження ресурсів зверху вниз.
Як виміряти швидкість сторінки
Google має цілий набір інструментів, які вимірюють основні інтернет-показники.
Однією з проблем є те, що деякі інструменти використовують лабораторні дані замість польових, в той час як Гугл ранжує сторінки виключно за другим набором. Два інструменти у добірці використовують TBT – загальний час блокування. Це лабораторний показник.
Ще одна проблема — більшість інструментів оцінюють лише одну сторінку. Це не дуже практичний підхід до оптимізації сайту.
З перерахованих вище інструментів Google найкраще підходить Google Search Console. У ній можна переглянути звіт за основними інтернет-показниками по всіх сторінках сайту.
Під звітом знаходиться список усіх показників, які не дали добрих результатів. Звідси ви можете отримати деталізацію проблем з кожною метрикою, переглянути сторінки, на яких вони присутні. Через кілька кліків ви потрапите до звіту PageSpeed Insights для конкретної сторінки.
Виміряти швидкість сторінки можна за допомогою WebSite Auditor. Щоб отримати інформацію, потрібно ввести ключ API. Перейдіть до структури сайту > SEO-аналіз вебсайту. Перейдіть до списку Page Speed. Ви побачите загальний звіт про швидкість завантаження сторінок для всього сайту, зможете переглянути сторінки, що цікавлять.
Можна перейти до режиму «Сторінки» та у стовпці Core Web Vitals Assessment переглянути список сторінок, де виникли проблеми зі швидкістю. Натиснувши на будь-яку сторінку, ви отримаєте список елементів, які можна оптимізувати для підвищення продуктивності.
Як покращити швидкість завантаження
Тепер, коли у вас є список проблемних сторінок, настав час попрацювати над підвищенням швидкості завантаження. Нижче наведено найбільш поширені способи оптимізації, а також кілька порад, як їх використовувати.
1. Встановіть розмір зображення
Почнемо із простого. Якщо ви не прописуєте розмір зображень у своєму коді, браузеру потрібен час, щоб визначити правильний. Отже, контент на сторінці буде рухатися, що негативно позначиться на CLS. Щоб уникнути цієї проблеми, завжди встановлюйте властивості ширини та висоти зображень.
<img src=”pillow.jpg” width=”640″ height=”360″ alt=”purple pillow with flower pattern” />
За допомогою цієї інформації браузер може розрахувати розміри зображення та зарезервувати місце на сторінці. Це має вирішити більшість проблем із CLS, а в деяких випадках і всі проблеми.
2. Використовуйте сучасні формати зображень
Не всі формати зображень однакові. Популярні раніше JPEG і PNG тепер відрізняються найгіршими характеристиками стиснення та якості, ніж AVIF, JPEG 2000, JPEG XR та WebP.
Насамперед зверніть увагу на WebP. Формат підтримує стиск як із втратами, так і без них, а також забезпечує прозорість та анімацію. Крім того, файли WebP, як правило, на 25-35% легші, ніж PNG і JPEG аналогічної якості. WebP підтримується більш ніж 90% браузерів.
Якщо ваш сайт зроблений на WordPress, ви можете створити WebP-копію зображень за допомогою плагіна, наприклад, Imagify. Якщо веб-сайт створений не на CMS-платформі або ви не бажаєте встановлювати багато плагінів, конвертуйте зображення онлайн або в графічних редакторах.
3. Стиснення зображень
Незалежно від того, чи використовуєте ви сучасні формати зображень чи ні, стиснення, як і раніше, дієвий спосіб зменшення загального розміру сторінки. Якщо ваш сайт зроблений за допомогою WordPress, ви можете стискати зображення масово за допомогою плагінів, наприклад, WP Smush.
Ви також можете використовувати онлайн-інструменти, якщо не хочете встановлювати багато плагінів, що може негативно вплинути на роботу сайту. Можна стиснути зображення у графічних редакторах.
4. Відкладення закадрових зображень
Закадрові зображення — це зображення, які знаходяться поза видимою користувачем області сторінки під час першого завантаження. Все, що нижче за неї, повинно завантажуватися з відкладанням.
Насамперед завантажуються елементи, які користувач бачить у верхній частині сторінки. Саме її враховує Google, коли вимірює швидкість завантаження, відповідно, і у питаннях оптимізації варто зосередитись на ній.
5. Конвертуйте GIF у відео
Це може здатися нелогічним, але GIF-файли найчастіше важать більше, ніж відео. Перетворення великого GIF-файлу на відео може полегшити його аж до 500 %. Якщо у звіті WebSite Auditor у графі Use video formats for animated content є сторінки, варто виконати цю рекомендацію.
Щоб конвертувати GIF-файли у відео, можна використовувати онлайн-інструмент або завантажити FFmpeg. Google рекомендує створювати два відеоформати: WebM та mp4. WebM схожий на WebP — він легший, але поки що не підтримується всіма браузерами. При додаванні відео на сторінку спочатку потрібно вказати версію WebM, а потім версію mp4 як резервну копію.
<video autoplay loop muted playsinline>
<source src=”animation.webm” type=”video/webm”>
<source src=”animation.mp4″ type=”video/mp4″>
</video>
Зверніть увагу, що елемент video має чотири додаткові атрибути: autoplay, loop, muted і playsinline. Завдяки ним відео поводиться як GIF — починає відтворюватися автоматично, зациклюється, відтворюється без звуку та в рядку.
6. Відкладення не застосовуваних CSS
CSS, що не використовується, може уповільнити побудову дерева рендера браузером. Програма повинна пройти дерево DOM і перевірити, які правила CSS застосовуються до кожного вузла. Отже, що більше невикористовуваного CSS, то більше часу знадобиться браузеру для обчислення стилів. Визначте невикористані або некритичні фрагменти CSS і повністю видаліть їх, або змініть порядок їх завантаження.
7. Мінімізуйте JS та CSS
Файли JS та CSS можуть містити непотрібні коментарі, пробіли, розриви рядків та фрагменти коду. Їх видалення може полегшити файл на 50%, однак у середньому показник менший. Тим не менш, це невеликий внесок у збільшення швидкості завантаження.
Якщо у вас невеликий сайт, ви можете скоротити код за допомогою онлайн-інструментів – наприклад, CSS Minifier, JavaScript Minifier та HTML Compressor. Якщо ваш сайт створений на CMS-платформі, наприклад WordPress, є спеціальні плагіни.
8. Вилучення критичного CSS
За промовчанням CSS є ресурсом, що блокує рендеринг. Ваша сторінка не буде відображатися доти, доки браузер не отримає і не проаналізує файли CSS, що може зайняти досить багато часу.
Щоб вирішити проблему, ви можете вилучити лише ті стилі, які потрібні для верхньої частини сторінки, і додати їх до <head> HTML-документа. Інші CSS-файли можуть завантажуватися асинхронно. Це покращить показники LCP та користувальницький досвід.
9. Поліпшіть час відгуку сервера
На час відгуку сервера можуть впливати різні чинники. Наприклад, повільна маршрутизація, повільна логіка програми, брак ресурсів на процесорі, повільні запити до бази даних, нестача пам’яті, повільні фреймворки тощо.
Просте рішення, не пов’язане з розробкою, — перехід на якісніший хостинг. У більшості випадків це означає перехід із загального на керований. Другий зазвичай поставляється із мережами CDN та іншими прийомами доставки контенту, які позитивно впливають на швидкість сторінки.
10. Відкладений/асинхронний JS сторонніх розробників
Сторонні ресурси, такі як кнопки публікації у соціальних мережах та вбудовані відеоплеєри, сильно витрачають ресурси. Щоразу, коли браузер стикається з фрагментом JS, він припиняє виконання HTML. Це призводить до помітного зниження швидкості.
Якщо у вас є сторонні ресурси, які не впливають на зовнішній вигляд сайту та його функціональність, вони є несуттєвими. Отже, їх можна видалити з критичного шляху рендерингу. Щоб більш ефективно завантажувати сторонні ресурси, можна використовувати атрибут async або defer.
Атрибут async м’якший — він дозволяє завантажувати HTML і JS одночасно, але зупиняє HTML виконання JS. Атрибут defer більш строгий — він не зупиняє HTML для JS, виконуючи його наприкінці.
11. Попереднє підключення до сторонніх ресурсів
Встановлення з’єднань, особливо безпечних, займає багато часу. Для цього потрібні DNS-запити, SSL-рукостискання, обмін секретними ключами та деякі обхідні шляхи до кінцевого сервера, який відповідає на запит користувача.
Щоб заощадити час, можна заздалегідь підключитися до необхідних джерел. Для цього додайте до коду сторінки посилання на ці ресурси.
<link rel=”preconnect” href=”https://example.com”>
Після впровадження тега вашому сайту не потрібно буде витрачати додатковий час для встановлення з’єднання з сервером. Це підвищить швидкість завантаження.
12. Розділіть довгі завдання
Коли на сайті є фрагмент JavaScript, виконання якого займає понад 50 мс, сторінка може здатися користувачу нечутливою. Щоб вирішити цю проблему, знайдіть довгі завдання та розбийте їх на дрібніші сегменти, які завантажуватимуться асинхронно. Таким чином, процес завантаження буде поділено на короткі проміжки.
13. Попереднє завантаження ключових ресурсів
Браузери самі вирішують, які ресурси завантажувати насамперед. Зазвичай вони починають з найважливіших, таких як CSS, а не скриптів або зображень. На жаль, це не завжди найкращий варіант. Попередньо завантаживши ресурси, ви можете змінити пріоритет завантаження контенту в сучасних браузерах, повідомивши їм, що потрібно пізніше.
За допомогою тега <link rel=”preload”> ви можете повідомити браузеру, що ресурс необхідний як частина коду, відповідального за рендеринг вмісту. В результаті ресурс витягуватиметься якнайшвидше.
<link rel=”preload” as=”script” href=”script.js” />
<link rel=”preload” as=”style” href=”style.css” />
<link rel=”preload” as=”image” href=”img.png” />
<link rel=”preload” as=”video” href=”vid.webm” type=”video/webm” />
<link rel=”preload” href=”font.woff2″ as=”font” type=”font/woff2″ crossorigin />
Зауважте, що ресурс буде завантажений з тим же пріоритетом. Різниця в тому, що завантаження розпочнеться раніше.
14. Увімкніть кешування
Без кешування кожен раз, коли ви відвідуєте ту саму сторінку, всі елементи завантажується з нуля. При кешуванні частина їх зберігається у пам’яті браузера, тому із сервера завантажується інше. Під час повторного відвідування сторінка завантажується швидше, а загальні показники швидкості сторінки підвищуються.
Мета полягає в тому, щоб кешувати якнайбільше ресурсів сторінки на більш тривалий термін. Важливо переконатись, що оновлені ресурси проходять повторну перевірку для кешування. Ви можете керувати цими параметрами за допомогою спеціальних заголовків HTTP, що містять інструкції з кешування.
15. Зменшіть розмір DOM
Занадто велике дерево DOM зі складними правилами стилю може негативно вплинути на швидкість завантаження, час виконання та продуктивність пам’яті. В ідеалі дерево DOM повинно мати не більше 1500 вузлів, з максимальною глибиною 32 вузли, а батьківські вузли повинні містити не більше 60 дочірніх.
Хорошою практикою є видалення вузлів DOM, які вам не потрібні. Перегляньте, чи є вузли, які в даний момент не відображаються, видаліть їх і створіть після завантаження верхньої частини сторінок або натискання кнопки користувачем.
16. Уникайте великої кількості редиректів
Позбавлення всіх непотрібних редиректів допоможе прискорити роботу сайту. Кожне додаткове перенаправлення уповільнює рендеринг сторінки і додає один або кілька запитів HTTP і HTTP-відповідей.
Найкраще взагалі не використовувати редиректи. Якщо без них не обійтися, віддавайте перевагу 301 для постійного перенаправлення. Якщо вам потрібно перенаправляти користувачів тимчасово, 302 – найкращий варіант.
Коротко про головне
Перелічені вище проблеми – це не повний список того, що впливає на швидкість завантаження сторінки. Однак вони поширені частіше за інших та їх оптимізація дає добрі результати. Майте на увазі, що проблеми, які є на багатьох сторінках сайту, можуть бути вирішені масово.
