Чому ваш веб-сайт завантажується повільно (і як це виправити): 22 кроки, які я зробив, щоб отримати 100% GTmetrix PageSpeed ​​Scores та миттєві строки завантаження

Повільне завантаження веб-сайту


Майте веб-сайт з повільним завантаженням?

Що робити, якщо я сказав вам, що мій сайт завантажується <1 з 100% балами GTmetrix? І що я вже написав один із найпопулярніших посібників зі швидкістю WordPress в Інтернеті з понад 400 коментарями?

Деякі оптимізації характерні для WordPress, інші – універсальні. Але вони є найкращою практикою, навіть якщо ви використовуєте Squarespace, Shopify, Wix та інші платформи для створення веб-сайтів..

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

Contents

1. Тестуйте свій веб-сайт у GTmetrix

GTmetrix показує:

  • Час завантаження (первинний показник)
  • Котрий образи потрібно оптимізувати
  • Котрий плагіни завантажуються повільно (перевірте вкладку Водоспад)
  • Ваша час на перший байт (вказує на швидкість вашого хостингу)
  • Будь ваша плагін кеша робить свою роботу (рекомендую WP Rocket)
  • Ви використовуєте мережа доставки вмісту (Рекомендую Cloudflare)
  • Повільне завантаження зовнішні ресурси (Вкладки AdSense, Карти, YouTube / Facebook)

Швидкі виправлення?
Хостинг – це фактор №1 в офіційний посібник з оптимізації WordPress (далеко). Це може не покращити показники GTmetrix, але це може покращити час завантаження на кілька секунд, особливо якщо ви переходите від повільного хоста (Bluehost, HostGator, GoDaddy) до швидкого хоста (SiteGround, Хмарні доріжки). Ці два господарі були оцінені найвищими у 40+ опитуваннях у Facebook, які я зібрав із груп Facebook.

Плагіни кешу мають найбільший вплив на показники, а також покращують час завантаження. Ракета WP краще, ніж W3 Total Cache або WP найшвидший кеш, оскільки він має більше функцій (наприклад, ледача завантаження, очищення бази даних та оптимізація Google Font + Analytics), тоді як інші додатки кешу не.

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

Доказ є в пудингу:

2019-GTmetrix-Звіт

2. Змініть розмір великих зображень

Це те, що подавати масштабовані зображення засоби в GTmetrix.

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

Наприклад, я знаю, що вміст блогу – 680 пікселів. Будь-які зображення повної ширини, які я використовую для свого блогу, слід завжди змінювати до цих розмірів.

GTmetrix показує всі неоптимізовані зображення (і правильні розміри, на які слід змінити розмір), але лише на одній тестовій сторінці. Все, що вам потрібно зробити, це змінити розмір цих зображень і замінити стару версію на нову.

Подавати масштабовані зображення

Бонус: створити шпаргалку – записати всі різні розміри зображень на своєму веб-сайті.

  • Логотип: 200 x 58 пікселів
  • Фавікон: 16 х 16 пікселів
  • Повзунки: 1903 х 400 пікс
  • Зображення каруселі: 115 пікселів
  • Зображення віджетів: 420 x 250 пікселів
  • Рекомендовані зображення: 250 x 250 пікселів
  • Зображення в блозі повної ширини: 680px
  • Зображення Yoast Twitter OG: 1024 x 512px
  • Зображення Yoast Facebook OG: 1200 x 630px

Квадратний простір, Вікс, Теми WordPress повинні містити інструкції щодо зміни розміру зображень.

3. Стиснення зображень

Це те, що оптимізувати зображення засоби в GTmetrix.

Для цього існує багато інструментів (я використовую плагін ShortPixel WordPress). Обов’язково видалити Дані EXIF щоб зображення завантажувалося ще швидше, що також можна зробити в деяких інструментах нижче.

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

Інструменти стискання зображень

Я втрачу якість?
Навіть якщо ви вибрали стиснення без втрат, ви можете помітити невелику втрату якості. Ось чому найкраще заздалегідь протестувати кілька зображень і зробити резервну копію, якщо ви оптимізуєте всі зображення..

4. Додати кешування

Якщо ти не використовує WordPress, ваша платформа повинна піклуватися про це кешування, мінімізація, комбінування файлів та інші оптимізації в GTmetrix, для яких зазвичай потрібен плагін.

