CSS і JavaScript, що блокують завантаження сторінки в WordPress
- 1. Скористаємося залежністю інших скриптів від jQuery
- Переміщаємо jQuery в футер сайту
- 2. Об'єднання CSS в WordPress
- Миша Рудрастих
У цій посаді буде матися на увазі, що ви знайомі з інструментом Google по оптимізації швидкості завантаження сторінок сайту - PageSpeed Insights . Слухайте, та прямо зараз вбийте туди свій сайт натисніть кнопку «Analize».
Окей, а тепер - про що цей пост?
Цілком можливо, що в результатах перевірки вашого сайту є пункт «Eliminate render-blocking JavaScript and CSS in above-the-fold content».
Я помітив, що цей пункт один з найбільш складних (трудомістких) і практично на всіх сайтах, навіть на дуже швидких, він присутній.
Як його виправити в теорії:
- Об'єднуємо все JavaScript файли і розміщуємо те, що вийшло перед закриває тегом </ body> сайту.
- Об'єднуємо все CSS, суём прямо перед JavaScript, які ми вже перемістили, потім вибираємо з них ті стилі, які необхідні для коректного відображення сторінки, а особливо її верхній частині (першого екрану) і поміщаємо їх в тег <style> в <head> сайту.
Як же йде справа на практиці, і в даному конкретному випадку - для сайтів на WordPress?
1. Скористаємося залежністю інших скриптів від jQuery
У коректно сфабрикованої темі WordPress все CSS і JS файли підключаються через wp_head () і wp_footer () - тобто в <head> і в кінці </ body> відповідно.
Також у файлів є залежності, тобто наприклад плагін fancybox.js повинен підключатися після jquery.js, а це значить, що якщо бібліотека jQuery знаходиться в wp_footer () , То FancyBox ну ніяк не може потрапити в wp_head () .
Переміщаємо jQuery в футер сайту
Робиться це дуже просто - за допомогою функцій wp_deregister_script () , wp_register_script () , wp_enqueue_script () і хука wp_enqueue_scripts (іноді використовують хук init в зв'язці з is_admin () ). Все, що потрібно від вас, це вставити код такого змісту в файл functions.php вашого сайту.
add_action ( 'wp_enqueue_scripts', 'true_peremeshhaem_jquery_v_futer'); function true_peremeshhaem_jquery_v_futer () {// знімаємо стандартну реєстрацію jQuery wp_deregister_script ( 'jquery'); // реєструємо для підключення в футере, опис параметрів - в документації функції (посилання трохи вище) wp_register_script ( 'jquery', includes_url ( '/js/jquery/jquery.js'), false, null, true); // підключаємо wp_enqueue_script ( 'jquery'); }
Хочу звернути вашу увагу на те, що це автоматизоване рішення, і хоча воно працює практично в 100% випадків, буває таке, що деякі скрипти не хочуть переноситися в футер сайту. Тоді вже буде потрібно більш уважний до кожного вашого файлу JavaScript.
На цьому наша робота з JS закінчується, звичайно приріст в швидкості дасть ще й об'єднання скриптів (тобто знімаєте їх все з реєстрації і потім просто підключаєте свою об'єднану версію) - але Google зараз це вже не вимагає.
2. Об'єднання CSS в WordPress
Якщо об'єднання всіх JavaScript в один файл - не завжди хороша ідея, то CSS-ки я б рекомендував об'єднувати по можливості завжди.
Пам'ятайте скріншот на самому початку статті (10 blocking CSS resources)? Звідки береться така кількість файлів стилів, адже розробник теми напевно розумів, що робить?
Відповідь - з плагінів.
Наприклад плагін «Contact Form 7» підключає свою власну таблицю стилів, і хоча сама по собі вона невелика, то краще все ж уникнути зайвих HTTP-запитів.
Давайте крок за кроком розберемо як.
- Копіюєте вміст таблиці стилів плагіна і вставляєте його в кінець основного файлу стилів - style.css.
- Перевіряєте, проставлені чи в даних стилях відносні посилання на зображення, наприклад url ( 'images / load.gif'). Якщо так, то або замінюєте їх на абсолютні, або переносите зображення з плагіна в папку з темою.
- Заходьте в налаштування плагіна і дивіться, чи є можливість десь зняти галочку і не підключати CSS плагіна. У «Contact Form 7» такої можливості немає, а значить ми переходимо до наступного пункту.
- Відрубуємо файли через functions.php. Для стилів «Contact Form 7» код буде наступний: add_action ( 'wp_print_styles', 'true_otkljuchaem_stili_contact_form', 100); // по ідеї ви можете використовувати і хук wp_enqueue_scripts, хоча конкретно його я не тестував function true_otkljuchaem_stili_contact_form () {wp_deregister_style ( 'contact-form-7'); // в параметрах - ID підключається файлу}
Також іноді за допомогою умовних тегів файли плагінів (як CSS, так і JS) відключають тільки з тих сторінок, на яких вони не використовується.
Ок, з «Contact Form 7» розібралися, а як дізнатися ID файлів CSS інших плагінів?
Так легко, відкриваємо вихідний код сторінки і бачимо там подібну картину:
Також є плагін, який дозволить виконати об'єднання CSS і JavaScript автоматично - JS & CSS Script Optimizer.
Якщо у вас залишилися питання, або я забув згадати про що-небудь в цій статті, будь ласка, залиште свій коментар.
Миша Рудрастих
Вперше познайомився з WordPress в 2009 році. З 2014 року мене можна зустріти на WordCamp - офіційної конфе по WordPress, іноді там виступаю. Також в даний час веду курси по WordPress в Epic Skills .
Якщо вам потрібна допомога з вашим сайтом або може навіть розробка з нуля - пишіть мені .
Окей, а тепер - про що цей пост?Звідки береться така кількість файлів стилів, адже розробник теми напевно розумів, що робить?
Ок, з «Contact Form 7» розібралися, а як дізнатися ID файлів CSS інших плагінів?