Разбиране на WordPress CSS
Преди да се потопим, нека разберем как работи обикновеният CSS в WordPress.
Всяка тема на WordPress се състои от style.css, който съдържа целия код, необходим за стилизиране на вашия сайт. Разработчиците на теми трябва да поддържат всички функции на WordPress, които включват публикации в блогове, коментари, страница с продукти, страница за членство, формуляри и т.н. Други плъгини, които инсталирате, също могат да добавят подобни css таблици със стилове.
Това може да направи css файловете раздути и големи с размер от 200 kb или дори повече.
Какво е Critical Path CSS?
С нарастването на вашите CSS файлове вашият браузър трябва да изтегли тези големи файлове, да ги анализира и да ги изобрази. Известно също като блокиране на изобразяване. Той също така ще увеличи първото смислено изобразяване и първото смислено изобразяване.
Critical Path CSS е CSS, необходим за изобразяване на горното съдържание на всяка уеб страница. Както подсказва името, "критичен" CSS, който помага на браузъра бързо да го нарисува и изобрази, преди да зареди пълни CSS файлове.
Обикновено css на критичния път е вграден в заглавката и изходният css файл се зарежда асинхронно или в долния колонтитул за по-лесно използване.
Защо Critical Path CSS е толкова важен?
Сигурно вече сте виждали предупреждение от инструменти като Google PageSpeed Insights или GTmetrix, което казва „оптимизиране на доставката на css“ или „отлагане на неизползвания css“.
Критичният CSS няма нищо общо с времето за зареждане на страницата. Не увеличава/намалява времето за зареждане. Но дава много по-добро потребителско изживяване. Помага за бързото „изобразяване“ или „оцветяване“ на уеб страница.
- Подобрява първото изтегляне на съдържание (FCP)
- Подобрява първото значително плащане (FMP)
- Премахнете неизползвания CSS (технически не го премахвайте, но приоритизирайте „полезния“ CSS)
Ето две екранни снимки на моя блог със и без критичен CSS.
Както можете да видите в секцията „без критичен css път“, отне почти 5 секунди, за да покаже на потребителя нещо полезно на мобилно устройство. Браузърът трябва да направи допълнителна HTTP заявка към css файла, да го изтегли, да го анализира, за да започне да рендерира. Но когато използвате критичен css, всички необходими css трябва да са вградени и браузърът може да започне да изобразява веднага след зареждане на HTML файла за секунда или по-малко.
Как да създадете критичен CSS в WordPress?
Има няколко начина за генериране на критичен CSS в WordPress.
Използване на плъгини за кеширане
WP Rocket е първокласен плъгин за кеширане, който работи много добре.
Една от причините да използвам WP Rocket на всеки сайт е самото критично поколение CSS. Те генерират Critical CSS отделно за начална страница, страница с публикации, страница с категория, страница с продукти и т.н. и го вграждат. Те ще възстановят критичния CSS, ако има промени в темата или настройката.
Всичко може да се направи с натискането на един бутон.
Други плъгини за кеширане, които могат да генерират критичен CSS
Swift Performance и LiteSpeed (изисква LiteSpeed/OpenLiteSpeed сървър) са подобни плъгини, които могат да генерират критичен CSS. И двата плъгина имат вграден облак и пълен кеш в сървърите си.
Използване на Autoptimize + Free Critical CSS Generator
Има онлайн инструменти на трети страни, които предоставят важен css чрез въвеждане на URL адреса на вашия сайт. pegasaas е толкова страхотен безплатен инструмент.
Ето как да го направите:
Етап 1. Отидете на https://pegasaas.com/critical-path-css-generator/ и въведете своя URL. Копирайте генерирания "Critical Path CSS".
Стъпка 2 В настройките за автоматично оптимизиране (активиране на разширени настройки), под „Опции за CSS“, отметнете „Inline and Defer CSS“ и поставете копирания CSS.
Професионалисти:
- Е свободен
минуси:
- Няма отделен критичен CSS за различни типове страници (напр.: начална страница, страница с публикации, страница с категория, страница с продукти и т.н.)
- Не възстановявайте автоматично при промяна на тема/настройка
Защо самият WordPress не може да генерира критичен CSS?
Както може би сте забелязали, създаването на критичен път за css позволява външни услуги. Така че защо самият WordPress не може да го генерира?
Създаването на Critical CSS става възможно чрез проекти с отворен код като Critical (от Google), CriticalCSS или мезонет. Всички тези проекти са базирани на NodeJS, а не на PHP. Така че, трябва да инсталирате NodeJS на вашия сървър. Повечето споделени/управлявани хостинг доставчици не позволяват това по няколко причини.
