1. Вступ Швидкість сайту - це один з найважливіших факторів, який допомагає залучити й утримати відвідувачів....
2. Що вам знадобиться
3. Виправляємо Видаліть код JavaScript і CSS, який блокує відображення верхньої частини сторінки
4. Крок 1 - Використання Google PageSpeed ​​Insights для пошуку коду JavaScript і CSS, що блокує відображення...
5. Крок 2 - Виправлення Видаліть код JavaScript і CSS
6. Варіант 2 - Використання Autoptimize
7. Варіант 3 - Використання Speed ​​Booster Pack
8. висновок

Вступ

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

Звичайно, оцінити швидкість вашого сайту може здатися трохи складним. Є багато факторів, які можуть вплинути на результат - швидкість інтернет з'єднання, географічне положення і т.д. Однак не варто переживати, в цій нелегкій справі вам може допомогти Google's PageSpeed ​​Insights . Це безкоштовний сервіс від Google, який дає оцінку сайту на основі його швидкості завантаження. В ідеалі, ви повинні спробувати дістати найвищу оцінку на PageSpeed. І якщо ви вже скористалися даними онлайн інструментом, значить ви могли зіткнутися з досить відомої рекомендацією щодо оптимізації швидкості завантаження сайту Видаліть код JavaScript і CSS, який блокує відображення верхньої частини сторінки.

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

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

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

Однак Видаліть код JavaScript і CSS, відноситься до тих скриптів, які впливають на відгук сторінки, але не використовуються у вмісті верхній частині сторінки (ATF). Вміст ATF - це частина сторінки, яку видно користувачеві коли сторінка завантажується; будь-яка частина сторінки для перегляду якої необхідно прокрутити сайт вниз не є ATF. Тому Google цією рекомендацією, говорить вам про те, що у вас на сторінці присутні JS і CSS скрипти, які без потреби уповільнюють завантаження сайту, так як частина сторінки на яку вони впливають ще не видно користувачеві.

В цьому керівництві по WordPress , Ми скористаємося Google PageSpeed ​​Insights для виявлення скриптів блокуючих відображення. Потім ми покажемо вам 3 способи, як виправити цю проблему на WordPress. На додаток до цього, ви також повинні поглянути на інші способи збільшити швидкість завантаження сайту на WordPress , Щоб отримати помітний результат.

Що вам знадобиться

Перед тим, як ви почнете це керівництво, вам знадобиться наступне:

• Доступ до панелі управління WordPress

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

JS і CSS є важливими складовими будь-якого сучасного сайту не тільки для його роботи, але і для його зовнішнього вигляду. Однак тут є один нюанс - продуктивність. Незважаючи на те, що ви можете вжити деяких заходів, зразок включення відкладення завантаження JavaScript , Іноді цього може виявитися недостатньо. Ми звичайно ж говоримо про рекомендації видаліть код JavaScript і CSS, який блокує відображення верхньої частини сторінки. Щоб виправити цю помилку, ми повинні дізнатися чи існує дана проблема на вашому сайті взагалі. Після того, як ми підтвердимо наявність, ми зможемо приступити безпосередньо до її усунення.

Крок 1 - Використання Google PageSpeed ​​Insights для пошуку коду JavaScript і CSS, що блокує відображення верхньої частини сторінки

Перший крок для вирішення даної проблеми, це перевірка вашого сайту за допомогою Google PageSpeed ​​Insights. просто відвідайте дану сторінку і введіть в поле адресу вашого сайту. Натисніть кнопку Аналізувати для отримання звіту про сайті. Більшість сайтів мають оцінку від 50 до 70; це повинно стати орієнтиром вашої оцінки. Крім оцінки, Google надасть список з рекомендаціями щодо поліпшення швидкості завантаження сайту.

Щоб показати, як виправити помилку Видаліть код JavaScript і CSS, ми скористаємося цим сайтом. На скріншоті вище ви можете побачити, що на даний момент він містить пару скриптів блокуючих відображення.

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

Важлива річ на яку необхідно звернути увагу - вашим завданням не повинно стати отримання 100 балів на PageSpeed ​​Insights. Швидше, їй повинно стати прагнення отримати хорошу оцінку без шкоди функціоналу та дизайну сайту. Якщо на вашому сайті є скрипти необхідні для роботи robust UX, ви не повинні видаляти їх просто для того, щоб отримати високі оцінки на PageSpeed ​​Insights. Правила за якими Google оцінює сайти є лише рекомендаціями і повинні бути сприйняті саме так.

Крок 2 - Виправлення Видаліть код JavaScript і CSS

Варіант 1 - Використання W3 Total Cache

Тепер, коли ви знаєте про наявність коду, що блокує відображення сторінки, у вас є кілька варіантів його виправлення. Ми рекомендуємо завантажити плагін, який допоможе вам легко розібратися з цією проблемою. Один з наших улюблених плагінів це W3 Total Cache . Встановіть і активуйте його . Далі, дотримуйтесь цих вказівок:

