Говорити про важливість швидкості завантаження, напевно, вже не потрібно. Всі давно прийняли той факт, що для хорошого ранжирування сайт повинен швидко завантажуватися. В Інтернеті дається багато інформації про поліпшення швидкості завантаження, але найчастіше зустрічаю рекомендацію на кшталт:
Для поліпшення швидкості завантаження сайту дотримуйтесь рекомендацій з PageSpeed Insights.
І в цілому, якщо вміти працювати з цим інструментом і розуміти, що за рекомендації він дає, це дійсно допоможе побачити багато помилок. Більш того, Google отримує дані, представлені у звіті про основні інтернет-показники, зі звіту про зручність користування браузером Chrome, а браузер Chrome за замовчуванням використовує інструмент Lighthouse, яким також користується PageSpeed Insights. Тому рекомендації з PageSpeed Insights реально допомагають поліпшити швидкість завантаження і, як наслідок, поліпшити позиції сайту. До того ж низька оцінка швидкості завантаження в PageSpeed Insights вказує на проблеми не тільки з Google.
Отже, часто під низькою оцінкою швидкості завантаження ми зустрічаємо наступні рекомендації:
- Налаштувати розмір зображень.
- Відкласти завантаження зображень (використовувати lazy loading).
- Використовувати сучасні формати зображень.
- Відкласти завантаження невикористаного контенту CSS.
- Усунути ресурси, що блокують відображення.
- Задати правила ефективного використання кешу для статичних об’єктів.
І тут все вірно, ці рекомендації підійдуть для багатьох сайтів. Але іноді у звітах PageSpeed Insights ми бачимо ось пораду “усуньте ресурси, що блокують відображення…”. В ситуації, коли якісь ресурси заважають сайту добре завантажуватися, SEO-фахівець готує ТЗ програмісту з посиланням на звіт PageSpeed Insights з позначкою «виправити». Щоб програміст не витрачав час на розбір звіту, потрібно відразу поставити конкретні цілі. Тому сьогодні в статті я хочу показати, як знайти причини поганого завантаження сайту, зрозуміти, що це за скрипт, і як його виправити.
Що ускладнює завантаження сторінки?
Головний помічник у роботі з сайтом – інструменти для розробника. Щоб відкрити їх, натисніть F12. Нам знадобиться вкладка Network. Вкладка Network показує, як завантажується сторінка, які елементи завантажилися першими і т.д. Тиснемо Ctrl+F5, щоб повністю перезавантажити сторінку і подивитися, які з файлів завантажуються в першу чергу – до взаємодії користувача зі сторінкою. Далі сортуємо отримані дані через стовпець Time або Size.
Важливо! При цьому не скрольте і нічого не робимо на самій сторінці.
Перший тип сортування допоможе побачити, які елементи сторінки завантажуються найдовше. Другий тип сортування допоможе побачити, які елементи сторінки найважчі (до взаємодії користувача). Але важливо розуміти, що не завжди найбільший елемент вантажиться найдовше.
Натиснувши на елемент, що вас цікавить, можна зрозуміти, що це – тиснемо у першій колонці (Name).
Тепер, коли ми знаємо, що ускладнює швидкість завантаження сайту, розберімо приклади та способи розв’язання проблеми.
Якщо є можливість, уникаємо непотрібних скриптів
Часто, щоб поліпшити довіру користувача до сайту, ми встановлюємо різні рейтинги. Він може розміщуватися в футері або хедері сайту і підтягуватися на всі сторінки. Це все зайве. Якщо потрібно поставити гарний рейтинг, зробіть його скріншот, завантажте на сайт і поставте з нього посилання. В результаті у вас буде точно такий же рейтинг в футері, правда, оновлювати його доведеться вручну. Але з великою ймовірністю буде досить оновити його раз на місяць, щоб інформація була актуальна. Це стосується в цілому будь-якого рейтингу, якщо там немає даних, які оновлюються в режимі онлайн, і їх можна замінити. Краще прибирати віджети і, якщо можливо, ставити просто картинку з посиланням на потрібний рейтинг.
Якщо скрипт потрібен на короткий проміжок часу, не використовуйте його 360 днів в році, щоб розуміти користувачів, бачити, що можна поліпшити, щоб сайт був максимально зручним для них, ми любимо аналізувати поведінкові показники. Для чого підключаємо Вебвізор або схожі інструменти, які сильно навантажують сайт. До чого ми ведемо – якщо ви не використовуєте скрипт кожен день для аналізу, буде логічно включати інструмент тільки на час, коли заплановані роботи з аналітики поведінки користувача на сайті. Наприклад, за кілька тижнів до і відразу після закінчення робіт відключати. Це стосується багатьох скриптів, які потрібні для відстеження даних в певні проміжки, але не використовуються кожен день.
Звичайно, у вас не буде інформації за кожен день в році, але реально вона рідко коли потрібна. Якщо все ж скрипт потрібен, він повинен працювати. Якщо ви бачите, що якийсь скрипт підсвічує червоним (у колонці Name) під час аналізу швидкості завантаження сторінки, це говорить, що вказаний скрипт не працює, але при цьому продовжує «намагатися завантажитися», тим самим збільшуючи швидкість завантаження сторінки. Більш того, пошукова система буде також намагатися завантажити цей скрипт, а коли не зможе, ймовірно, вважатиме, що таким чином ви хочете від неї щось приховати. Тому, якщо скрипт потрібен, то він повинен коректно працювати, якщо ж ні – просто видаліть його.
Аналізуйте скрипти, які встановлені на всіх сторінках сайту
Ми часто використовуємо функціонал на кшталт онлайн-чату, щоб завжди бути на зв’язку з нашими клієнтами, однак подібний фактор теж може ускладнювати швидкість завантаження сторінки. Наприклад, ми бачимо, як якийсь елемент вантажиться довше 50 секунд, відкриваємо і бачимо, що це елемент чату JivoSite. Так ми розуміємо, що проблема саме в ньому, і можемо дати нормальне ТЗ програмісту, заздалегідь вказавши на слабке місце. Той, своєю чергою, вже розбереться, в чому конкретно була помилка, і виправить.
Тому коли аналізуєте швидкість завантаження сайту, звертайте увагу на скрипти, які будуть працювати на всіх сторінках сайту. При їх коректному налаштуванні у вас вийде виграти пристойно часу на загальній швидкості завантаження. Як варіант, щоб такі скрипти не заважали завантажуватися основному контенту, для них можна використовувати відкладене завантаження.
Що ще може заважати завантаженню сторінки?
Так практично кожен скрипт. Наприклад, сервіси аналітики, які стоять практично на кожному сайті. Не має значення, Google Analytics це або Метрика – обидва інструменти збільшують швидкість завантаження. Їх можна заховати в Google Tag, але, з нашого досвіду, виграти вдається крупиці часу. Тому, якщо на сайті є більш критичні проблеми, спершу потрібно вирішити їх, бо приховування цих лічильників не врятує. Також зверніть увагу на скрипти з «лайками». Подібні скрипти також збільшують швидкість завантаження сайту. Подібну ситуацію можна побачити не тільки зі скриптами «лайків», але і, наприклад, з коментарями. Грубо кажучи, це скрипти, які використовують готові рішення зі сторонніх сервісів. В такому випадку, якщо є можливість, краще реалізувати такий функціонал своїм кодом. Нехай впровадження готового рішення швидше, але свій варіант більш гнучкий в налаштуванні: можна задати потрібний час життя кешу, підвантаження в певний момент, тощо.
Підіб’ємо підсумки, щоб поліпшити швидкість, потрібно розуміти, як сайт завантажується – це можна зробити прямо в браузері. Рекомендую звертати увагу на всі елементи сторінки, які вантажаться довше 100 м/с, аналізуйте їх і, найімовірніше, без клопоту зрозумієте, які елементи заважають. А якщо будуть складності, завжди можна уточнити у програміста. Інформація, яку ви отримаєте, зробивши такий нескладний аналіз, допоможе зробити більш докладне і точне ТЗ для вашого програміста, за що він напевно скаже вам “спасибі!”. По можливості намагайтеся позбавлятися від непотрібних скриптів, подумайте, як їх замінити, щоб це не відбилося на функціоналі сайту. Ну а якщо це скрипти потрібні, то стежте, щоб вони правильно працювали.
