Cum și de ce ar trebui să inline css critică

Mai repede site-ul oferă o experiență de utilizare mai bună, ceea ce poate afecta foarte mult succesul. Ca dezvoltatorii pentru a îmbunătăți performanța? Dezvoltatorii pot folosi o metodă care a îmbunătăți foarte mult performanța. Puteți CSS inline critică, iar restul încărcăturii asincronă. În acest articol vom umbla prin pașii și vă ajută să îmbunătățiți performanța site-ului.

Ce este CSS critic?

Pentru a aplica codul CSS critic, care este responsabil pentru stilurile părții vizibile a paginii atunci când încărcarea site-ului. Conținutul partea vizibilă se referă la conținutul pe care utilizatorul vede prima după încărcare. Acest lucru poate fi meniu și alte elemente. Este extrem de important să se aplice stiluri și modul în care această parte a paginii poate face mai rapid.

Este de remarcat, de asemenea, remarcat faptul că utilizatorii pot accesa site-ul dvs. printr-o varietate de dispozitive cu diferite rezoluții de ecran. Așa că conținutul propriu-zis al părții vizibile a ecranului nu rezolvă nimic. Pentru a rezolva această problemă, codul critic CSS trebuie să includă, de asemenea, stiluri de aspect de bază și fonturile.

În practica modernă, pentru a dezvolta de multe ori recomanda CSS inline critice. Acest cod este introdus în pagină după cum urmează:

HTML5 și CSS3 practica de la zero la rezultatul!

De ce stiluri inline sunt necesare?

Dacă te duci la PageSpeed ​​Insights Google și analizează una dintre paginile site-ului dvs., puteți pop un avertisment cu privire la optimizarea panoul CSS prin încorporarea stiluri critice și încărcarea asincronă stilurile rămase.

Browser-ul nu va face partea vizibilă a paginii până când încărcați toate fișierele CSS, ce probleme pot apărea în cazul în care există mai multe fișiere.

Nu toți utilizatorii care vor avea o conexiune rapidă, iar ei nu vor aștepta pentru a încărca biblioteca, CSS și JS. În cazul în care nu pot obține conținutul, care a fost atins, acesta va fi foarte rău. Chiar și utilizatorii cu conexiune la rețea rapidă pot fi pierdute, de exemplu, atunci când trece prin tunel. În timp ce în tunel, utilizatorii vor avea acces la conținutul principal în cazul în cazul în care construit în aspect critic CSS, și toate celelalte fișiere sunt descărcate numai după afișarea conținutului principal.

Imaginea de mai jos prezintă diferența dintre paginile convenționale și optimizate. Captura de ecran arată că pagina optimizată afișează conținutul de 0,5 secunde mai devreme. Diferența va fi mai pronunțată atunci când o mulțime de biblioteci suplimentare vor fi conectate.

Ai nevoie sa inline CSS critice?

Totul depinde de situație. Dacă nu folosiți cadre grele sau biblioteci, și fișiere CSS, cântărește puțin, nu aveți nevoie pentru a încorpora stiluri.

Dacă lucrați cu tipul de cadru Bootstrap, poate că nu utilizați toate caracteristicile acestui cadru. În acest caz, puteți tăia un cadru critic al fișierului CSS, iar Bootstrap încărcate asincronă. Acest lucru ar trebui să crească în mod semnificativ viteza de descărcare.

Cum de a găsi CSS critică

Căutarea CSS critică în sine este dificil și plictisitor. Din fericire, există instrumente speciale, care vor accelera acest proces.

cu Grunt

Dacă sunteți familiarizat cu Grunt, atunci există un plugin care simplifică procesul --groh critice. Dacă nu mai place sau NPM Gulp, a se vedea secțiunile de mai jos. În primul rând trebuie să instalați un plugin cu comanda:

Trebuie să creați, de asemenea, fișierul Gruntfile.js. Acesta va stoca toate codul din setările plugin, inclusiv rezoluția ecranului, și o cale de fișier. exemplu:

