Як збільшити швидкість сторінки (простий посібник)
PageSpeed - це важливий елемент успіху вашого веб-сайту. Окрім того, що він є одним із відомих факторів ранжування, він також є важливою метрикою юзабіліті.
Ніхто (ані люди ані пошукові системи) не хоче витрачати свій час на очікування завантаження ваших сторінок, особливо коли є десятки інших веб-сайтів на ту саму тему, які завантажуються швидше.
Хороша новина полягає в тому, що є способи покращити швидкість сторінки, оптимізуючи інфраструктуру веб-сайту та дотримуючись найкращих практик.
У цьому посібнику ви дізнаєтесь:
- Що таке PageSpeed?
- Чому швидкість сторінки важлива для SEO?
- Яка ідеальна швидкість сторінки?
- 10 способів збільшити швидкість сторінки
- Як точно виміряти швидкість сторінки?
Що таке PageSpeed?
Швидкість сторінки - це кількість секунд, яку завантажує сторінка, поки вона не стане повністю доступною для користувачів.
Швидкість сторінки не слід плутати зі швидкістю веб-сайту. Швидкість веб-сайту - це середня швидкість вибірки сторінок того самого сайту.
Швидкість завантаження певної сторінки може відрізнятися від середньої (вона може бути повільнішою або швидшою), тому важливо індивідуально протестувати та оптимізувати швидкість всіх своїх сторінок.
Чому швидкість сторінки важлива для SEO?
Ще в квітні 2010 року Google офіційно оголосив, що швидкість сторінки є частиною алгоритму ранжування Google .
Основними причинами, які змусили їх додати швидкість сторінки як фактор ранжування, були:
Швидкі веб-сайти радують користувачів, і вони проводять більше часу на веб-сайті. Швидкі веб-сайти зменшують експлуатаційні витрати (менша пропускна здатність та краще використання серверних ресурсів) Швидкі веб-сайти приносять більше продажів (і конверсій загалом). Швидко перейдіть на сьогоднішній день, швидкість сторінок зараз важливіша, ніж будь-коли.
Статистика показує, що веб-сайти з повільним завантаженням втрачають клієнтів, оскільки переважна більшість користувачів не готові чекати більше 3 секунд, поки веб-сайт завантажиться.
Крім того, ряд досліджень показує, що існує кореляція між рейтингами Google і швидкістю сторінки. Веб-сайти, що займають перші місця в Google, завантажуються швидше, ніж веб-сайти, що з’являються в нижчих місцях.
Pagespeed - це фактор ранжування сторінок, що означає, що він впливає на кожну сторінку окремо, а не на веб-сайт в цілому. З цього можна зробити висновок, що фактор швидкості сторінки впливає на просування сайту в пошуковій системі та на поведінкові показники.
Яка ідеальна швидкість сторінки?
Неофіційно ідеальна швидкість сторінки становить менше 3 секунд як для настільних, так і для мобільних веб-сайтів. Я кажу "неофіційно", оскільки це цифра, отримана в результаті опитувань та досліджень користувачів, і це не офіційна цифра, яка використовується алгоритмами Google під час ранжирування.
Спосіб, яким Google ставиться до швидкості сторінок, полягає в класифікації сторінок на „дійсно хороші” та „досить погані”.
Це означає, що якщо веб-сайт занадто повільний, це може негативно позначитися на його рейтингу. В іншому випадку алгоритм обробляє всі веб-сайти однаково.
Як загальне правило, вам потрібно вжити всіх необхідних дій, щоб ваш веб-сайт завантажився якомога швидше.
Повільні веб-сайти мають поганий досвід роботи, а це означає, що вони втрачають гроші та клієнтів.
10 способів збільшити швидкість сторінки
Щоб покращити швидкість сторінки, дотримуйтесь найкращих практик нижче.
1. Стискайте та оптимізуйте свої зображення**
У більшості випадків веб-сторінка працює повільно через кількість та розмір зображень. Якісні зображення та інші візуальні елементи важливі для SEO та зручності, тому їх повне видалення не є можливим.
Натомість вам слід зробити спробу мінімізувати розмір їхнього файлу, не жертвуючи їх якістю.
Дотримуйтесь наведених нижче рекомендацій:
Використовуйте зображення правильного розміру - Перш ніж завантажувати зображення на свій веб-сайт, змініть його розмір до максимальної ширини, яка вам знадобиться.
Наприклад, якщо максимальна ширина показу зображень у вашому блозі становить 1200 пікселів, то завантажувати зображення, більші за це, марно.
Ви можете використовувати такі інструменти, як Photoshop , Gimp або Pixelmator, щоб відкрити зображення, змінити його розміри та експортувати у веб-зручний формат, як jpg або png.
Використовуйте оптимізатор зображень (надзвичайно важливо) - Наступним кроком є використання оптимізатора зображень. Зображення, експортовані через Photoshop або pixelmator , не повністю оптимізовані, коли йдеться про оптимальний розмір файлу.
Такі інструменти, як imageOptim (для користувачів Mac, працює дуже круто доречі) або онлайн компресор зображень, можуть значно зменшити розмір файлу зображення, не впливаючи на його якість.
Використовуйте ліниве завантаження - це техніка, коли браузери завантажують зображення на сторінку чи допис, коли це потрібно, тобто, коли користувачі прокручують сторінку вниз, а не всі зображення одночасно (це поведінка за замовчуванням).
Завдяки цьому сторінки завантажуються швидше, особливо на мобільних пристроях.
Хороша новина полягає в тому, що, якщо ви користуєтесь wordpress, існує ряд плагінів, які можуть допомогти вам у цьому, не змінюючи веб-сайт.
Наприклад, Native Lazyload - плагін WordPress від Google, який використовує власну функцію браузера. Все, що вам потрібно зробити, це встановити плагін і активувати його. Немає опцій для налаштування.
2. Оптимізуйте доставку відео
Ще одним елементом, який може значно уповільнити ваші сторінки, якщо їх оптимізувати неправильно, є відео.
Вбудовуючи відео у свій вміст, слід дотримуватися наступних найкращих практик:
Завантажуйте відео в потокову службу - Найкращий спосіб мінімізувати вплив відео на швидкість завантаження сторінки - це завантажити їх у потокову службу, тобто YouTube або Vimeo, а потім вставити на ваш веб-сайт.
Роблячи це, ваш сервер не відповідає за потокове передавання відеовмісту, але вміст надходить безпосередньо від постачальника.
Вимкнути автоматичне відтворення відео - переконайтеся, що не використовуєте автоматичне відтворення . Окрім поганої взаємодії з користувачем, це також значно уповільнює завантаження сторінки.
Використовуйте ліниве завантаження - техніку лінивого завантаження також можна застосувати до відео. Відео завантажуватиметься лише із зовнішнього джерела, коли вони перебувають у вікні перегляду користувача, а не під час завантаження сторінки.
Замініть відеорамку відео на попередній перегляд зображення - Це ще одна техніка, яку ви можете використовувати. Ви показуєте зображення попереднього перегляду користувачам в очікуванні завантаження відео.
3. Увімкніть кешування
Кешування - це механізм, який дуже допомагає зі швидкістю сторінки, і він обов’язковий для всіх веб-сайтів.
Простими словами, коли ви використовуєте кешування , сервер створює статичні HTML-версії ваших веб-сторінок і показує їх користувачам, замість того, щоб створювати сторінки спочатку кожного разу, коли виникає запит на сторінку.
Це робить процес швидшим, потрібно менше ресурсів сервера, і користувач отримує кращий досвід.
Механізм кешування досить розумний, щоб зрозуміти, коли сторінка змінюється, а коли сторінку не кешувати, тому загальний досвід роботи на веб-сайті однаковий.
Щоб увімкнути кешування на вашому веб-сайті WordPress, ви можете використовувати плагін кешування, такий як wp super cache.
Цей плагін додасть усі необхідні правила кешування до вашого файлу .htacess і навіть створять окремий кеш для мобільних користувачів та кеш для зареєстрованих користувачів.
Налаштування плагіна є простим і не вимагає технічних знань.
4. Зменшіть CSS та JS
Мініфікація - це процес, який видаляє всі непотрібні символи з файлів CSS та JS (наприклад, коментарі та пробіли), і це робить ці файли меншими за розміром.
Зменшення не змінює функціональних можливостей, але зменшує розмір файлу, а це означає швидший час завантаження.
Для нетехнічних осіб CSS та JS - це файли, що використовуються різними веб-сайтами та платформами. CSS відповідає за стиль сторінки, а JS - за функціональність.
Існує три способи увімкнення мініфікації на вашому веб-сайті:
- Перевірте, чи підтримує цей параметр ваша CMS. Зазвичай це можна знайти в розділі «Оптимізація швидкості» або додатково.
- Якщо ви працюєте на WordPress, перевірте, чи доступна ця опція в налаштуваннях теми.
- Використовуйте плагін для мініфікації, в плагінах для кешування зазвичай підтримується така функція.
5. Виключіть сценарії блокування візуалізації
Коли сторінка завантажується, браузер спробує завантажити всі ресурси, визначені в заголовку, а потім продовжить із рештою сторінки.
Ресурси заголовків можуть включати сценарій Google Analytics, піксель Facebook, сценарій Google Ads та багато інших сценаріїв, необхідних вашому веб-сайту для нормальної роботи.
Якщо якийсь із цих ресурсів не вдається швидко завантажити, це затримує завантаження сторінки.
Щоб уникнути цієї ситуації, ви можете зробити дві речі:
- Намагайтеся не додавати жодних зовнішніх ресурсів або сценаріїв (якщо це дійсно не потрібно) до заголовка веб-сайту. Хоча рекламщики будуть волати ААА нам треба швидко, але, щоб аналітика вантажилася в хеді... Треба бути до цього готовим. І пам'ятати, що ми поліпшуємо сайт для користувача в першу чергу.
- Перемістіть сценарії блокування візуалізації в нижній колонтитул веб-сайту.
6. Використовуйте сценарії асинхронно
Ще одна хитрість, яка є дуже ефективною при оптимізації швидкості сторінки, полягає в тому, щоб усі сценарії завантажувались асинхронно.
Під час завантаження сторінки браузер намагатиметься завантажити будь-який скрипт, який міститься в HTML-коді веб-сайту (у верхньому, нижньому або нижньому колонтитулі), перш ніж продовжувати рендерінг сторінки.
Це додає додатковий час до швидкості завантаження сторінки, особливо коли сценарії розміщуються на повільних серверах.
Щоб вирішити цю проблему, вам потрібно завантажувати сценарії асинхронно. Простими словами, це означає доручення браузеру продовжувати завантажувати сторінку і не чекати повного завантаження сценарію.
Це робиться за допомогою коду, додаючи команду async в тег вашого script.
7. Використовуйте кешування браузера
Кешування браузера відрізняється від "кешування сервера", про яке йшлося вище. Усі сучасні браузери використовують механізм кешування для швидшого завантаження сторінок.
Це працює просто. Коли сторінка завантажується вперше, браузери зберігають такі елементи сторінки, як зображення, файли CSS, JavaScripts на пристрої користувача.
Наступного разу, коли користувач відвідає конкретну сторінку або будь-яку іншу сторінку з того самого веб-сайту, браузер буде використовувати локально збережені ресурси (що набагато швидше), а не запитувати їх із сервера.
Результат - покращена швидкість сторінки.
Як веб-майстер, ваша робота полягає в тому, щоб через файл .htaccess веб-сайту давати вказівки браузеру про те, як часто і коли вони повинні оновлювати локальні елементи.
8. Використовуйте попереднє завантаження ресурсів
Попереднє завантаження ресурсів - це техніка, яка може підвищити ефективність вашого веб-сайту в цілому та покращити завантаження важливих сторінок.
Під час попереднього завантаження ви вказуєте браузеру завантажувати фонові ресурси або сторінки, які, як ви знаєте, будуть потрібні під час перегляду користувачем веб-сайту.
Дозвольте навести кілька прикладів того, як скористатися цим:
Попереднє завантаження сторінок: Хороші плагіни кешування мають функцію PRELOAD. Коли попереднє завантаження ввімкнено, плагін створює кеш-копії всіх сторінок веб-сайту, тому, коли користувач відвідує сторінку, це відображається швидше, оскільки обробка вже виконана.
Попереднє завантаження DNS: коли веб-сайт використовує зовнішні файли (наприклад, Google Fonts або чудові значки шрифтів), ви можете додати їх у розділі попереднього отримання DNS, і це значно пришвидшить час їх завантаження.
9. Перехід до швидшого хоста
Якщо після внесення вищевказаних змін ви все одно помічаєте, що ваш веб-сайт працює повільно, настав час подумати про зміну хостінгу.
Ваш хостинг-провайдер відіграє важливу роль у швидкості завантаження вашого веб-сайту.
Серйозні блогери або власники інтернет-бізнесу повинні використовувати VPS для розміщення своїх веб-сайтів, а не спільного хостингу.
Основна відмінність між ними полягає в тому, що спільний хостинг дешевший, але ваш веб-сайт розміщений на одному сервері з десятками інших веб-сайтів, що використовують ті самі ресурси.
Коли ви орендуєте власний віртуальний приватний сервер (VPS), ваш веб-сайт розміщується з власною IP-адресою, на віртуальному сервері, який має спеціальні ресурси.
Це означає, що ваш веб-сайт є більш безпечним, і будь-які потенційні проблеми або недоліки інших веб-сайтів не впливають на роботу вашого веб-сайту. Це дорожче, ніж спільний хостинг, але це, безумовно, того варте.
10. Оновіть PHP до останньої версії
Це дуже технічне завдання, але таке, яке може ВЕЛИЧЕЗНО змінити швидкість сторінки, навіть не вносячи жодних інших змін на ваш веб-сайт.
PHP - це мова програмування, що використовується основними системами управління вмістом (включаючи WordPress). Протягом багатьох років розробники PHP намагаються покращити його продуктивність, і новіші версії завантажуються набагато швидше, ніж старі версії.
Перевірте у свого хостинг-провайдера версію PHP, яку ви використовуєте, та проконсультуйтеся з розробником щодо того, що потрібно для оновлення вашого веб-сайту до останньої версії.
Майте на увазі, що крім покращення швидкості, версії PHP мають і інші відмінності, і перехід на новішу версію без ретельного тестування вашого веб-сайту може бути катастрофічним.
З іншого боку, якщо ви правильно зробите процедуру за допомогою програміста, весь код веб-сайту можна буде правильно перенести, і ви зможете скористатися покращенням швидкості.
Як точно виміряти швидкість сторінки?
Поки що ми вже говорили про шляхи покращення швидкості завантаження сторінки, єдиний спосіб дізнатися, чи працюють ваші зміни позитивно чи ні, - це скористатися кількома інструментами швидкості сторінки та проаналізувати результати.
Вимірювання швидкості веб-сайту до і після змін допоможе вам точно визначити, де проблема (або області, які ви покращили).
Інструменти, які ми використаємо для цього завдання:
Google Page Speed Insights
PageSpeed Insights - це безкоштовний інструмент, пропонований Google. Інструмент аналізує вміст веб-сторінки, а потім генерує пропозиції, щоб зробити цю сторінку швидшою.
Перейдіть до PageSpeed Insights і введіть своє доменне ім’я або URL-адресу певної сторінки та натисніть АНАЛІЗ.
Ви бачите швидкість роботи вашого веб-сайту як для мобільних пристроїв, так і для настільних комп’ютерів, а також ряд пропозицій від Google щодо покращення ефективності.
Кілька речей, які слід знати про звіти PageSpeed Insights:
Оцінка сторінки - це число, розраховане за даними маяка Google . Якщо ви хочете дізнатись технічні деталі, ви можете прочитати формулу тут .
Чим вищий бал ви можете отримати, тим краще.
Не очікуйте, що ви зможете отримати 100% бал, середньому веб-сайту дуже важко досягти цього.
Оцінка сторінки безпосередньо не пов’язана з рейтингом Google. Іншими словами, це не означає, що сторінки з вищим балом будуть мати рейтинг краще, ніж сторінки з нижчим балом.
Як пояснювалося вище, Google використовує інший підхід (групуючи веб-сайти у дві основні категорії), коли мова йде про швидкість сторінок та рейтинг.
Не будьте надмірно одержимі оцінкою сторінки. Що важливіше - це фактичний час, який потрібно для завантаження ваших сторінок у реальних сценаріях, а не ваш показник статистики PageSpeed.
Використовуйте оцінку PageSpeed як KPI для вимірювання ефективності змін ваших сторінок (до та після внесення змін).
Прикінцеві думки
Швидкість сторінки важлива, і це те, що вам потрібно регулярно перевіряти. Це не разове завдання. Оскільки ваш веб-сайт зростає як за вмістом, так і за обсягом трафіку, вам потрібно періодично перевіряти швидкість завантаження веб-сайту (особливо для ваших популярних сторінок) та вживати заходів, де це необхідно для його покращення.
Використання хорошого плагіна кешування допоможе вам вирішити низку проблем зі швидкістю, а якщо ви також подбаєте про розміри зображень, швидкість завантаження вашої веб-сторінки різко покращиться.
Також важливо оновлювати свою CMS та всі плагіни, оскільки нові версії, швидше за все, включатимуть покращення швидкості.