Якщо ви використовуєте WordPress, Запитайте себе:

  • Ви використовуєте плагін кеша?
  • Який плагін кеша ви використовуєте?
  • Ви налаштували його на оптимальні налаштування?

Ці 3 фактори матимуть найбільший вплив на ваші показники в GTmetrix, Google PageSpeed ​​Insights та майже будь-яких інструментах тестування швидкості. Кешування та хостинг – це дуже важливо!

Який плагін кеша найкращий?
я рекомендую Ракета WP який є плагіном преміум-кеша. Він оснащений багатьма функціями інших плагінів кеша (чистка бази даних, контроль серцебиття, ледача завантаження, оптимізація Google Fonts + Analytics, інтеграція CDN). Якщо ви хочете використовувати ці функції з іншими плагінами кешу, вам потрібно буде встановити близько 6 додаткових плагінів, щоб подбати про ці оптимізації, в той час як WP Rocket має все вбудоване. Найближчий плагін безкоштовного кешу, який робить це, є Swift.

Ракета WP також була оцінена №1 у кількох опитуваннях у Facebook:

Опитування найкращих плагінів кешу 2016 року

Опитування плагінів кешу 2019 року

Свіфт проти ракети WP

Опитування плагінів кешу 2016 року

Опитування найкращих плагінів кешу 2018 року

wp racket vs w3 totla cache

5. Оновлення до PHP 7.3

Це стосується лише, якщо ви придбали хостинг (наприклад, SiteGround, Bluehost, GoDaddy).

Оновлення до PHP 7+ дуже проста і повинна суттєво впливати на час завантаження.

Тести WordPress PHP

Крок 1: Увійдіть у свій обліковий запис хостингу та знайдіть менеджера версій PHP (або подібного).

Крок 2: Оновлення до найвищої версії PHP, доступної у вашому хостинг-акаунті (наприклад, PHP 7.3).

Крок 3: Перевірте свій веб-сайт на наявність помилок. Якщо ви бачите будь-які, можливо, це пов’язано з несумісними плагінами WordPress, і в цьому випадку ви можете використовувати PHP сумісна перевірка. Цей інструмент покаже вам несумісні плагіни; слід або видалити їх, або повернути до більш ранньої версії PHP.

Крок 4: Тримайте свою версію PHP актуальною. Якщо ваш хост випускає нову стабільну версію PHP, використовуйте його.

6. Перевірте час реакції сервера

Статистика сторінок Google говорить вам, якщо у вас є повільний часи відповіді сервера (Google рекомендує, щоб вона мала менше 200 мс). Сервери, очевидно, контролюються вашим хостингом.

Скоротити час реакції сервера

Як поліпшити час реакції сервера

  • Отримайте кращий хостинг (наприклад, Cloudways або SiteGround)
  • Тримайся подалі від Господарі EIG які ганебно повільні
  • Переконайтеся, що на вашому веб-сайті увімкнено кешування
  • Використовуйте мережу доставки вмісту, наприклад, CDN Cloudflare
  • Виключіть усі важкі та невикористані плагіни на своєму веб-сайті
  • Використовуйте преміум-провайдера DNS (отримайте це через свого хоста)

7. Виберіть правильний хостинг

Хостинг – це фактор №1 швидкості веб-сайту:

Багато навчальних посібників спробують віднести вас до Bluehost, HostGator, GoDaddy та Марки EIG.

Це всі хости низької якості, які, ймовірно, доставлять вам безліч проблем: повільний час реакції сервера, простої, застарілі версії PHP, вразливості безпеки та погана підтримка.

Проведіть своє дослідження у групах Facebook і подивіться деякі опитування, які були проведені. Ви також можете ознайомитись з людьми, які перейшли на певні хостинг-компанії та з них та опублікували їх результати.

SiteGround і Хмарні доріжки зазвичай №1 та №2 у 40+ опитуваннях у Facebook. SiteGround хороший для спільного хостингу, а Cloudways – для хмарного хостингу. Обидва хости пропонують безкоштовну міграцію веб-сайтів.

Липень 2019 року

Рекомендації щодо хостингу елементів

2017-WordPress-хостинг-FB-опитування

Опитування щодо рекомендацій щодо хостингу

WordPress-хост-опитування-серпень-2018

