Як покращити швидкість сайту, виправивши помилки Gtmetrix?

Швидкість сайту є одним із найважливіших факторів оптимізації та критеріїв SEO. Gtmetrix — один із найкращих і найпрактичніших інструментів для вимірювання швидкості сайту.

Насправді швидкість завантаження є одним із найважливіших факторів для рейтингу Google і SEO. З іншого боку, підвищення швидкості завантаження допомагає покращити «перше враження», яке ви створюєте для користувачів. Отже, підвищуючи швидкість сайту, ви оптимізуєте свій веб-сайт для пошукових систем і факторів UX.

Існує багато різних інструментів для вимірювання швидкості завантаження. GTmetrix, Google Page Speed, Pingdom, Web Page Test тощо. Можна сказати, що GTmetrix є одним із найкращих у списку. У цій статті ми поговоримо про GTmetrix, його функції та найважливіші помилки, які він показує під час тесту.

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

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

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

Що таке GTmetrix саме?

Давайте процитуємо сам GTmetrix:

GTmetrix — це один із інструментів, який ми все частіше використовуємо для отримання детальних звітів про ефективність нашого сайту. Це безкоштовний інструмент, який аналізує швидкість вашої сторінки за допомогою Google Page Speed ​​і YSlow. Потім GTmetrix генерує бали для ваших сторінок і пропонує дієві рекомендації щодо того, як їх виправити.

GTmetrix — це не лише веб-сервіс, але й плагін, і для тих, хто не хоче використовувати плагін, вони можуть скористатися його веб-версією, перейшовши на «gtmetrix.com».

Тим часом ви також можете додати інтерактивну закладку GTmetrix у свій Firefox, Chrome, Safariабо браузери Internet Explorer.

Важливість оптимізованих елементів GTmetrix (PageSpeed ​​& YSlow):

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

Дослідження показали, що користувачі не терпітимуть часу завантаження більше 4 секунд.

Якщо ваш сайт не має швидкого відгуку та швидкого завантаження, користувачі покинуть ваш сайт. З точки зору SEO Google згадує використання показника PageSpeed ​​у своєму алгоритмі рейтингу. Іншими словами, ваш веб-сайт може піднятися в рейтингу, якщо ви використовуєте елемент PageSpeed.

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

Перевірте це: Як пришвидшити продуктивність сайту WordPress. Посібник Ultimate 2020?

PageSpeed

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

YSlow

YSlow оцінює веб-сторінку на основі одного з трьох попередньо визначених наборів правил або набору правил, визначеного користувачем.

Помилки аналізу GTmetrix

Помилки підключення до мережі

Якщо ви отримуєте такі помилки:

• «Тайм-аут читання»
• «Зламана труба»
• "Підключення скинуто іншим комп'ютером"

Можуть виникнути проблеми з підключенням між нашим сервером і тестовим сервером GTmetrix.

Помилки стану сервера

GTmetrix аналізує лише сторінки, які повертають успішний код статусу HTTP. Це означає, що якщо ви отримуєте цю помилку, ваша сторінка має код статусу HTTP помилки. Найпоширеніші причини цього:

• Ваша веб-програма, яка створює сторінку, неправильно повертає код статусу HTTP про помилку, але повертає вміст сторінки, який не вказує на помилку.
• Ваша веб-програма блокує GTmetrix доступ до сторінки. У WordPress це може бути через такі плагіни, як Bad Behavior або Wordfence. У програмному забезпеченні електронної комерції доступ зазвичай блокується на основі IP-адреси.
• Ви використовуєте реверс повноваження як CloudFlare, і він блокує GTmetrix доступ до сторінки.

Помилки сертифіката SSL

GTmetrix аналізує лише HTTPS-сайти, які мають дійсний надійний сертифікат SSL. Цей тип помилок зазвичай виникає, коли проміжні/ланцюгові сертифікати встановлено неправильно.

Помилки DNS

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

Ваша сторінка завантажувалася надто довго

Максимальний час очікування GTmetrix на завантаження сторінки становить 2 хвилини. Найпоширеніші причини цієї помилки:

• Надзвичайно повільне завантаження сторінки або ресурсів
• JavaScript, який запобігає запуску події onload вікна.