Noi folosim metoda grunt.initConfig în interiorul funcțiilor de înfășurare pentru a specifica toate setările. În exemplul am calea, în cazul în care vor fi înregistrate în finală, iar fișierele originale. Am cerut, de asemenea, opțiunea minify la true. Așa că am obține versiunea minifitsirovannuyu de stiluri critice. Proprietatea src specifică calea către fișierul original, cu care lucrăm. Proprietatea dest specifică calea către fișierul de destinație pentru a fi stocate.

În cazul în care este specificat dest fișier stil, desigur, CSS este stocată într-un fișier separat. În cazul în care este specificat dest fișier aspect (HTML, PHP, etc), CSS este construit, iar stilurile existente la rândul lor, funcția de JS pentru încărcarea asincronă. Pentru utilizatorii fără JS adăugat NoScript bloc. Există și alte opțiuni. O listă completă este disponibilă în documentație. Acum plugin-ul, puteți începe să tastați în consolă groh: C: \ cale \ la \ proiect> groh

Dacă fișierul sursă a fost:

dar acum el a devenit atât:

După cum puteți vedea, plugin-ul face totul pentru tine. Dacă acum a scăpa de pagină prin intermediul PageSpeed, rezultatul ar trebui să fie mai bine. In multe cazuri, rezultatul variază 86-95.

Există și alte plugin-uri pentru Grunt, care fac același lucru - groh-criticalcss și geamăt-penthose. Aceste plugin-uri necesare pentru a alege stiluri de la care pentru a extrage codul critic.

Cu module NPM

Critice - Pachet NPM creat de Addy Osmani, care definește funcțional plug-groh-critice. Folosind doar JS și MNPT, fără Grunt, puteți extrage și de a construi stiluri critice de pagină. Pentru a instala pachetul, trebuie să rulați comanda:

După instalarea pachetului, trebuie să creați un fișier JS în dosarul proiectului și copiați codul de mai jos:

Puteți specifica o varietate de opțiuni și de a optimiza pagina. Dacă specificați opțiunea de linie la true, va genera o pagină HTML cu un stiluri deja built-in. Dacă este setat false, acesta va genera un fișier CSS separat. Opțiuni setați lățimea și înălțimea rezoluția ecranului. Există multe alte opțiuni, cum ar fi stiluri de minification inlaynovyh. Toate opțiunile pot fi găsite pe pagina de documentare pachetele critice NPM. Marcarea pagina optimizat va arata ca pe pagina de după plug-in pentru Grunt.

Există, de asemenea, un modul critic-css. Modulul genereaza CSS critice pe adresa URL. CSS rezultată poate fi tratată cu ajutorul funcției de apel invers ca plugin groh bazat pe acest pachet.

cu Gulp

Dacă vă place să lucrați în înghițitură, Addy Osmani recomandă utilizarea modulului directe NPM critice. Exemplul său la pagina GitHub:

În echipele critice au, de asemenea, un proiect de exemplu pe Gulp. în cazul în care puteți vedea în acțiune. Există, de asemenea, un plug-înghițitură-critice-css. care este capabil să genereze un CSS critic. Cu toate acestea, acest plug-in extrage selecțiile stil de un anumit tip, dar nu precizează care stilurile sunt aplicate elementelor vizibile.

resurse suplimentare

Puteți utiliza, de asemenea, instrumentul Critical Path CSS Generator Jonas Olsson. Trebuie doar să specificați adresa URL a paginii și toate stilurile pentru a extrage CSS critice. Click pe CSS Path Creare critice și obțineți codul CSS gata.

concluzie

Alegerea dacă inline CSS critică aveți nevoie depinde de condițiile în care se află utilizatorul, precum și structura site-ului. Dacă aveți un singur site-ul, care nu merge atât de des utilizatori, este un lucru. Dar când aveți un site complex cu cadre și integrarea plug-in de stiluri critice pot crește în mod semnificativ productivitatea.

Revizie: Echipa webformyself.

Cele mai multe știri IT si dezvoltare web pe canalul nostru-Telegram