Швидкість завантаження сторінки сайту і як її перевірити

1. Google PageSpeed ​​Insights - перевірка швидкості завантаження сторінки сайту
2. Сервіси для аналізу швидкості завантаження сайту
3. Як поліпшити швидкість завантаження сторінок сайту
4. оптимізація зображень
5. Скорочення час відповіді сервера
6. Використовуйте кешування сторінок сайту

Зміст статті

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

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

Розберемо найпопулярніший сервіс для аналізу швидкості завантаження сторінок сайту.

Google PageSpeed ​​Insights - перевірка швидкості завантаження сторінки сайту

Google PageSpeed Insights - це сервіс для аналізу швидкості завантаження сторінки посередництвом внутрішніх інструментів Google. Показник аналізу досить точний і багато оптимізаторів звертаються саме до цього сервісу в першу чергу.

Для аналізу сайту перейдіть за посиланням - https://developers.google.com/speed/pagespeed/insights/

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

Google PageSpeed ​​дуже корисний тим, що крім власне аналізу в ньому наводяться рекомендації щодо збільшення швидкості завантаження сайту.

Рекомендації зазвичай у всіх стандартні:

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

• Видаліть код JavaScript і CSS, який блокує відображення верхньої частини сторінки

• Використовуйте кеш браузера

• скоротіть CSS

• Оптимізуйте зображення - це зазвичай сильно підвищує показник по PageSpeed ​​Insights

• скоротіть JavaScript

• Увімкніть стиснення

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

Ваша мета потрапити в зелену зону - це показник від 90 до 100, але якщо сайт хоча б у помаранчевій зоні - вже добре. Якщо ж сайт в червоній зоні, то варто терміново зайнятися його прискоренням.

Крім сервісу від Google для аналізу швидкості завантаження сторінок, є ще деякі сервіси, але вони вже швидше на любителя. Частина з них є похідною від першого і працюють на основі його api.

Сервіси для аналізу швидкості завантаження сайту

Даний список є додатковим і я рекомендую використовувати саме інструмент від Google тому його показники будуть максимально близькими до реальної картини, ні і рекомендації правильні.

Кожен сервіс по своєму цікавий, і показують вони різних показники. Більшість показують саме скільки завантаження сторінки в секундах і розмір документа в кілобайтах. Тільки сервіси PageSpeed ​​Insights і GTMetrix показують усереднене процентне співвідношення, що дуже зручно.

Як поліпшити швидкість завантаження сторінок сайту

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

оптимізація зображень

Перевірте, а не важать чи картинки сайту на слайдері головної сторінки або в інших блоках по кілька мегабайт - і таке буває!

Я на практиці стикався з таким - розробники або власники сайту в подальшому, завантажували на сайт картинки прямо з фотоапарата і уявляєте скільки вони важать ?!

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

По-перше підганяю розмір зображення під потрібний мені на сайті. Немає сенсу в зображенні 2000 пікселів по ширині, якщо вона буде стиснута на сайті до 800 пікселів.

Також зверніть увагу на дозвіл зображення. Якщо фото безпосередньо з фотоапарата, то цей показник швидше за все 300 dpi і можна сміливо його зменшувати до 72 dpi - цього більш ніж достатньо для сайту.

В фотошопі я зберігаю картинку в режимі "Зберегти для Web" - це також плюс оптимізації зображення.

Скорочення час відповіді сервера

Як правило вся причина довго відповіді сервера саме в самому хостингу. Більшість проектів використовують звичайний шаред хостинг і чекають від нього супер продуктивності. Цього не буде.

Навіть якщо Ви дивіться в бік зміни хостингу, вибирайте той, що хоча б працює на SSD дисках - це вже великий плюс до швидкості буде. Я спочатку для клієнта, а потім і сам перебрався на fornex.com

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

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

Використовуйте кешування сторінок сайту

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

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

Якщо Ваш сайт зроблений на wordpress, то найкращим рішенням буде плагін WP Fastest Cache , Але будьте обережні - плагін може конфліктувати з деякими скриптами. Наприклад, недавно почав сильно тупити слайдер на сайті клієнта, виявилося що саме цей плагін перестарався з кешуванням. Але в цілому такі випадки одиниці і можете спробувати на своєму проекті.

На цьому мабуть все. Швидких сайтів всім моїм читачам!

Поділіться статтею з друзями