URL-адреса не була HTML-сторінкою

Щоб переконатися, що ваша сторінка є сторінкою HTML, GTmetrix перевіряє заголовок Content-Type на наявність тексту/HTML, оскільки GTmetrix аналізує лише сторінки HTML.

Ви також можете отримати цю помилку, якщо заголовок Content-Type відсутній або значення порожнє. Ця проблема зазвичай виникає через веб-програму, а не сервер.

Перенаправлення JavaScript або метаоновлення

На жаль, GTmetrix наразі не обробляє сторінки, які виконують мета-оновлення або використовують JavaScript для переспрямування сторінки, і все ще не може виправити цей тип помилки.

404 помилок

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

Вимкнути фрагмент кошика WooCommerce AJAX

якщо у вас є онлайн-магазин і ви використовуєте WooCommerce, є файл Ajax, який завантажується надто довго. Повне завантаження цього файлу Ajax займає 2-3 секунди, тому його вимкнення покращить швидкість завантаження сайту. Ви можете використовувати безкоштовний плагін, щоб вирішити проблему фрагмента кошика WooCommerce.

Змініть порядок файлів CSS і Javascript у правильному порядку

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

Проблема Captcha контактної форми

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

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

Відкласти розбір javascript

Перш за все, ви повинні знати, що у нас є два варіанти відкликати файл javascript і виправити цей тип помилки.

Метод 1:

function downloadJSAtOnload() {
var element = document.createElement("script");
element.src = "java.js";
document.body.appendChild(element);
}
if (window.addEventListener)
window.addEventListener("load",
downloadJSAtOnload, false);
else if (window.attachEvent)
window.attachEvent("onload", downloadJSAtOnload);
else window.onload = downloadJSAtOnload;

Метод 2:

Мінімізуйте та поєднуйте CSS і мінімізуйте Javascript

Це означає зменшення обсягу кодів CSS і Javascript. Щоб виправити цю помилку, просто видаліть додаткові пробіли та описи.

Веб-сайт GTmetrix надає вам стиснуту версію вашого стилю або сценарію з назвою «Оптимізувати версію» перед кожним посиланням, яку ви можете спробувати замінити своїм стилем і сценарієм на своєму веб-сайті, але пам’ятайте, що перед цим завжди робіть резервну копію зі стилів і сценаріїв вашого сайту. Є деякі онлайн-інструменти або плагіни, які можуть вам допомогти.

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

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

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

Наприклад, GTmetrix сказав, що «http://…/font/calibri.woff» має зберігатися в кеші користувача.

За розширенням і адресою ви бачите, що це шрифт, який використовується для розробки веб-сайту. Досить сказати, що шрифт з розширенням .woff повинен зберігатися в кеші провідника користувача. Для цього просто скопіюйте наступний код і вставте його у файл .htaccess:

ExpiresActive On ExpiresByType font/woff "доступ плюс 1 рік" ExpiresDefault "доступ 1 місяць"

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

  
  #Стискайте HTML, CSS, JavaScript, текст, XML і шрифти 
    AddOutputFilterByType DEFLATE application/javascript AddOutputFilterByType DEFLATE application/rss+xml AddOutputFilterByType DEFLATE application/vnd.ms-fontobject AddOutputFilterByType DEFLATE application/x-font AddOutputFilterByType DEFLATE application/x-font-opentype AddOutputFilterByT ype DEFLATE application/x-font-otf AddOutputFilterByType DEFLATE application/ x-font-truetype AddOutputFilterByType DEFLATE application/x-font-ttf AddOutputFilterByType DEFLATE application/x-javascript AddOutputFilterByType DEFLATE application/xhtml+xml AddOutputFilterByType DEFLATE application/xml AddOutputFilterByType DEFLATE font/opentype AddOutputFilter ByType DEFLATE font/otf AddOutputFilterByType DEFLATE font/ttf AddOutputFilterByType DEFLATE image/svg+xml AddOutputFilterByType DEFLATE image/x-icon AddOutputFilterByType DEFLATE text/css AddOutputFilterByType DEFLATE text/html AddOutputFilterByType DEFLATE text/javascript AddOutputFilterByType DEFLATE text/plain AddOutputFilterByType DEFLATE text /xml

  # Видалити помилки браузера (потрібно лише для дуже старих браузерів)
    BrowserMatch ^Mozilla/4 gzip-only-text/html BrowserMatch ^Mozilla/4\.0[678] no-gzip BrowserMatch \bMSIE !no-gzip !gzip-only-text/html Header append Vary User-Agent


