Currently set to Index
Currently set to Follow

12 tips voor het verbeteren van gebruikersgerichte snelheidsstatistieken

15 min


129
wat is een chatbot?

De grote druk van Google voor webmasters om hun sites gebruiksvriendelijker te ontwikkelen door van sitesnelheid een kernoverweging te maken, was de afgelopen jaren enorm.

Ik heb het niet alleen over de kleine boost die je krijgt van een betere sitesnelheid. Bekijk de hoeveelheid nieuwe bronnen, inhoud en hulpmiddelen die Google levert om ontwikkelaars te helpen sites sneller te maken:

  • web.dev – Handleidingen voor toegankelijkheid, best practices en snelheidoptimalisatie
  • Een betere tool voor het verkrijgen van paginasnelheid die gebruikersgerichte prestatiestatistieken gebruikt
  • WebP – een afbeeldingsindeling die kleinere bestandsgroottes biedt dan traditionele jpeg en PNG
  • Guess.js – Vooraf ophalen van pagina’s op basis van machine learning
  • Gedetailleerde handleidingen voor prestatieoptimalisatie op developers.google.com
  • AMP – Een controversieel framework voor mobiele snelheidsoptimalisatie
  • Brotli – Een verbetering van Gzip-compressie
  • PageSpeed ​​Module – Apache- en NGINX-module van Google, waarmee gebruikers automatisch CSS, JavaScript kunnen optimaliseren, afbeeldingen kunnen optimaliseren en lui kunnen laden, en nog veel meer.

Bovendien heb je ook grote spelers zoals Cloudflare die het web vooruit helpen door dit soort dingen eenvoudiger te implementeren op hun edge-servernetwerk en meestal gratis.

We bevinden ons momenteel midden in een gouden eeuw voor optimalisatie van de paginasnelheid, waar de hoeveelheid kennis die wordt gedeeld beter is dan ooit tevoren, en de implementatie wordt eenvoudiger.

En waarom zou je erom geven?

De impact van de juiste optimalisatie van de paginasnelheid op bedrijven is enorm. Recente gegevens suggereren dat als u de laadtijden van pagina’s hebt verbeterd van 5,7 seconden tot 2,4 seconden, uw conversieratio meer dan verdrievoudigd kan zijn.

via deze tool van Google. Nadat het uw site heeft geëvalueerd, is er een handige analyse-tool voor concurrenten en een tool voor het genereren van inkomsten, die de potentiële omzetstijging schat als de snelheid zou worden verbeterd.

Dus, als je de basis hebt gedaan als het gaat om sitesnelheidoptimalisatie (Gzip-compressie, browsercaching, fatsoenlijke hosting, enz.), En je bent op zoek naar wat meer geavanceerde tips over hoe je de site-snelheid precies kunt verbeteren op de juiste plaats komen.

Wat ik ga laten zien, zijn nog een paar manieren waarop u buiten de basis kunt profiteren van de voordelen van sitesnelheidoptimalisatie, met een focus op het verbeteren van gebruikersgerichte prestatiestatistieken en het kritieke weergavepad.

Wat zijn gebruikersgerichte prestatiestatistieken?

Ik zou het ten zeerste aanbevelen om dit artikel van Google over gebruikersgerichte prestatiestatistieken te lezen. De statistieken waarop we ons zullen concentreren, zijn die van zowel de vernieuwde PageSpeed ​​Insights-tool als de Lighthouse-tool van Google .