Спільний хостинг-опитування-2017

2019-хостинг-опитування

Компанія

WordPress-хостинг-опитування-2017

2018 Рекомендації щодо хостингу

Улюблений хостинг для елемента

2016-WordPress-хостинг-FB-опитування

WordPress хостинг опитування

WordPress хостинг опитування, вересень 2018.png

Managed-WordPress-хостинг-опитування-2017

2019-господарі-опитування-1

Хостинг-опитування для швидкості

WordPress-хостинг-опитування-червень-1

Перехід на швидший хостинг має велике значення:

Перехід на SiteGround

Міграція часу завантаження на сайт

Bluehost для SiteGround GTmetrix

HostGator To SiteGround

Інформація про Google SiteGround GoogleSpeed ​​Speed

SiteGround GoGeek Час завантаження

Скорочені терміни завантаження за допомогою веб-сайту

Нові часи реагування на сайті

Часи реагування на Cloudways

HostGator на міграцію на сайт

Час відповідей SiteGround про Joomla

Переключено на хостинг сайту

SiteGround Rocket Уявіть комбо

Інформація про SiteGround PageSpeed ​​Speed

Міграція блогів на SiteGround

Новий час відгуку на сайті

Поліпшення часу відповіді на SiteGround

Без назви

8. Додайте CDN Cloudflare

А CDN (мережа доставки вмісту) означає, що ваш веб-сайт розміщений у багатьох центрах обробки даних по всьому світу. Це зменшує значення географічна відстань між вашим сервером та відвідувачем, завантажуючи ресурси в ці центри обробки даних (полегшуючи навантаження на ваш власний сервер). Ви навіть можете використовувати кілька подібних CDN StackPath або KeyCDN що додає ще більше центрів обробки даних.

CDN-WordPress-Рекомендація

Хмара є вільним і має 200+ центрів обробки даних що значно перевищує більшість преміальних CDN.

Крок 1: Перевірте, чи дозволяє ваш хост увімкнути Cloudflare у своєму обліковому записі. Якщо вони є, активуйте Cloudflare, тоді ви закінчите. Якщо їх немає, вам потрібно буде змінити сервери імен, починаючи з кроку 2.

Крок 2: Підпишіться на Cloudflare, виберіть безкоштовний план, додайте свій веб-сайт, а потім дозвольте Cloudflare виконувати їх сканування. Cloudflare проведе вас через набір сторінок, поки вони не призначать вам 2 серверів імен.

Крок 3: Увійдіть до свого реєстратора домену та знайдіть опцію встановлення користувальницьких серверів імен (Google “власні назви імен в хостинг-компанії XYZ)”. Замініть ці сервери імен на Cloudflare.

9. Вимкнути гарячу посилання

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

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

Захист від гарячої лінії Cloudflare

10. Мінімізуйте файли

GTmetrix пропонує вам мінімізувати файли HTML, CSS та JavaScript.

Ваш плагін кешу повинен подбати про це (якщо ні, переконайтеся, що їх налаштування включені).

11. Об’єднайте файли

Якщо у вас є декілька файлів CSS або JavaScript, спробуйте об’єднати їх у один файл.

Чим менше файлів CSS та JavaScript, тим менше запитів буде завантажено на ваш веб-сайт.

Крок 1: Знайдіть свій CSS (або файли JavaScript).

Крок 2: Скопіюйте / вставте вміст, щоб вони були всі в одному файлі.

Або в більшості плагінів кешу є можливість комбінувати CSS + JavaScript:

Мінімізуйте комбінування файлів JavaScript

12. Уникайте важких плагінів

Якщо ви використовуєте плагіни WordPress, розширення Joomla або будь-які “додатки”, які додають функціональність на ваш веб-сайт, переконайтеся, що вони не додають ваших завантажувальних дій (використовуйте GTmetrix для орієнтирів).

Найпоширеніші повільні плагіни пов’язані з портфелями, повзунками, спільним доступом до соціальних мереж, розробниками сторінок, чатом у прямому ефірі, календарями, статистикою (аналітика), контактною формою або пов’язаними плагінами публікації.