## ТЕРМІН КЕШУВАННЯ ЗАГОЛОВКУ ##
ExpiresActive On ExpiresByType image/jpg "доступ 1 рік" ExpiresByType image/jpeg "доступ 1 рік" ExpiresByType image/gif "доступ 1 рік" ExpiresByType image/png "доступ 1 рік" ExpiresByType image/svg+xml "доступ 1 місяць" ExpiresByType text/css "доступ 1 місяць" ExpiresByType application/pdf "доступ 1 місяць" ExpiresByType text/x-javascript "доступ плюс 1 місяць" ExpiresByType application/javascript "доступ плюс 1 місяць" ExpiresByType application/x-javascript "доступ плюс 1 місяць " ExpiresByType application/x-shockwave-flash "доступ 1 місяць" ExpiresByType image/x-icon "доступ 1 рік" ExpiresDefault "доступ 2 дні"

Зменшити HTML

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

або використовуйте цей режим стиснення:

Вбудований малий JavaScript

Щоб виправити це, вам краще перенести сценарії основного розділу в головний розділ веб-сайту або в кінець основного розділу. Зрештою, помістіть це у файл і посилайтеся на це посилання.

Увімкнути Keep-Alive

Це стосується підтримки файлу між сервером і провідником. Просто вставте цей код у папку htaccess вашого сайту:

Набір заголовків Connection keep-alive

Уникайте поганих запитів

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

Кількість запитів

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

Ви можете скористатися плагіном WP-Rocket або Lazy Load, щоб вирішити цю проблему. Наприклад, Lazy Load пропускає атрибути значення тегу зображень і дозволяє сайту повністю завантажитися, а потім знову розмістить атрибути значень зображень у попередньому порядку. Завдяки цьому кількість запитів під час завантаження буде зменшена, а ваш коефіцієнт «Час до першого байта» покращиться.

Це плагіни, які ви можете придбати Deep тема зі знижкою 20%, а їх посібник було повністю пояснено в Deep тематична документація.

Вкажіть розміри зображення

Це означає вказати значення ширини та висоти зображень на нашому веб-сайті. Краще вказувати значення для наших зображень не лише через CSS, а й у HTML, як показано нижче:

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

Прості способи збільшити швидкість сторінки

1. Плагіни

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

2. Образи

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

3. Ведучий

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

4. Файли JS і CSS

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

Наші пропозиції щодо збільшення швидкості завантаження вашого сайту:

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

• Використання WP-Rocket (платно)
• Використання безкоштовного плагіна

A. Використання плагіна WP-Rocket (рекомендовано)

1. Отримайте резервну копію

Перш за все ми отримуємо резервну копію файлів, які можуть змінитися. Такі файли, як зображення та основні файли теми. Для цього перейдіть на панель хосту в wp-content/uploads/ і отримайте резервну копію згаданих файлів. Також отримайте резервну копію з папки теми та назвіть її before-minify.zip у каталозі: wp-content/themes/deep

2. Придбайте та встановіть WP Rocket

Deep співпрацює з WP Rocket, і ми виділили для вас 20% знижку (промо-код). Ви можете використати цей код знижки для придбання WP Rocket Plugin. Перейдіть за цією адресою: Інформаційна панель WordPress > Deep > Продуктивність

Примітка: усі параметри плагіна кешу (wp-rocket), такі як HTML, CSS Minify, JS Minify, CDN, Cache та Minify, а також усе, що стосується плагіна, слід дезактивувати, оскільки плагін свіжий.

3. Оптимізація файлів

Перейдіть до налаштувань плагіна та на вкладці "Оптимізація файлів" увімкніть усі 3 параметри для основних налаштувань. Як на зображенні нижче:

4. Очистити кеш

Ви повинні очистити кеш на вкладці «Інформаційна панель».

5. Отримайте вміст CSS

