🔥 Slechts 5 minuten om de weergave te wijzigen.

Wat is een kritieke CSS en hoe te werken? (Technieken voor de webbelasting snel)

Zo lang, wil je lezen?

Het echte probleem in het leven

Heb je je ooit zo gevoeld? U klikt op een interessante website. Maar wat je welkom is, is ... wit scherm met een soepel pictogram dat nooit als tweede lijkt te eindigen, de tweede dat je wacht ... tot het einde verliest het geduld en schakelt het dan uit! Dit soort prikkelbaarheid is wat uw klanten elke dag tegenkomen en het is een "kill" die stilletjes de conversieratio en uw SEO -rangorde wordt vernietigd. Die u misschien niet weet

Symptomen van "langzame downloadwebsite", vooral de eerste gezien (boven de vouw), niet alleen over gevoelens. Maar het is een technisch probleem genaamd "render-blocking bronnen" of bronnen die de weergave van de webpagina blokkeren. Wat de belangrijke factor is ons zware CSS -bestand Dit probleem is een dringende kwestie die moet worden opgelost. U kunt meer leren over hoe u de renderblokkeerbronnen kunt repareren om PageSpeed direct toe te voegen.

Prompt voor illustraties: de gebruikersafbeelding toont een geïrriteerde uitdrukking tijdens het staren naar het smartphonescherm dat nog steeds wit is. Er is alleen een laadsymbool in het midden. Brengt het gevoel van wachten op de website om te lang te downloaden

Waarom is dat probleem opgetreden?

Om de afbeelding duidelijk te zien voorstellen dat de browser (zoals Google Chrome) werkt als een zeer ijverig leveringspersoneel. Wanneer iemand uw website belt, wordt deze uitgevoerd om eerder het HTML -bestand (de webstructuur) te krijgen. Zodra ik de opdracht in HTML heb gelezen, vond het de opdracht "Hé! Voordat je alles laat zien, moet je alle CSS -bestanden eerder downloaden!" Het CSS -bestand is als een verbandhandleiding die zegt wat Color Web moet hebben, maar het punt is ... Browser zal "alles stoppen" om het hele CSS -bestand als eerste af te maken. Hoewel sommige stijlen voor de onderste inhoud van de website zijn die de gebruiker niet heeft gezien.

Het proces dat "moet wachten om te eindigen voordat ze verder gaan." Dit is de oorsprong van het woord render-blokkering , hoe groter je CSS-bestanden. Het wachten is pas langer. Waardoor de gebruiker langer naar het witte scherm staart, onnodig, ondanks de belangrijke inhoud die hij eerst zou moeten zien, mogelijk alleen CSS nodig heeft.

VOORBEELD VOOR ILLUSTRATIES: Eenvoudig dagboekafbeeldingen tonen het proces van normale browser: 1. Browseraanvragen html -> 2. Zie CSS -> 3. Stop met werken (met een rood stopsymbool) om alle CSS -bestanden te downloaden -> 4.

Als het overgaat, hoe zal het dan beïnvloeden?

Uitzicht op het probleem van slow loadwebsites omdat CSS niet anders is dan het openen van een prachtige winkel. Maar de deur vergrendeld van het toestaan van klanten om de gevolgen in te voeren zijn veel intenser dan verwacht.

  • Gebruikerservaring (UX) vernietigd: niemand wacht graag. Uit het onderzoek blijkt dat slechts 1-3 seconden de website vertragen, het voegt meer dan 32% van de kansen op grenzen toe.
  • Conversieratio. Schaal: klanten die gefrustreerd zijn, zijn klanten die geen dingen kopen. De mogelijkheid voor u om de verkoop te sluiten, lood te krijgen of mensen te laten klikken op belangrijke knoppen. Zal in een oogwenk verdwijnen met een langzamere snelheid
  • SEO RANK. Drop: Google hecht veel belang aan gebruikerservaring, met kernwebvitals als een van de rangorde -factoren. Langzame websites hebben rechtstreeks een direct negatief effect op de LCP -waarde (grootste contentful verf). Een van de belangrijke metriek zorgt ervoor dat uw kernwebvitals verbeteren En uiteindelijk viel
  • Verlies van geloofwaardigheid: langzame websites weerspiegelen niet -professioneel. En ervoor zorgen dat klanten geen vertrouwen hebben om transacties met u te doen, kan hij in plaats daarvan aan de concurrenten op internet ontsnappen.

Prompt voor illustraties: 2 grafiekafbeeldingen vergeleken De eerste balk heeft een fronspictogram bovenaan. De grafiek viel neer met het bericht "Conversiesnelheid" en de andere heeft een glimlachpictogram. De grafiek stijgt met het bericht "bouncepercentage" om negatieve effecten over te brengen.

