Hvad er en kritisk CSS, og hvordan man arbejder? (Teknikker til webbelastningen hurtigt)

Det virkelige problem i livet

Har du nogensinde følt dig sådan? Du klikker på et interessant websted. Men hvad der er velkommen er du ... hvid skærm med et glat ikon, der ser ud til aldrig at afslutte sekund, det andet, du venter ... indtil slutningen, vil det miste tålmodigheden og derefter slukke! Denne form for irritabilitet er, hvad dine kunder støder på hver dag, og det er et "dræb", der roligt ødelægger konverteringsfrekvensen og din SEO -rang. Som du måske ikke ved

Symptomer på "Slow Download -websted", især den første set (over folden), ikke kun om følelser. Men det er et teknisk problem kaldet "render-blokerende ressourcer" eller ressourcer, der blokerede visningen af websiden. Hvilken den vigtige faktor er vores tunge CSS -fil Dette problem er en presserende sag, der skal løses. Du kan lære mere om, hvordan du løser de render-blokerende ressourcer til at tilføje PageSpeed direkte.

Spørg efter illustrationer: Brugerbilledet viser et irriteret udtryk, mens du stirrer på smartphone -skærmen, der stadig er hvid. Der er kun et belastningssymbol i midten. Formidler følelsen af at vente på, at webstedet kan downloade for længe

Hvorfor skete dette problem?

At tydeligt se billedet forestille sig, at browseren (som Google Chrome) fungerer som et meget flittigt leveringspersonale. Når nogen ringer til dit websted, vil det køre for at få HTML -filen (webstrukturen) før. Når jeg har læst kommandoen i HTML, fandt den kommandoen "Hej! Før du viste noget, skal du downloade alle CSS -filer før!" CSS -filen er som en dressing manual, der siger, hvad Color Web skal have, men pointen er ... Browser vil "stoppe alt" for at vente på, at hele CSS -filen først skal afsluttes. Selvom nogle stilarter er til det nederste indhold på det websted, som brugeren ikke har set.

Processen, som "skal vente med at afslutte, før de fortsætter." Dette er oprindelsen af ordet gengivelse af blokering , jo større og kompliceret dine CSS-filer. Ventetiden er kun længere. At få brugeren til at stirre på den hvide skærm længere, unødvendigt, på trods af det vigtige indhold, som han først skal se, kan det kun have brug for CSS.

Spørgsmål om illustrationer: Nem dagbogbilleder viser processen med normal browser: 1. browser anmoder om HTML -> 2. se CSS -> 3. Stop med at arbejde (med et rødt stop -symbol) for at downloade alle CSS -filer -> 4.

Hvis det er tilbage, hvordan vil det påvirke?

Med udsigt over problemet med langsom indlæsning af websteder, fordi CSS ikke er forskellig fra at åbne en smuk butik. Men låst døren fra at lade kunderne komme ind i konsekvenserne meget mere intense end forventet.

• Brugeroplevelse (UX) ødelagt: Ingen kan lide at vente. Forskningen viser, at kun 1-3 sekunder bremser webstedet, det tilføjer mere end 32% af chancerne for grænser.
• Konverteringsfrekvens. Skala: Kunder, der er frustrerede, er kunder, der ikke køber ting. Muligheden for dig at lukke salget, få bly eller få folk til at klikke på vigtige knapper. Forsvinder med et øjeblik med en langsommere hastighed
• SEO rang. Drop: Google lægger stor vægt på brugeroplevelse med kernewebvital som en af rangeringsfaktorerne. Langsomt websteder har direkte en direkte negativ effekt på LCP (største indholdsfulde maling) værdi. En af de vigtige metriske gør, at dine kerne web -vitaliteter forbedres Og faldt til sidst
• Tab af troværdighed: langsomme websteder afspejler ikke -professionelt. Og hvilket får kunderne til at mangle tillid til at udføre transaktioner med dig, kan han undslippe for konkurrenterne på nettet hurtigere i stedet.