1. Перейдіть у вкладку Performance → General Settings. Знайдіть Minify в списку у верхній частині сторінки.
2. Ви побачите кілька варіантів під цим заголовком. Перший під назвою Minify; поставте галочку Enable навпроти нього.
3. В налаштуваннях Minify mode, виберіть Manual та натисніть на кнопку Save all settings.

1. На даному етапі ви повинні визначити всі JS і CSS скрипти, які викликають блокування відображення. Ви можете знайти ці скрипти за допомогою Google PageSpeed ​​Insights. Якщо ви залишили вкладку з PageSpeed відкритою, як рекомендувалося в Кроці 1, ви знайдете напис Як виправити? під відповідною рекомендацією. Натисніть на неї. Це відкриє список з усіма скриптами і таблицями стилів, які викликають появу помилки Видаліть код JavaScript і CSS, який блокує відображення верхньої частини сторінки.
2. Поверніться в WordPress. Перейдіть у вкладку Performance → Minify. Вам необхідно буде оптимізувати і JS, і CSS файли окремо.
3. По-перше, давайте почнемо з JS. На сторінці знайдіть заголовок JS, далі ви побачите розділ Operations in areas. Тут виберіть Non-blocking using defer як embed типу перед тегом <head>.

1. Потім, під підзаголовком JS file management, виберіть активну тему і натисніть кнопку Add Script. Тепер просто скопіюйте адреси JS скриптів зі сторінки PageSpeed ​​і вставте їх один за одним. Це завершить виправлення JS файлів.

1. Переходимо до CSS. Прокрутіть ту ж сторінку і знайдіть розділ CSS. Під підзаголовком CSS file management, виберіть вашу активну тему і натисніть Add a style sheet. Також як і для JS скриптів, скопіюйте та вставте CSS таблиці стилів зі сторінки PageSpeed ​​Insights.

1. Нарешті, натисніть кнопку Save settings and purge cache.

Тепер поверніться на сторінку Google PageSpeed ​​Insights для перевірки виправлення помилки. На скріншоті нижче ви можете побачити, що настройка W3 Total Cache допомогла вирішити проблему Видаліть код JavaScript і CSS, який блокує відображення верхньої частини сторінки з нашого тестового сайту.

Якщо ви хочете ще більше контролю над вашим ATF вмістом, скористайтеся плагінів Above The Fold Optimization . Цей плагін розроблений спеціально для ATF вмісту і сумісний з іншими популярними плагінами, начебто W3 Total Cache і Autoptimize.

Варіант 2 - Використання Autoptimize

Порівняно простий метод для вирішення проблеми блокуючого коду, це використання плагіна під назвою Autoptimize . Скачайте і встановіть плагін, що не повинно зайняти багато часу. Після цього перейдіть у вкладку Налаштування → Autoptimize. Тут, виставте галочки навпроти Оптимізувати код JavaScript? і Оптимізувати код CSS? , І натисніть кнопку Зберегти зміни і очистити кеш.

У більшості випадків цього достатньо, щоб виправити блокуючий код (залежить від теми і активних плагінів). Щоб дізнатися є це вашим випадком, запустіть перевірку вашого сайту в PageSpeed ​​Insights знову.

Як ви можете помітити з скріншоту зверху, Autoptimize залишив 1 блокуючий ресурс CSS.

Якщо ви хочете повністю закінчити оптимізацію, поверніться до Налаштування → Autoptimize. Натисніть кнопку Show Advanced Settings. Далі, виставте галочки навпроти опцій Also aggregate inline JS і Also aggregate inline CSS. Закінчите натиснувши на кнопку Зберегти зміни і очистити кеш. Щоб перевірити результат, знову запустіть перевірку PageSpeed ​​Insights.

Варіант 3 - Використання Speed ​​Booster Pack

Ще один популярний плагін, який може допомогти вам вирішити проблему Видаліть код JavaScript і CSS, який блокує відображення верхньої частини сторінки на WordPress сайті - це Speed ​​Booster Pack . Скачайте і активуйте плагін . Його налаштування ви зможете знайти в розділі Налаштування → Speed Booster Pack в панелі управління WordPress.

Для JS скриптів вам необхідно включити Move scripts to the footer і Defer parsing of JavaScript files.

Для CSS перейдіть в меню Still need more speed? . Тут ви знайдете додаткові настройки відносяться до CSS оптимізації.

Ви можете поекспериментувати з цими настройками, щоб знайти баланс - включення всіх опцій може призвести до Flash of unstyled content (FOUC). Це трапляється в тому випадку, якщо браузер завантажує сторінку без очікування завантаження таблиці стилів, викликаючи відключення всіх стилів на сторінці. Тепер залишилося лише знову перевірити сайт на наявність проблеми.

висновок

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

Пам'ятайте, робота над збільшенням швидкості завантаження веб-сайт не повинна завдавати шкоди його функціоналу. Тому не хвилюйтеся, якщо у вас ще залишився будь-якої з блокуючих кодів. Це керівництво було для вас корисним? У нас є безліч інших на hostinger.ru/rukovodstva .