Як знайти повільні плагіни на своєму веб-сайті
Якщо ви бачите, що той самий плагін відображається кілька разів у вашому звіті GTmetrix, і він має великі рази завантаження на вкладці «Водоспад», спробуйте видалити його та замінити його більш легким плагіном. Для WordPress ви також можете використовувати Монітор запитів щоб побачити ваші найповільніші плагіни для завантаження.

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

13. Очистіть свою базу даних

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

Ви можете очистити свою базу даних, використовуючи безкоштовно WP-Оптимізація плагіна, або використовувати WP Rocket:

WP-оптимізуйте чисту базу даних

14. Оптимізація зовнішніх ресурсів

Зовнішні ресурси – це все – від вбудованих відео YouTube до шрифтів Google, Google Analytics, Gravatars та будь-чого, що потребує витягу інформації із зовнішнього веб-сайту. Вони можуть знищити ваш звіт GTmetrix, особливо Google AdSense, оскільки він працює на кожній сторінці.

Поради щодо оптимізації зовнішніх ресурсів

15. Поєднайте шрифти Google

Використовуєте шрифти Google, шрифти Awesome чи інші зовнішні шрифти?

Це, ймовірно, спричинить додаткові запити в GTmetrix, оскільки вони є зовнішнім ресурсом.

Google-Fonts-GTmetrix

Поради щодо оптимізації шрифтів Google

  • Розмістіть Google Шрифти локально
  • Вибирайте лише потрібні шрифти / ваги
  • Об’єднайте кілька файлів шрифту в 1 файл (вручну або через WP Rocket або Автоматично оптимізуйте)

16. Ледачі завантаження зображень + відео

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

Вкладені відео можуть бути одним із найважчих елементів на сторінці – ліниво завантажуючи 2 відео (і замінюючи кадр попереднього перегляду), виголив цілих 4 секунди від одного з моїх публікацій.

Для WordPress можна використовувати WP Rocket, WP YouTube Lyte або плагін Lazy Load.

Для Squarespace спробуйте це Функція лінивого завантаження.

WP-Rocket-Lazy-Load

17. Уникайте реклами

Google AdSense відомий тим, що веб-сайти завантажуються повільно, і це навіть не так вигідно. Ви можете спробувати Баланс оголошення і Ракетний навантажувач, але у вашому звіті GTmetrix буде багато помилок незалежно від них, і вам краще заробити гроші за допомогою партнерського маркетингу. Забудьте про AdSense – найуспішніші люди, які заробляють $ 50 тис., Використовують партнерські посилання, які не уповільнюють ваш сайт.

GTmetrix-Реклама

18. Розгляньте AMP

AMP (прискорені сторінки для мобільних пристроїв) прискорюють завантаження мобільних сторінок, надаючи штамп AMP в результатах мобільного пошуку. Проблема полягає в тому, що це змінює дизайн ваших мобільних сторінок. Ви можете використовувати AMP для плагіна WP щоб налаштувати їх, але це просто не те саме. Конверсії Kinsta знизилися на 58% додаючи AMP, тому я фактично вирішив відключити їх на власному сайті. Але це варто подумати. Ось Підручник AMP для Squarespace якщо ви користуєтесь цим.

19. Знайдіть повільні сторінки в Google Analytics

Ви можете знайти свої найповільніші сторінки для завантаження Google Analytics під Поведінка → Швидкість сайту → Пропозиції щодо швидкості.

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

Пропозиції щодо швидкості - Google-Analytics

20. Оптимізація WordPress-специфіки

Я вже висвітлював досить багато оптимізацій для WordPress, але ось ще кілька.

  • Використовуйте плагін кеша з найвищим рейтингом, наприклад, WP Rocket
  • Використовуйте хороший плагін для оптимізації зображень, як ShortPixel
  • Використовуйте плагін Heartbeat Control, щоб вимкнути API Heartbeat
  • Видаліть усі плагіни, якими ви не користуєтесь, і використовуйте легкі плагіни
  • Часто чистіть базу даних, використовуючи WP-Optimize або WP Rocket
  • Кеш Gravatars за допомогою плагіна, як кеш-пам’ять Harrys Gravatar, FV або Optimum
  • Використовуйте диспетчер активів, щоб вибірково відключити завантаження плагінів на певних сторінках
  • Розмістіть Google Analytics локально, використовуючи плагін, наприклад WP Rocket або CAOS Analytics
  • Розмістіть Google Шрифти локально, використовуючи плагін, як OMGF або Самостійні шрифти Google