Een gids door Varvy

  • Een gids van Google
  • Het is heel belangrijk bij het bekijken van sitesnelheidoptimalisatie dat dit het kritieke weergavepad is waarop u zich richt. Als u de laadtijd van de pagina optimaliseert, in plaats van gebruikersgerichte statistieken gemeten door tools zoals Lighthouse, doet u het helemaal verkeerd!

    Een voorbeeld, als u een laadtijd van bijvoorbeeld zes seconden hebt, maar de gebruiker de pagina binnen één seconde kan zien en gebruiken, is dat niet zo erg.

    Als u een laadtijd van zes seconden hebt, maar de gebruiker geen inhoud kan zien of met de pagina kan communiceren totdat vijf seconden zijn verstreken, is dat vanuit het perspectief van een gebruiker vrij slecht.

    Dat is een mooie vergelijking, maar je snapt het wel. Door het kritieke weergavepad te optimaliseren, concentreert u zich op de waargenomen laadtijden, dat is alles wat echt belangrijk is voor een gebruiker.

    Nu voor enkele tips over het verbeteren van de laadtijden van pagina’s.

    Bestandsoptimalisatie

    Verwijder bestanden die renderen blokkeren

    Het verwijderen van bestanden met renderblokkering moet een van de beste dingen zijn die u kunt doen om het kritieke renderingpad en belangrijke statistieken, zoals uw First Contentful Paint (FCP), te verbeteren. Als er één ding is dat je wilt verbeteren, plaats dit dan bovenaan je lijst!

    Wat betekent renderblokkering?

    Renderblokkering verwijst naar wanneer extern gekoppelde JS- en CSS-bestanden voorkomen dat de browser de HTML-analyse beëindigt en de gebruiker de inhoud van de pagina laat zien.

    Wanneer een browser de HTML parseert en CSS- en JS-bestanden vindt die extern zijn gekoppeld, stopt deze met het parseren van HTML en begint deze bestanden aan te vragen, te ontvangen, te downloaden en vervolgens te parseren. Totdat deze bestanden zijn gedownload en ontleed, blijft de pagina leeg.

    Dit kan behoorlijk wat vertragingen veroorzaken, vooral als de downloadgroottes van de CSS of JS groter zijn.

    Er zijn drie belangrijke stappen om dit hieronder op te lossen:

    1. Inline kritieke CSS

    Het eerste wat u wilt doen om dit op te lossen, is om elke kritieke CSS in de <kop> van de pagina te inline. Zoals u misschien al geraden heeft, is kritieke CSS de CSS die moet worden weergegeven boven de vouwinhoud aan de gebruiker.

    Wanneer deze CSS helemaal bovenaan de pagina in de <kop> staat, zal de browser deze ontleden en vervolgens toepassen op alle HTML die wordt gevonden voordat een bestand wordt bereikt dat de weergave blokkeert.

    Lees meer op web.dev

    2. Stel niet-kritieke CSS uit

    Nu kritieke CSS wordt geladen, moeten we elke CSS uitstellen die niet vereist is voor weergave boven de vouwinhoud.

    Om dit te doen, moet u CSS-bestanden op een iets andere manier laden dan normaal met behulp van het kenmerk rel = preload zoals hieronder te zien.

    <link rel="preload" href="styles.css" as="style" onload="this.onload=null;this.rel='stylesheet'"> <noscript><link rel="stylesheet" href="styles.css"></noscript>

    Door de voorbelasting wordt CSS asynchroon geladen en door het kenmerk onload wordt de CSS geladen zodra de pagina is geladen.

    De noscript-tag is vereist om ervoor te zorgen dat CSS nog steeds wordt geladen voor browsers die geen JavaScript uitvoeren.

    WAARSCHUWING: doe dit niet tenzij u eerst uw kritieke CSS hebt aangegeven. Als je dat niet doet, krijg je een FOUT (flits van inhoud zonder stijl)

    Bonustip: voor browsers die het preload-kenmerk nog niet ondersteunen, kunt u JS polyfill uitvoeren met behulp van de loadCSS-bibliotheek . Browserondersteuning verbetert , maar met name ondersteunt Firefox dit momenteel nog niet.

    3. Stel niet-kritieke JS uit

    Vervolgens moeten we JS repareren die voorkomt dat inhoud door de browser wordt weergegeven. Het standaardgedrag van een browser die JS laadt, ziet er als volgt uit:

    <script defer src="example-script.js">

    Als er een klein JS-bestand is dat essentieel is voor het laden van de pagina, overweeg dan om het op dezelfde manier in te voegen als wat u deed voor kritieke CSS.

    4. Verplaats bestanden die het renderen blokkeren naar het einde van de tag

    Om er nu voor te zorgen dat extern gekoppelde CSS-bestanden de weergave van inhoud niet blokkeren, verplaatst u uw niet-kritieke CSS-bestanden naar het einde van de pagina net voor het sluiten van de tag </body>.

    Ik raad ook aan dit te doen voor uw uitgestelde JS-bestanden. Hoewel dit geen verschil zou moeten maken voor moderne browsers die het uitstelkenmerk ondersteunen, ondersteunen sommige oudere browsers dit niet en kunnen daarom de JS op een renderblokkerende manier laden.

    5. Verwijder ongebruikte CSS

    Een voor de hand liggende manier om de bestandsoptimalisatie te verbeteren, is alles te verwijderen dat nooit daadwerkelijk wordt gebruikt. CSS is een van de belangrijkste boosdoeners hiervoor waarbij CSS-bestanden wereldwijd op de site worden geladen, hoewel de CSS op die pagina mogelijk niet nodig is.

    Op een e-commercesite is CSS bijvoorbeeld niet nodig voor de betaalpagina die op de startpagina wordt geladen.

    Hoe ongebruikte CSS te vinden?

    Persoonlijk ben ik een fan van Chrome Dev Tools om ongebruikte bytes in bestanden te vinden. Om dit te doen, opent u Chrome Dev Tools (CMD + ALT + I op Mac) en gaat u naar Dekkingsrapport.

    Ongebruikte CSS

  • Zuiver CSS
  • UnCSS
  • Let op: dit moet per pagina worden uitgevoerd en met veel testen worden gebruikt. De meeste tools geven u schone CSS-bestanden die alleen van toepassing zijn op wat het kon vinden in de DOM wanneer het werd aangevinkt. Als u na die tijd extra HTML in de DOM injecteert, met zoiets als een pop-up, zal de CSS om die pop-up op te maken zich niet in het schone CSS-bestand bevinden.

    6. Optimaliseer lettertypepictogrammen

    Pakketten met lettertypepictogrammen hebben het ontwerpers en ontwikkelaars aanzienlijk gemakkelijker gemaakt om leven te geven aan hun sites zonder fantastische iconografie.

    Vanwege de manier waarop deze pictogrammen worden geleverd vanuit populaire bibliotheken, kunnen ze echter een aanzienlijk aantal ongebruikte middelen aan een site toevoegen. De populaire pictogrambibliotheek FontAwesome kan bijvoorbeeld ongeveer 300 kb toevoegen aan de pagina wanneer Gzipped en toegevoegd aan een pagina met de bijbehorende JavaScript-bestanden. Voor alleen het CSS-bestand en de lettertypebestanden kijkt u dichter bij 100 kb.

    Er zijn echter manieren om dit te omzeilen!

    Mijn persoonlijke favoriete oplossing is het maken van eigen lettertypebestanden met een service zoals Fontello of Fontastic . Met deze services kunt u eenvoudig uw eigen pictogramlettertypebestanden maken door de gewenste SVG- of weblettertypebestanden naar de site te slepen, de lettertypebestanden te genereren en vervolgens naar uw eigen site te uploaden.

    Nadat u dit hebt gedaan, gebruikt u alleen de lettertypepictogrammen die uw site daadwerkelijk gebruikt, wat betekent dat gebruikers sneller kunnen laden.

    7. Optimaliseer uw weblettertypen

    Aangepaste lettertypen op internet worden steeds populairder. Dankzij gratis lettertypebibliotheken zoals Google Fonts en betaalde opties zoals Adobe Fonts (voorheen Typekit), wordt een site er geweldig uit laten zien met je eigen typografie veel eenvoudiger.

    Helaas kunnen lettertypen het kritieke weergavepad verpesten als ze langzaam worden geladen, vooral als u ze van een derde partij laadt, wat langzamer kan zijn dan uw eigen server.

    Je kunt een aantal lelijke scenario’s krijgen, zoals FOUT (flits van tekst zonder stijl) of FOIT (flits van onzichtbare tekst). Hier wordt voordat de browser het lettertype volledig laadt, ofwel de standaardlettertypen van uw back-upsysteem weergegeven, zodat de tekst zonder stijl blijft, of wacht tot het downloaden van het lettertype is voltooid voordat er iets wordt weergegeven.

    Met FOIT specifiek, als je denkt aan het kritieke weergavepad, heb je misschien een probleem ontdekt.

    Als we wachten tot een lettertype volledig is gedownload voordat we het aan gebruikers laten zien, nemen de waargenomen laadtijden aanzienlijk toe, omdat de gebruiker een bijna lege pagina ziet totdat deze klaar is met laden.

    Met FOUT is het weergeven van tekst zonder stijl ook niet geweldig, maar de gebruiker ziet tenminste iets! Elke browser kiest standaard tussen FOUT of FOIT, dit zijn de verschillen:

    • Chrome verbergt tekst maximaal drie seconden. Gebruikt vervolgens een systeemlettertype totdat het klaar is.
    • Firefox  verbergt tekst gedurende maximaal drie seconden. Gebruikt vervolgens een systeemlettertype totdat het klaar is.
    • Edge gebruikt een systeem en verwisselt vervolgens de lettertypen wanneer de aangepaste gereed is.
    • Safari  verbergt alle tekst op de pagina totdat het aangepaste lettertype gereed is.

    Gelukkig zijn er manieren om het standaardgedrag te wijzigen en ook je weblettertypen te optimaliseren terwijl je bezig bent.

    Een geweldige gids voor het optimaliseren van weblettertypen vindt u hier . Maar om samen te vatten wat u zou moeten doen:

    • Gebruik de eigenschap font-display en stel deze in op swap. Dit geeft de browser de opdracht om meteen een stijlloos lettertype weer te geven, waardoor het kritieke weergavepad wordt verbeterd. Lees hier meer .
    • Laad uw lettertypen vooraf in de <kop> van de pagina helemaal bovenaan . Dit vertelt de browser om het lettertype meteen te laden, waardoor de gebruiker minder stijlloze lettertypen ziet.
    • Verschillende browsers houden van verschillende lettertypen, dus we moeten alle lettertypen vermelden, maar vervolgens hints geven over bronnen met behulp van het formaatkenmerk .
    • Als u een CDN gebruikt en overweegt om uw lettertypen zelf te hosten, bepaalt u zelf hoe snel ze worden geladen en worden ze niet beïnvloed door een door derden gehost lettertype dat mogelijk trager is. Test dit zwaar, gebruik vuurtorenrapporten of het netwerktabblad van Chrome Dev-tools om te zien hoe dit het laden beïnvloedt.
    • Als u op Cloudflare werkt, kunt u overwegen een Cloudflare-medewerker te gebruiken om automatisch Google Fonts automatisch te hosten .
    • Als je WordPress gebruikt,  bekijk dan deze plug-in . Het zal Google-lettertypen zelf hosten, de lettertype-weergave-eigenschap vooraf laden, opmaken en implementeren. Gemakkelijk!

    8. Tips voor beeldoptimalisatie

    WebP

    Afbeeldingen zijn een van de dingen die de paginagrootte het meest beïnvloeden. Het verkleinen van de totale paginagrootte is een geweldige manier om het kritieke weergavepad te optimaliseren.

    Helaas hebben afbeeldingen met hoge resolutie en grote banners altijd de paginasnelheid gedood, vooral op mobiele apparaten, waar u mogelijk een langzamere 3G- of 4G-verbinding gebruikt.

    Voer WebP-afbeeldingen in, ontwikkeld door Google WebP, het vermindert de bestandsgrootte van afbeeldingen met ongeveer 25 – 35% in ondersteunde browsers, hoewel ik persoonlijk meer heb gezien. Als u een e-commerce-site met veel afbeeldingen heeft, is het logisch dit te implementeren, omdat hierdoor het gebruik van de bandbreedte van de server wordt verminderd en de site sneller wordt geladen.

    Google heeft een lijst van WebP conversie bibliotheken hier die u kunt uitvoeren op uw site te zetten afbeeldingen naar WebP, dan kunt u ook gebruik maken van de Node.js bibliotheek besproken hier .

    Het enige probleem met WebP is browserondersteuning . Voor browsers die dit nog niet ondersteunen, als u WebP-afbeeldingen voor de hele site begint te gebruiken, krijgt iedereen die een niet-ondersteunde browser heeft lege afbeeldingen … niet ideaal!

    De oplossing? De tag <picture> ! Nogmaals, in het geweldige artikel over CSS-trucs kunt u lezen hoe u deze tag kunt gebruiken om browsers te ondersteunen die WebP wel en niet ondersteunen.

    SVG

    SVG is een schaalbaar vectorformaat (wat betekent dat de kwaliteit hetzelfde blijft ongeacht de grootte), het is ook zeer prestatievriendelijk en u kunt het animeren!

    Met het SVG-formaat kunt u verwachten dat bestandsdiagrammen, logo’s en illustraties aanzienlijk kleiner zijn; je kunt er hier meer over lezen . Gezien de ontwerptrend van aangepaste illustraties, moet SVG iets zijn dat u in uw webontwikkelingstoolkit heeft.

    Wil je de kracht van SVG zien? Bezoek de Stripe-site ; ze gebruiken ze overal.

    Bekijk enkele van uw illustraties, logo’s en diagrammen. Als ze niet in het SVG-formaat zijn, laat ze dan veranderen om de paginagrootte te verkleinen.

    Lazy afbeeldingen laden

    Dit is waarschijnlijk meer voor de hand liggend en iets wat veel sites nu doen (en Chrome zal dit binnenkort standaard ondersteunen !).

    Gezien de grootte van de afbeeldingen, is het logisch om ze alleen te laden als dat nodig is, bijvoorbeeld wanneer de afbeelding wordt weergegeven in de browserveview.

    Lui laden doet precies dat. Bij het laden van de pagina worden alleen de afbeeldingen bovenaan de pagina geladen. Zodra de gebruiker schuift en meer afbeeldingen in beeld komen, worden deze geladen. Eenvoudig en effectief! Lees de handleiding van Google en gebruik ook een framework dat de Intersection Observer API gebruikt .

    Het is een meer prestatievriendelijke manier van lui laden, en het heeft de toegevoegde bonus dat het wordt ondersteund door de nieuwe bijgewerkte versie van Googlebot .

    9. Kies een betere DNS-oplossing

    Het verbeteren van de DNS-opzoektijden op uw eigen site is een geweldige manier om de laadtijden van alle gebruikersgerichte snelheidsstatistieken te verbeteren, omdat dit het eerste is dat moet gebeuren wanneer de pagina wordt geladen.

    Als u de standaard-DNS gebruikt die u van uw hostingprovider hebt gekregen, loopt u een geweldige kans mis om het kritieke weergavepad te verbeteren.

    Mijn standaardkeuze voor DNS-beheer is Cloudflare. Het is de snelste DNS-provider die er is, het heeft een geweldig beheerdersgebied en is gratis. Als je hulp wilt bij het kiezen van een betere DNS-provider, neem dan een kijkje op DNSPerf , het geeft je enkele inzichten die sneller zijn.

    eerste betekenisvolle verf net zoveel vertraagd .

    Deze aanbeveling is vrij eenvoudig, vermijd het animeren van belangrijke inhoud boven de vouw. Gebruikers zullen de inhoud liever snel zien dan een chique animatie die snel vervelend zal worden.

    11. Resource prefetching

    Wat is prefetching?

    Vooraf ophalen is een manier om een ​​browser een hint te geven over bronnen die in de toekomst kunnen worden gebruikt. Wanneer een resource vooraf wordt opgehaald, slaat de browser de inhoud van de resource op in een lokale cache. Zodra de gebruiker de resource aanvraagt, wordt deze vanuit de browsercache bediend, waardoor het laden en weergeven van pagina’s wordt versneld.

    We hebben eerder een prefetching-methode genoemd (vooraf laden genoemd) bij het bespreken van optimalisatie van de lettertypebelasting.

    Waar kan het voor worden gebruikt?

    Prefetching kan worden gebruikt voor:

    • Een DNS-zoekopdracht uitvoeren
    • Hele webpagina’s
    • JavaScript-bestanden
    • CSS-bestanden
    • Mediabestanden (lettertypen, audio, video, afbeeldingen, enz.)

    Er zijn meerdere verschillende manieren om bronnen vooraf op te halen. Hier is een beetje een overzicht van de verschillen tussen hen:

    • Preresolve Voert de DNS-lookup uit voor de volgende pagina
    • Preconnect Zoals hierboven, maar het voert ook de TCP-handshake en de optionele TLS-onderhandeling uit.
    • Prefetch voert ook het HTTP-verzoek uit, handig voor afbeeldingen en andere bestanden, omdat we bijvoorbeeld de browser kunnen instrueren dat een bepaalde afbeelding vroeg op de huidige pagina moet worden geladen
    • Prerender Met Prerendering kunt u een document en alle bronnen in een document laden. Niet te verwarren met prerender.io , een heel ander type prerendering!

    hier .

    Prerender gebruiken voor directe laadtijden

    In dit gedeelte gaan we ons specifiek richten op het implementeren van prerender, hier is een voorbeeld van hoe de code eruit ziet die u nodig hebt om de <kop> van uw site toe te voegen:

    <link rel="prerender" href="https://www.example.co.uk/example1">

    Prerender is een geweldig hulpmiddel om in uw toolbox voor het optimaliseren van de snelheid van uw site te hebben, omdat u het laden van pagina’s bijna onmiddellijk voor een gebruiker kunt laten lijken. Dit gebeurt omdat de browser al alle middelen volledig zou hebben geladen om de pagina te laden voordat de gebruiker ernaartoe is gegaan.

    Het enige wat u hoeft te doen is voorspellen op welke pagina ze zullen klikken en vervolgens naar die pagina gaan kijken voordat ze erop hebben geklikt.

    Hoewel dit uiteraard geweldig zal zijn voor laadtijden, moet deze tool met voorzichtigheid worden gebruikt. Als u veel URL’s begint te preren, verspilt u snel het gegevensplan van een gebruiker en verspilt u tegelijkertijd serverbronnen, vooral als de gebruiker zelfs nooit naar de URL heeft genavigeerd.

    Er zijn een paar verschillende manieren waarop u een prerender-strategie kunt implementeren:

    • Pre -prefetching ‘just-in-time’: hier begint u een document voor te lezen wanneer de gebruiker over een link zweeft net voordat ze klikken. Er is ongeveer 300ms – 400ms tussen wanneer een gebruiker op een link zweeft en wanneer deze er daadwerkelijk op klikt. Dus wat u kunt doen, is de volgende URL beginnen voorvertonen terwijl de gebruiker zweeft. U kunt dan gebruikersgerichte statistieken met een kleine hoeveelheid verbeteren en, als u andere optimalisatie hebt gedaan, uw pagina-laadtijden direct laten aanvoelen.
    • Voorspellende prefetching – dit is waar u historische gegevens gebruikt waarop gebruikers na het bezoeken van een pagina vaak klikken. U kunt bijvoorbeeld Google Analytics-gegevens gebruiken om dit te doen. Op die manier kunnen we, als een gebruiker op de startpagina komt en vervolgens meestal naar een specifieke categoriepagina gaat, deze op de achtergrond laden.
    • Vooraf ophalen bij inactiviteit –  Wanneer de viewport in de browser van een gebruiker inactief is, kunt u alle gekoppelde URL’s in de viewport van de gebruiker vooraf ophalen.

    Met dank aan Addy Osmani voor zijn voorstel over voorspellend ophalen hier .

    Gelukkig zijn er een paar verschillende tools die u kunt gebruiken om snel gebruik te maken van het prerender-kenmerk.

    Implementeer Just-in-time Preloading met Instant.page

    U kunt heel eenvoudig een just-in-time voorlaadstrategie implementeren met een tool genaamd instant.page . Installatie is net zo eenvoudig als het toevoegen van het script aan uw pagina.

    Voorspellende prefetching met Guess.js

    Guess.js implementeert voorspellende prefetching door Google Analytics-gegevens te gebruiken. Let op, dit is een alfaproduct, dus gebruik het misschien nog niet in een productieomgeving.

    Implementeer Idle Prefetching met Quicklink

    Er is nog een geweldige gratis tool van het team bij Google genaamd Quicklink . Nogmaals, de installatie is snel en eenvoudig.

    Quicklink probeert om navigatie naar volgende pagina’s sneller te laten laden. Het:

    • Detecteert links binnen de viewport (met behulp van Intersection Observer)
    • Wacht tot de browser inactief is (met requestIdleCallback)
    • Controleert of de gebruiker geen langzame verbinding heeft (met behulp van navigator.connection.effectiveType) of gegevensbesparing heeft ingeschakeld (met behulp van navigator.connection.saveData)
    • Stelt URL’s naar de koppelingen vooraf in (met <link rel = prefetch> of XHR). Biedt enige controle over de verzoekprioriteit (kan overschakelen naar fetch () indien ondersteund)

    Persoonlijk vind ik deze methode voor het implementeren van prefetching erg leuk, omdat het attent is voor het netwerk van een gebruiker en ook of ze gegevensbesparing hebben ingeschakeld.

    Er is ook een handige WordPress-plug- in om dit op uw site te laten werken, eenvoudig te installeren en u bent klaar om te beginnen!

    12. Cloudflare Edge Caching

    Ik ben een grote fan van Cloudflare, maar een ding dat je misschien opvalt wanneer je de CDN implementeert, is dat je TTFB (tijd tot eerste byte) daadwerkelijk daalt.

    Dit komt doordat Cloudflare standaard geen HTML op de rand van de cache plaatst. Elke keer dat een gebruiker een pagina op uw site bezoekt, vraagt ​​Cloudflare uw server om de HTML van de pagina.

    eerste betekenisvolle verf en eerste inhoudelijke verf , die ook zullen worden uitgesteld.

    Deze situatie wordt nog erger als u geen enkele vorm van HTML / paginacaching op uw oorspronkelijke server implementeert.

    Cloudflare ondersteunt echter HTML-caching (of paginacaching ) met de paginaregel cache alles . Zodra je dit hebt gedaan, begint Cloudflare de reactie-HTML van de oorsprong in de cache te plaatsen totdat de cache is gewist, waardoor de latentie tussen de oorsprong en Cloudflare volledig wordt verwijderd.

    hier . Het slechte nieuws is dat dit een bedrijfsplanfunctie is, dus het kost £ 200 per maand om het te hebben (samen met andere geweldige functies).

    Hieromheen werken met een Cloudflare-medewerker

    U kunt dit echter omzeilen door Cloudflare-medewerkers te gebruiken .

    Een voorbeeld hiervan vindt u hier . Het wordt ook geleverd met een handige WordPress-plug- in om ondersteuning toe te voegen voor HTTP-headers die de werknemer gebruikt om te bepalen of de cache moet worden omzeild of niet.

    Eenmaal geïmplementeerd, zou u aanzienlijke verbeteringen in laadtijden moeten zien, vooral naast enkele van de in dit artikel genoemde kritische rendering path-optimalisaties.

    Samenvatting

    Hopelijk zou je nu wat van het bovenstaande moeten kunnen wegnemen, advies kunnen geven en het op je site kunnen implementeren om de snelheid en je conversie te verbeteren. Hoewel er veel dingen zijn die u kunt doen om de sitesnelheid buiten de basis te verbeteren nadat u deze hebt geïmplementeerd en sommige van de bovenstaande, zou u aanzienlijk hogere snelheden moeten zien.


    0 Comments

    Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *

    Choose A Format
    Personality quiz
    Series of questions that intends to reveal something about the personality
    Trivia quiz
    Series of questions with right and wrong answers that intends to check knowledge
    Poll
    Voting to make decisions or determine opinions
    Story
    Formatted Text with Embeds and Visuals
    List
    The Classic Internet Listicles
    Countdown
    The Classic Internet Countdowns
    Open List
    Submit your own item and vote up for the best submission
    Ranked List
    Upvote or downvote to decide the best list item
    Meme
    Upload your own images to make custom memes
    Video
    Youtube, Vimeo or Vine Embeds
    Audio
    Soundcloud or Mixcloud Embeds
    Image
    Photo or GIF
    Gif
    GIF format