Spørgsmål om illustrationer: 2 grafbilleder sammenlignet den første bar har et rynke ikon på toppen. Grafen faldt ned med meddelelsen "konverteringshastighed", og den anden har et smilikon. Grafen stiger med meddelelsen "Bounce Rate" for at formidle negative effekter.

Er der nogen løsning? Og hvor skal det starte?

Den gode nyhed er ... vi har "Expressway" til at løse dette problem. Denne teknik kaldes "kritisk CSS" eller "CSS, der er absolut nødvendig".

Dets princip er meget let. I stedet for at tvinge browseren til at downloade alle CSS før displayet skifter vi til et nyt spil af:

1. Find og uddrag (uddrag): Vi finder kun den CSS -stil, der er nødvendig til "over foldet" -indholdet.
2. Begravet i HTML (inline): Bring CSS ekstraheret (som er meget lille), læg i mærket ภายในส่วน ของไฟล์ HTML โดยตรง
3. Indlæs resten senere (async/udsættelse): Alle CSS -filer, vi bestiller det til at downloade. "Bloker ikke displayet" (asynkront) er gradvist at downloade bag siden, efter at websiden er blevet vist.

Hvad er resultatet? Browseren modtager en HTML -fil med kritisk CSS, indlejret og kan "farve" eller vise den første webside for brugere at se. Næsten øjeblikkeligt! Brugeren vil føle, at dit websted er hurtigt, mens den anden CSS gradvist indlæses senere. Uden at forstyrre nogen er dette en af de vigtige teknikker, som Smashing Magazine giver til hjertet af præstationsoptimering.

Spørg for illustrationer: Let at forstå Forklar begrebet kritisk CSS: 1. "Identificer CSS til tekstfeltet over foldet". 2. Sæt CSS -koden for at placere HTML -filen (inline). 3.. De resterende CSS -filer indlæses senere (asyncbelastning).

Eksempler fra den rigtige ting, der plejede at få succes

Forestil dig "den smarte indretning" online boligindretningsbutik. Der er et meget smukt websted. Men i stedet for et stort problem, er salget på mobiltelefoner meget lavere end det mål, holdet fandt, at Google PageSpeed Insights -score er meget dårligt, med en LCP (største indholdsfulde maling) op til 4,8 sekunder, hvilket betyder, at kunderne skal stirre på den hvide skærm i næsten 5 sekunder for at se det første produktbillede!

Turning Mission: Development Team besluttede at bruge kritiske CSS -teknikker. De udtrækker den nødvendige CSS til header, Hero Banner og de første 4 varer, der vises i HTML og indstiller hoved CSS -filen senere.

Materielle resultater: Efter kun en uge faldt Web LCP -værdien fra 4,8 sekunder til kun 1,6 sekunder! Brugeren føler, at internettet "hurtigere, som en anden historie", er Bondce -satsen på en mobiltelefon reduceret med 25%, og vigtigst af alt er konverteringsfrekvensen steget med 12% uden at skulle skyde endda en baht. Dette er kraften i at fokusere på, hvad brugeren ser først. Hvilket er i tråd med tanken om, at det overfoldes, er det stadig meget vigtigt.

Spørg om illustrationer: Sammenligningsbilleder af skærmen/efter skærmen. Google PageSpeed Insights. Billedet viser den røde ydelse og den høje LCP. Aftert -billedet viser de grønne scoringer og LCP -værdierne, der er markant lavere.

Hvis du vil følge, hvad skal jeg gøre? (Kan bruges med det samme)

Kritisk CSS er ikke for svært. I øjeblikket er der mange værktøjer. Prøv at følge følgende trin:

Trin 1: Udtrækning af kritiske CSS.
Den bedste måde er at bruge automatiske værktøjer. Fordi at gøre det selv er spild af tid og er meget let.