Відкрийте сайт у гостьовому режимі браузера, потім натисніть CTRL + U, щоб відобразити джерело сайту. Над HTML є файл CSS, створений WP-Rocket, натисніть і відкрийте файл.

Відкрийте вміст зазначеного вище файлу та скопіюйте його, а потім помістіть на вкладку «Оптимізація файлів» у «Оптимізуйте доставку CSS». Ви повинні позначити цю опцію, щоб відобразити її.

Важливо: Ви не повинні використовувати @import у CSS, оскільки запит буде надіслано на інший сайт і час завантаження збільшиться. @import має URL-адресу, яку ви повинні відкрити, скопіювати її вміст і помістити в оптимізовану доставку CSS, а потім видалити @import разом із URL-адресою.

Тепер очистіть кеш і перевірте сайт у гостьовому режимі браузера та переконайтеся, що все акуратно. Примітка: Порушення CSS трапляється, коли в CSS є відкритий коментар, але він не закритий. Це могло бути спричинено плагіном, який, дезактивувавши плагіни один за одним, можна дізнатися, який плагін спричиняє проблему.

6. Файли Javascript

Перейдіть на вкладку «Оптимізація файлів» і вимкніть усі параметри у «Файлах JavaScript», як показано на зображенні нижче:

7. LazyLoad

Щоб використовувати LazyLoad для зображення, перейдіть на вкладку «Медіа» та налаштуйте її параметри, як на зображенні нижче:

8. CDN

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

B. Використання безкоштовних плагінів

1 Завантажте та встановіть Autoptimize

Будь ласка, перейдіть до свого адміністратора WordPress > меню Налаштування > Автооптимізація. Потім натисніть «Показати розширені налаштування» та дійте так само, як у цьому прикладі для налаштувань:

2 Завантажте та встановіть LazyLoad від WP Rocket

Адміністратор WordPress > Налаштування > LazyLoad і ввімкніть відкладене завантаження для ваших зображень і відео.

3 Завантажте та встановіть Увімкнути стиснення Gzip

В. Перейдіть до адміністратора WordPress > Налаштування > стиснення gzip і ввімкніть стиснення Gzip

4 Завантажте та встановіть WP Super Cache

A. Перейдіть до адміністратора WordPress > Налаштування > WP Super Cache і ввімкніть параметр кешу

5. Революція слайдера

Якщо ви використовуєте плагіни Slider Revolution, будь ласка, перейдіть до глобальних налаштувань і дійте так само, як у цьому прикладі для налаштувань:

Громадські пропозиції

Виправити помилку 404

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

Ми використовуємо Плагін WP Smush оптимізувати зображення. Якщо ви бачите, що на веб-сайті GTMetrix у вкладці «Водаспад» зображення довго завантажується, вам слід скористатися таким рішенням: ми використовуємо безкоштовні інструменти, надані веб-сайтом http://compressjpeg.com/, щоб оптимізувати зображення.

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

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

Вимкнути фрагменти кошика WooCommerce AJAX

Файл AJAX WooCommerce займає багато часу для завантаження сайту, і щоб вимкнути цей AJAX, вам слід скористатися плагіном Disable Cart Fragments. Ви можете завантажити плагін тут

Якщо ви використовуєте Polylang Plugin разом із WP Rocket, установіть wp-rocket-cache-плагін donotchangepage також.
Якщо ви бачите Refill, пов’язану з плагіном Contact Form 7 у GTMetrix на вкладці Waterfall, перейдіть за такою адресою:
/wp-content/plugins/contact-form-7/includes/controller.php :: Рядок :: 69 – 71
І прокоментуйте (відключіть) його код:

/* if ( defined( 'WP_CACHE' ) && WP_CACHE ) { $wpcf7['cached'] = 1; } */

ми ставимо між /**/, щоб вимкнути його.
– Пам’ятайте, що вам потрібно очищати кеш плагіна після кожного виконаного завдання.
Зрештою, завжди пам’ятайте, що після оновлення сайту, яке включає додавання нових зображень, враховуйте те, що пояснено вище для них.
Після оновлення плагінів ваші зміни буде скасовано, і після кожного оновлення вам доведеться повторювати ці кроки. Наприклад, плагін Contact Form 7.