21. Оптимізація WooCommerce

За замовчуванням WooCommerce додає на ваш веб-сайт додаткові сценарії, стилі та фрагменти кошика. Вони також вимагають більше плагінів. Ось чому, вибираючи план хостингу, ви, ймовірно, хочете перейти на VPS, хмаровий або напівприсвячений хостинг, щоб переконатися, що він може працювати з додатковим споживанням ресурсів. В іншому випадку на спільному хостингу ви можете перевищити ліміти CPU вашого хоста.

Фрагменти кошика WooCommerce

Вимкнути фрагменти кошика – фрагменти кошика оновлюють товари та загальну кількість у кошику, але для завантаження вони можуть зайняти від 1 секунди до 10 секунд. Ваша найкраща ставка – це вимкнути фрагменти кошика на домашній сторінці + публікації, оскільки саме там вони не використовуються Дотримуйтесь цього підручника.

Вимкнути сценарії WooCommerce – WooCommerce також може завантажувати на ваш веб-сайт близько 8 різних сценаріїв. Щоб їх відключити, схопіть це код від Github і додайте його у файл function.php.

Вимкнути стилі WooCommerce – WooCommerce також має стилі, які завантажуються на кожну сторінку. Ось посібник щодо їх відключення.

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

Очистити сесії клієнтів – якщо ваш сайт WooCommerce повільний, спробуйте очистити сеанси роботи з клієнтами.

Збільшити ліміт пам’яті до 256 Мб – WooCommerce вимагає збільшити ліміт пам’яті до 256 МБ, але це дійсно слід зробити для більшості веб-сайтів. Ось навчальний посібник для цього.

22. Найміть когось, хто знає, що вони роблять

Потрібна допомога з виправленням вашого веб-сайту з повільним завантаженням?

Я працюю з кількома розробниками, які спеціалізуються на оптимізації швидкості WordPress. Ви можете ознайомитись із їх портфоліо на цій сторінці, і я вдячний їм за отримання своїх балів GTmetrix до 100%. Коул керує всіма проектами оптимізації швидкості, ви можете зв’язатися з ним за адресою [email protected]

23. Часті питання

&# x1f680; Які фактори найбільше впливають на час завантаження?

Вибір правильного хостингу, плагінів та кеш-плагінів може мати найбільший вплив на час завантаження. Оптимізація зображень та уникнення зовнішніх ресурсів, таких як Google AdSense, також є дуже важливими. Використання мережі безкоштовної доставки вмісту, наприклад Cloudflare, також допоможе.

&# x1f680; Який інструмент найкращий для тестування швидкості?

GTmetrix має найбільш надійні рекомендації з усіх інструментів тестування швидкості. Google PageSpeed ​​Insights в першу чергу корисний для одного – вимірювання часу відгуку сервера.

&# x1f680; Як я можу сказати, що сповільнює роботу мого веб-сайту?

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

&# x1f680; Назвіть кілька маловідомих порад щодо швидкості?

Багато людей не оновлюють свою PHP-версію або оптимізують зовнішні ресурси, такі як Google Fonts та YouTube-відео. Ледачі завантажують зображення та відео, а також локально розміщують Google Шрифти та Google Analytics, можна виправити багато елементів у GTmetrix. Ви також повинні приєднатися до груп Facebook, щоб отримати неупереджені думки про кращих хостинг-провайдерів, щоб уникнути партнерських пасток.

&# x1f680; Який хостинг найкращий?

SiteGround та Cloudways – це 2 надійних хостингових провайдера, які отримали високу оцінку в опитуваннях у Facebook. SiteGround – один із найпопулярніших хостів, що надаються спільним доступом, та Cloudways для хмарного хостингу. Зазвичай це найкращі 2 у своєму класі.

&# x1f680; Який плагін кеша найкраще?

WP Rocket оцінили плагін №1 кешу на кількох опитуваннях у Facebook, оскільки він має багато функцій оптимізації швидкості, більшість плагінів кешу не мають (ледача завантаження, очищення бази даних, розміщення Google Fonts та Google Analytics на локальному рівні). Ви повинні отримати оптимальні результати за допомогою WP Rocket, інакше Swift Performance – хороша альтернатива безкоштовного плагіна.

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

Ура,
Том

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map