Is er een oplossing? En waar moet het beginnen?

Het goede nieuws is ... we hebben "snelweg" om dit probleem op te lossen. Deze techniek wordt "kritische CSS" of "CSS genoemd die absoluut noodzakelijk is".

Het principe is heel gemakkelijk. In plaats van de browser te dwingen om alle CSS te downloaden voordat we worden weergegeven, zullen we overstappen in een nieuw spel door:

  1. Zoek en extraheren (extract): we zullen alleen de CSS -stijl vinden die nodig is voor de inhoud "boven de vouw".
  2. Begraven in HTML (inline): breng de geëxtraheerde CSS (die erg klein is), in de tag geplaatst ภายในส่วน ของไฟล์ HTML โดยตรง
  3. Laad de rest later (async/uitstel): alle CSS -bestanden die we zullen bestellen om te downloaden. "Blokkeer het display niet" (asynchroon) is om geleidelijk achter de pagina te downloaden nadat de webpagina is weergegeven.

Wat is het resultaat? De browser ontvangt een HTML -bestand met kritieke CSS, ingebed en kan de eerste webpagina "kleuren" of weergeven die gebruikers kunnen zien. Bijna onmiddellijk! De gebruiker zal het gevoel hebben dat uw website snel is, terwijl de andere CSS geleidelijk later laadt. Zonder iemand te storen is dit een van de belangrijke technieken die Smashing Magazine geeft aan het hart van prestatie -optimalisatie.

Prompt voor illustraties: eenvoudig te begrijpen Leg het concept van kritische CSS uit: 1. "Identificeer CSS voor boven-de-voudige" tekstvak. 2. Plaats de CSS -code om in het HTML -bestand te plaatsen (inline). 3. De resterende CSS -bestanden worden later geladen (async load).

Voorbeelden van het echte ding dat vroeger succesvol was

Stel je voor "The Chic Décor" online woninginrichting. Er is een heel mooie website. Maar in plaats daarvan is het een groot probleem tegengekomen, is de verkoop op mobiele telefoons veel lager dan het doelwit dat het team ontdekte dat de Google PageSpeed Insights -score erg slecht is, met een LCP (grootste contentful verf) tot 4,8 seconden, wat betekent dat klanten naar het witte scherm moeten staren voor bijna 5 seconden om het eerste productafbeelding te zien!

Missie draaien: ontwikkelingsteam besloot kritische CSS -technieken te gebruiken. Ze extraheren de benodigde CSS voor header, heldenbanner en de eerste 4 items die worden weergegeven in HTML en stellen het hoofd CSS -bestand later in.

Tastbare resultaten: na slechts één week daalde de Web LCP -waarde van 4,8 seconden tot slechts 1,6 seconden! De gebruiker is van mening dat het web 'sneller, net als een ander verhaal', de Bondce -snelheid op een mobiele telefoon met 25% is verlaagd, en het allerbelangrijkste is dat de conversieratio met 12% is toegenomen zonder zelfs één baht te hoeven schieten. Dit is de kracht om zich te concentreren op wat de gebruiker eerst ziet. Dat is in lijn met het idee dat het boven de voudig nog steeds erg belangrijk is.

Prompt voor illustraties: vergelijkingsafbeeldingen van het scherm/na het scherm. Google PageSpeed Insights. De foto toont de rode prestaties en de hoge LCP. Het ADT -beeld toont de groene scores en de LCP -waarden die aanzienlijk lager zijn.

Als je wilt volgen, wat te doen? (Kan onmiddellijk worden gebruikt)

Kritische CSS is niet zo moeilijk. Momenteel zijn er veel tools. Probeer de volgende stappen te volgen:

Stap 1: Kritische CSS extraheren.
De beste manier is om automatische tools te gebruiken. Omdat het zelf tijdverspilling is en heel gemakkelijk is.

  • Online tools: er is een website die gratis kritieke CSS biedt. Zet gewoon je URL in, zoals de kritieke CSS -generator van Sitelocity.
  • NPM -pakketten (voor ontwikkelaars): als u een ontwikkelaar bent, kan de bibliotheek zoals 'kritiek' die erg populair en krachtig is. Het kan werken met uw bouwprocessysteem.
  • CMS -plug -ins (voor WordPress/Shopify): de meeste platforms hebben automatische snelheidspluggen die dit doen, zoals WP Rocket, PerfMatters (voor WordPress), wat de gemakkelijkste manier is voor algemene mensen.

Stap 2: Zet het op uw website.

  1. Breng de CSS -code mee die is geëxtraheerd uit de eerste stap. Zet het in de tag ที่ส่วน ของหน้าเว็บคุณ
  2. Pas de originele CSS -downloadopdracht aan van:
    In plaats daarvan zo worden om het later te laten downloaden:

Deze nieuwe code vertelt de browser dat "dit bestand van tevoren zonder dringend download. En eenmaal de lading is voltooid, gebruik het als stylesheet." De tagHet is een bescherming in het geval dat gebruikers JavaScript uitschakelen. Als u experts nodig hebt, controleert en verbetert u deze structuren. Ecommerce -optimalisatie -audit kan u helpen.

Prompt voor illustraties: Infovic, 3 stappen, kritische CSS, met pictogram: 1. Genereer (gebruik computer) 2. inline (zet de code op de HTML) 3. Uitstel (originele CSS -bestandsset) om een proces te zijn dat eenvoudig te volgen is.

Vragen die mensen de neiging hebben zich af te vragen en de antwoorden die zijn gewist

Vraag: Doe dit, zal ons HTML -bestand groter zijn? Is er een negatief effect?
Antwoord: Ja, het HTML -bestand is iets groter. Maar dit is een uitwisseling die "grote waarde" is. De voordelen van de gebruiker zien de webpagina om onmiddellijk weer te geven. Meer waarde dan de HTML -bestandsgrootte die slechts een beetje heeft verhoogd, de algemene ervaring van de gebruiker zal enorm zijn. Dat is ons belangrijkste doel

Vraag: Moeten we voor elke pagina een afzonderlijke kritieke CSS maken?
Antwoord: In de theorie is het beste "ja" omdat elke sjabloon (eerste pagina, productpagina, blogpagina) met lay -out en boven de vouwstijl. Maar in het begin kunt u zich concentreren op belangrijke pagina's die eerst het hoogste verkeer hebben, zoals de eerste pagina en de hoofdlandingspagina. De meeste automatische tools kunnen helpen bij het maken van een CSS.

VRAAG: Als er een bewerking van het webontwerp is, hoe moet u ervoor zorgen?
Antwoord: Dit is de belangrijkste uitdaging. Elke keer dat u het ontwerp in het bovenstaande wijzigt, moet u "altijd" een nieuwe kritische CSS maken. Dit is de reden waarom het geautomatiseerde bouwproces voor ontwikkelaars is. Of het gebruik van betrouwbare pluggen voor CMS-gebruikers als de meest aanbevolen methode omdat het helpt zichzelf opnieuw te genereren elke keer dat er een verandering is, maakt de zorg een stuk eenvoudiger en helpt ook om ook duurzame richtlijnen voor webontwerp

Prompt om illustraties: Persoonsbeelden zitten serieus na te denken voor de computer. Met een vraagteken (?) Drijft rond de media over het hebben van een vraag die een duidelijk antwoord nodig heeft

Samenvatting om gemakkelijk te begrijpen te zijn + willen proberen te doen

Critical CSS is niet alleen een techniek voor programmeurs, maar het "hart" van het maken van een website die de beste ervaring voor gebruikers biedt. Het is een manier om de manier van denken te veranderen van "gedwongen om op alles te wachten" als "eerst het belangrijkste afleveren". Om de gebruiker de inhoud te laten zien die hij in een seconde wil, is het verschil tussen "verlies van klanten" en "Regelmatige klanten maken"

Laat het witte scherm en het saai niet meer wachten om uw bedrijf te vernietigen, het is tijd om het te doen. Probeer verschillende tools te gebruiken. Aanbevolen om uw website te controleren en begonnen met het verbeteren van de investeringen van vandaag is vandaag effectief. Is om een sterke basis te leggen voor de groei van conversie en SEO in de toekomst

Uw website ... klaar om sneller te zijn? Doe het meteen en je zult zeker versteld staan van de resultaten!

Prompt voor illustraties: het raketbeeld snelt snel de lucht in. Op de raket is er het woord "paginasnelheid" en "conversie" als een inspiratie en aanmoediging voor lezers om te handelen.

deel

Recente blog

Vergelijk Shopify Markets VS. Multingual apps: wat te kiezen voor e-commerce export?

Wilt u over de hele wereld verkopen? Vergelijk de voordelen van de voordelen tijdens het gebruik van Shopify-markten en taalvertaling-apps. (Mulilingual Apps) om het systeem te selecteren dat het meest geschikt is voor uw winkel.

SEO -strategie voor huurwebsites voor verhuur (machines, onroerend goed, apparatuur)

Voeg klanten toe om te huren met SEO! In -diepte, SEO -strategie voor huurbedrijven, vooral van lokale SEO tot de productpagina.

Maak een geautomatiseerd rapport met N8N + Google Data Studio: bespaar een marketingtijd/week van 10 uur.

Stop met het verspillen van tijd om een te rapporteren te maken! Leer u hoe u verbinding kunt maken met N8N met Google Looker Studio (Data Studio) om een dashboard en automatische marketing te maken.