Привіт усім. Просто про маркетинг на зв'язку. В цьому відео поговоримо про швидкість, про швидкість завантаження веб-сторінки. Чому це так важливо в 2020 році? Яка швидкість оптимальна? І як прискорити завантаження сторінки? Поїхали.
В липня 2018 році Google змінює роботу пошукових алгоритмів. Це оновлення отримало назву Speed Update. І з цього моменту швидкість завантаження сторінки стає одним із факторів ранжування. Простими слова: швидкість завантаження вашого сайту впливає на його місце в пошуковій видачі.
В тому ж 2018 році окрім оновлення Speed Update, Google змінив спосіб індексування веб-сторінок під назвою mobile first index. Тепер рейтинг веб-сторінок формується на основі даних, які пошукова система отримує лише з мобільних версій. Ті ресурси, які не мають адаптивної або мобільної версії, автоматично втрачають позиції в пошуковій видачі. І хтось скаже: "не справедливо!".
Насправді це не так. Якщо поглянути на динаміку мобільного трафіку за останні 10 років, все стає зрозуміло. В 2009 році мобільні гаджети генерували меньше 1% всього інтернет-трафіку. В 2018 році - 52%, а вже в 2020 доля мобільного трафіку досягає відмітки 60-70%.
Швидкість завантаження сторінки також впливає на поведінку відвідувачів. Якщо вірити дослідженням компанії Forrester Consulting 40% користувачів покидають сайт, якщо він завантажується більше 3 секунд.
Поведінка відвідувачів - це ще один фактор, який використовує Google для визначення рейтингу веб-сторінок.
Пошукова система аналізує дії відвідувачів на сторінці видачі по відношенню до сайту і (CTR) дії на самому сайті (тривалість сеансу, показник відмов, глибина перегляду (скрол), кількість сторінок за сеанс)
Яка швидкість завантаження сторінки оптимальна?
Спершу, розберемося, які метрики характеризують швидкість завантаження. І так...
Перше відображення вмісту (First Contentful Paint, FCP) - це час від моменту переходу на сайт до моменту, коли браузер відображає перший біт контенту. Для користувача це сигнал, що сайт починає завантажуватися.
Перше значне відображення (First Meaningful Paint, FMP) - це час від початку завантаження сторінки до моменту, коли користувач бачить достатньо контенту, щоб почати взаємодіяти з ним.
Індекс швидкості (Speed Index) - це час, за який відображається видима частина веб-сторінки. Оптимальна швидкість завантаження веб-сторінки - 2–3 секунди.
Pagespeed insights дозволяє перевірити швидкість будь-якої веб-сторінки в розрізі 3-х метрик про які я раніше говорив. Ще один сервіс для перевірки швидкості - це testmysite. Сервіси безкоштовні.
Тепер якщо придивитися до результатів, то ми побачимо різні значення. І вас виникне питання: “Кому вірити?”. Якщо сайт інформативний, громіздкий - вам буде важко досягти оптимальної швидкості (розетка). В іншому випадку - досягайте оптимальних значень по всім метрикам. А як цього досягнути, я розповім в наступному відео.
Спершу познайомимося з двома термінами, які нам багато чого прояснять: Це пінг і рендеринг.
Пінг - це час відгуку веб-сервера на запит браузера. Чим більший ping, тим довше веб-сторінка буде завантажуватися. Пінг залежить від швидкості інтернету та від чутливості веб-сервера. На швидкість інтернет-з’єднань ми не можемо вплинути. А от на роботу веб-сервера - ще як можемо.
Веб-сервер такий нечутливий до браузера.
Чутливість показує наскільки швидко налагоджується зв'язок між браузером і веб-сервером (TTFB). І є 2 фактори, які впливають на чутливість веб-сервера. Це географічне положення та здатність сервера одночасно опрацьовувати велику кількість запитів.
Якщо веб-сервер знаходиться на значній відстань від браузера користувача - уповільнення швидкості завантаження буде істотним, адже дані будуть долати великий шлях з багатьма вузлами. Тому веб-сервер має розміщуватися в тій самій локації, що й цільова аудиторія сайту.
А що робити, якщо ми хочемо отримувати трафік на сайт з різних країн? В такій ситуації є 2 рішення:
1-ше - це CDN-мережа, що складаються з серверів в різних країнах на яких створюються копії файлів веб-сайту. Коли подається запит з браузера, контент завантажується з найблищого сервера.
2-ше - AMP - це технологія, яку використовує Google, що дозволяє створювати прискорені мобільні версії сторінок. AMP-сторінки Google зберігає на власних серверах і коли користувач робить перехід з сторінки результатів пошуку, браузер завантажує дані сторінки з CDN-мережі Google. Ця технологія дозволяє збільшити швидкість завантаження сторінки в рази.
І 2-й фактор, який впливає на пінг - здатність сервера одночасно опрацьовувати велику кількість запитів. Якщо ви, в цілях економії, замовили дешевий хостинг, або обрали мінімальні параметри продуктивності сервера - ви отримаєте затримку обробки запитів.
А щоб цього уникнути, використовуйте спеціальні сервіси loadimpact.com, WebPageTest.org для тестування веб-серверу та не економте на хостингу. В наступному відео поговоримо про рендеринг і як покращити швидкість веб-сторінки на цьому етапі.
Перед тим, як користувач побачить на екрані веб-сторінку, браузер проробляє великий кусок роботи. Він опрацьовує дані отримані від веб-сервера і перетворює їх в цілісну сторінку із зрозумілим для людини виглядом. Цей процес називається рендерингом. Для прикладу. В такому вигляді браузер отримує дані від веб-сервера, а вже в такому вигляді ми бачимо веб-сторінку.
Для візуалізації сторінки браузер опрацьовує файли з розміткою, стилями і скриптами. З розмітки браузер отримує інформацію про елементи веб-сторінки, їхній порядок та зміст. Стилі описують зовнішній вигляд елементів, а скрипти відповідають за інтерактивність. Інтерактивність - це здатність веб-сторінки реагувати на дії користувача.
Підключення браузера до файлу розмітки є першим кроком рендерингу. Спеціальні теги "head" і "body" розділяють веб-сторінку на видиму і невидиму частини. Усі елементи, які доступні користувачеві на сторінці розміщуються у видимій частині. А дані, які призначені тільки браузерам і пошуковим системам розміщується в невидимій. Ці дані користувач не бачить. Крім цього, в невидимій частині виконується підключення скриптів та CSS-стилів.
Браузер повинен опрацювати усі дані з невидимої частини, перш ніж він почне відображати будь-який візуальний контент. І поки браузер не виконає ці кроки, користувачі будуть бачити пусту білу сторінку. Взаємодія користувача із білим екраном називається пасивним очікуванням.
Як не змушувати користувачів сайту очікувати?
Коли браузер доходить до тегу "script" він зупиняється, щоб завантажити контент файлу і виконати його код, і тільки після цього продовжує далі рендирити сторінку. Скрипти блокують візуалізацію контенту і збільшують час пасивного очікування. Тому необхідно усі скрипти, які не беруть участь у візуалізації першого екрану перемістити вниз файлу HTML-документу. До важливих скриптів (які беруть участь у візуалізації першого екрану + скрипт аналітики) необхідно застосувати атрибут async, який повідомляє браузеру, що скрипт може бути виконаний асинхронно.
В такому випадку браузеру немає необхідності зупинятися, коли він досягає тега "script" для завантаження і виконання. Скрипт буде виконуватися паралельно з розбором HTML-документа.
Для файлів, які тривалий час не будуть змінюватися потрібно налаштувати правила браузерного кешування. Таким чином, статичні ресурси будуть завантажуватися з сервера тільки при першому візиті користувача на сторінку. При повторних візитах браузер буде використовувати локальну копію цих файлів.
Щоб прискорити завантаження необхідно зменшити вагу усіх файлів веб-сторінки. Для цього потрібно налаштувати на веб-сервері утиліти стиснення gzip або brotli, що дозволяють обсяг переданих даних зменшиться в 4-5 разів.
Ще один спосіб зменшення ваги веб-сторінки - це оптимізація зображень. Сюди можна включити: правильний вибір формату, оптимізація щільності пікселів, ресайз розмірів зображень під елементи веб-сторінки, налаштування асинхронного завантаження зображень.