• Online -værktøjer: Der er et websted, der leverer gratis kritisk CSS. Læg bare din URL i, f.eks. Sitelocity's kritiske CSS -generator.
• NPM -pakker (til udviklere): Hvis du er en udvikler, kan du bruge bibliotek som 'kritisk' , som er meget populær og kraftfuld. Det kan arbejde med dit build -proces -system.
• CMS -plugins (til WordPress/Shopify): De fleste af platformene har automatiske hastighedsstik, der gør dette, såsom WP Rocket, PerfMatters (for WordPress), hvilket er den nemmeste måde for generelle mennesker.

Trin 2: Sæt det på dit websted.

1. Medbring CSS -koden, der ekstraheres fra det første trin. Sæt det i mærket ที่ส่วน ของหน้าเว็บคุณ
2. Juster den originale CSS -downloadkommando fra:
   At blive sådan i stedet for at lade det downloade senere:
   

Denne nye kode fortæller browseren, at "download denne fil på forhånd uden presserende. Og når belastningen er færdig, skal du bruge den som stilark." MærketDet er en beskyttelse i tilfælde af, at brugerne slukker JavaScript. Hvis du har brug for eksperter, skal du kontrollere og forbedre disse strukturer. E -handelsoptimeringsrevision kan hjælpe dig.

Spørg om illustrationer: Infovic, 3 trin, kritisk CSS, med ikon: 1. Generer (brug computer) 2. inline (sæt koden på HTML) 3. udsættelse (originalt CSS -filsæt) til at være en proces, der er let at følge.

Spørgsmål, som folk har en tendens til at undre sig, og de svar, der er ryddet

Spørgsmål: Gør dette, vil vores HTML -fil være større? Er der nogen negativ effekt?
Svar: Ja, HTML -filen vil være lidt større. Men dette er en udveksling, der "stor værdi". Fordelene ved brugeren ser websiden, der skal vises med det samme. Mere værdi end HTML -filstørrelsen, der kun har øget lidt den samlede oplevelse af brugeren, vil være enorm. Hvilket er vores hovedmål

Spørgsmål: Skal vi oprette en separat kritisk CSS for hver side?
Svar: I teorien er det bedste "ja", fordi hver skabelon (første side, produktside, blogside) med layout og over folden stil. Men i starten kan du fokusere på vigtige sider, der først har den højeste trafik, såsom den første side og hovedlandingssiden. De fleste automatiske værktøjer kan hjælpe med at skabe en CSS.

Spørgsmål: Hvis der er en redigering af webdesignet, hvordan man tager sig af det?
Svar: Dette er den største udfordring. Hver gang du ændrer designet i ovenstående folden, skal du "altid" oprette en ny kritisk CSS. Dette er grunden til, at den automatiserede byggeproces er for udviklere. hjælp , fordi det vil hjælpe

Spørg om illustrationer: Personbilleder sidder alvorligt og tænker foran computeren. Med et spørgsmålstegn (?) Flyder rundt i medierne om at have et spørgsmål, der har brug for et klart svar

Resume for at være let at forstå + vil prøve at gøre

Kritisk CSS er ikke kun en teknik for programmerere, men "hjertet" ved at oprette et websted, der giver den bedste oplevelse for brugerne. Det er en måde at ændre tankegangen fra "tvunget til at vente på alt" som "at levere den vigtigste ting først." At få brugeren til at se det indhold, han ønsker i et øjeblik, er forskellen mellem "tab af kunder" og "at skabe almindelige kunder"

Lad ikke den hvide skærm og kedelige venter på at ødelægge din virksomhed længere, det er tid til at gøre det. Prøv at bruge forskellige værktøjer. Anbefalet at tjekke dit websted og begyndte at forbedre sig fra i dag er investeringerne effektivt i dag. Er at opbygge et stærkt fundament for væksten af konvertering og SEO i fremtiden

Dit websted ... klar til at være hurtigere? Gør det med det samme, og du vil bestemt blive forbløffet over resultaterne!

Spørg om illustrationer: Raketbilledet skynder sig hurtigt ind i himlen. På raketten er der ordet "sidehastighed" og "konvertering" som inspiration og opmuntring for læserne til at handle.

‍