Как и защо трябва да се вгражда CSS критична

По-бързо уеб сайт осигурява по-добра работа на потребителите, които могат значително да повлияят на нейния успех. Като разработчиците да се подобри производителността? Разработчиците могат да използват метод, който значително подобряване на производителността. Можете да вградите критичен CSS, а останалата част от товара асинхронно. В тази статия ще разгледаме стъпките и да ви помогне да се подобри ефективността на вашия сайт.

Какво е критично CSS?

За да кандидатствате критичната CSS код, който е отговорен за стиловете на видимата част на страницата, когато зареждане на сайта. Съдържание видима част се отнася до съдържанието, което потребителят вижда първи след натоварването. Това може да бъде менюто и други елементи. Изключително важно е да се прилагат стилове и как тази част от страницата, може да направи по-бързо.

Заслужава също да отбележим, че потребителите имат достъп до сайта си чрез различни устройства с различни резолюции на екрана. Така че самото съдържание на видимата част на екрана не решава нищо. За да се реши този проблем, критичната CSS кода трябва да включва също така основните стилове оформление и шрифтовете.

В съвременната практика, да се развива често препоръчвам инлайн критичен CSS. Този код се въвежда в страницата, както следва:

HTML5 и CSS3 практика от нула до резултата!

Защо Inline стилове са необходими?

Ако отидете в Google PageSpeed ​​Insights и анализира една от страниците на сайта, можете да изскочи предупреждение за оптимизиране на CSS панел чрез вграждане критични стилове и асинхронно зареждане на останалите стилове.

Браузърът няма да се изобрази видимата част на страницата, докато не се зареди всички CSS файлове, какви проблеми може да се случи, ако има много файлове.

Не всички от вашите потребители ще има бърза връзка, и те няма да чака, за да заредите библиотека, CSS и JS. Ако те не могат да получат на съдържанието, което беше постигнато, то ще бъде много лошо. Дори потребители с бърза връзка на мрежата могат да бъдат загубени, например, при преминаване през тунела. Докато в тунела, потребителите ще имат достъп до основното съдържание в случая, ако вграден в критично CSS оформление, както и всички други файлове се изтеглят само след показване на основното съдържание.

Изображението по-долу показва разликата между конвенционалните и оптимизирани страници. Снимката показва, че оптимизирана страницата показва съдържанието на 0,5 секунди по-рано. Разликата ще бъде по-силно изразени при много допълнителни библиотеки ще бъдат свързани.

Имате ли нужда да се вгражда критичен CSS?

Всичко зависи от ситуацията. Ако не използвате тежки рамки или библиотеки, както и CSS файлове, тежи малко, че не е нужно да се вгради стилове.

Ако работите с първоначално зареждане рамка тип, може би не използвате всички функции на тази рамка. В този случай, можете да изрежете критична рамка на CSS файла, а фърмуера зареден асинхронно. Това би трябвало значително да се увеличи скоростта на сваляне.

Как да намерите критичен CSS

Търсене самата критична CSS е трудно и скучно. За щастие, има специални инструменти, които ще ускорят този процес.

С Grunt

Ако сте запознати с грунт, тогава има плъгин, който опростява процеса - грухтене-критичен. Ако вече не харесват или Gulp NPM, вижте по-долу раздели. Първо трябва да се инсталира плъгин с командата:

Трябва също така да се създаде Gruntfile.js файл. Тя ще се съхранява цялата кода от настройките на плъгина, включително резолюция на екрана, както и пътя на файла. например:

Ние използваме метод grunt.initConfig вътре функциите на обвиващи да посочите всички настройки. В примера имам пътя, където на финала ще бъде записано и оригиналните файлове. Аз също попита омаловажавам опцията да е вярно. Така че аз се minifitsirovannuyu версия на критични стилове. Имотът КРБ посочва пътя към оригиналния файл, с които работим. В Цел имота посочва пътя към файла дестинация трябва да се съхраняват.

Ако Цел е посочено стил файл, разбира CSS се съхранява в отделен файл. Ако Цел е посочено оформление файл (HTML, PHP и т.н.), СГО е построен, а съществуващите стилове от своя страна JS функция за асинхронно зареждане. За потребители без JS добавена нескриптов блок. Има и други варианти. Пълният списък е на разположение в документацията. Сега плъгин, можете да започнете да пишете в конзолата грухтене: C: \ път \ да \ проект> грухтене

Ако файлът източник е:

но сега той е станал толкова:

Както можете да видите, приставката прави всичко за вас. Ако сега се отървете от страницата чрез Pagespeed, резултатът трябва да бъде по-добре. В много случаи, резултатът варира 86-95.

Има и други плъгини за грунт, които правят същото - грухтене-criticalcss и грухтене-penthose. Тези плъгини, за да се изберат стилове, от които да се извлече критичния код.

С НРП модули

Критична - NPM пакет създаден от Addy Османи, който определя функционална добавка грухтене критични. Използване само на JS и NPM, без Grunt, можете да извлечете и изграждане на критични стилове на страници. За да инсталирате пакета, трябва да изпълните командата:

След инсталирането на пакета, трябва да създадете JS файл в папката на проекта и да копирате кода по-долу:

Можете да зададете различни опции и оптимизиране на страницата. Ако зададете опцията за инлайн да е истина, ще генерира HTML страница с вече вградени стилове. Ако е фалшива, и ще създаде отделен CSS файл. Вариантите са на ширината и височината на разделителната способност на екрана. Има много други опции, като Минификация inlaynovyh стилове. Всички опции могат да бъдат намерени на страницата документация критични НРП пакети. Маркиране оптимизирана страница ще изглежда страницата след приставката за Grunt.

Освен това има и модул критично CSS. Модулът генерира критична CSS върху предоставената URL. Получената CSS могат да бъдат лекувани с помощта на функцията за обаждане като грухтене плъгин основаващи се на този пакет.

С Gulp

Ако искате да работите в глътка, Ади Османи съветва с помощта на директна критичен NPM модул. Неговият пример на GitHub страница:

В критичните отбори също имат за пример проект за Gulp. , където можете да го видите в действие. Има и приставка глътка-критично CSS. който е в състояние да генерира критична CSS. Въпреки това, тази приставка извлича селекциите стил от определен тип, но не уточни кои стилове се прилагат към видимите елементи.

допълнителни ресурси

Можете да използвате инструмента на критичния път CSS генератор Йонас Олсон. Трябва само да посочите URL адреса на страницата и всички стилове, от които да се извлече от решаващо значение CSS. Кликнете на CSS Създаване на критичния път и се пригответе CSS код.

заключение

Изборът на това дали инлайн критичен CSS, което трябва, зависи от условията, в които се намира на потребителя, както и структурата на сайта. Ако имате единично място, което не е толкова често ходя на потребителите, е едно нещо. Но когато имате сложен сайт с рамки и приставка за интеграция на критичните стилове може значително да увеличи производителността.

Редакция: Екип webformyself.

Най-IT новини и уеб разработки на нашия канал Телеграма