Sinds de introductie van Lighthouse zijn er nieuwe parameters met betrekking tot paginasnelheid ontstaan. Een van de belangrijkste van deze parameters is First Contentful Paint (FCP). In Lighthouse versie 10, van kracht vanaf juni 2024, is de impact van FCP op de algehele score 10%.
Om FCP als maatstaf te aanvaarden en te begrijpen, is het essentieel om eerst de psychologie erachter te onderzoeken. Het concept is vergelijkbaar met de spiegels geïnstalleerd in liften:
Kort samengevat: in de eerste helft van de 1900e eeuw nam het gebruik van liften in hoge gebouwen aanzienlijk toe, maar liftsystemen waren primitief vergeleken met nu. Daarom ontstond het idee om spiegels in liften te installeren, zodat de tijd die in de lift wordt doorgebracht korter lijkt.
Terugkomend op ons onderwerp: Het punt dat u perceptueel doet wachten tijdens de laadtijd wanneer u probeert toegang te krijgen tot een pagina, is FCP. De definitie van First Contentful Paint is de tijd die nodig is voordat de eerste tekst, afbeelding, niet-wit canvas, enz. voor de gebruiker wordt weergegeven. De eenheid van FCP is seconden.
In Lighthouse wordt de kleurenschaal voor FCP als volgt bepaald:
- 0-2 seconden: Groen => Snel
- 2-4 seconden: Oranje => moet worden verbeterd
- 4+ seconden: Rood => Langzaam
Volgens HTTP Archive-gegevens het aantal sites dat in aanmerking kan worden genomen snel is 25%, en 50% van de bestaande sites wordt als traag geclassificeerd.
Wat kan er gedaan worden om FCP te verbeteren?
Verminder de reactietijd van de server
Over het algemeen kan dit worden geïnterpreteerd als verbeteringen die nodig zijn aan de serverkant van de server en de software. Om de problemen op te sommen die een negatieve invloed hebben op de responstijd van de server:
- Het delen van de server, de configuratie (dwz de serverinstellingen) en de serverbronnen kunnen het probleem zijn. De capaciteit van uw server moet worden vergroot afhankelijk van uw verkeer. In sommige gevallen kunnen slecht geschreven databasequery's en zeer complexe softwarecomponenten de responstijd van de server ernstig beïnvloeden.
- Het niet gebruiken van een CDN (Content Delivery Network) kan vertragingen veroorzaken bij de toegang tot inhoud, wat gevolgen heeft voor FCP. Naarmate de inhoud groter wordt, bijvoorbeeld als er wordt geprobeerd een grote geanimeerde GIF of video aan te roepen zonder een CDN en de hoofdserver zich op een ander continent bevindt, moet u mogelijk CDN-oplossingen overwegen om FCP op te lossen.
- Het niet aanbieden van statische inhoud met een goed en consistent cachebeleid kan overbelast raken uw server onnodig als het aantal bezoekers toeneemt. Als u bijvoorbeeld uw logo niet in de langetermijncache bewaart terwijl u het op elke pagina laadt, schaadt u onnodig de responstijd van uw server.
- Onnodige pagina-omleidingen terwijl toegang tot de pagina uw FCP onnodig kan beïnvloeden.
In het verleden waren er bijvoorbeeld instellingen als deze: wanneer een gebruiker een site wilde bezoeken, was er een HTTP-naar-HTTPS-omleiding, en als het mobiel was, een HTTPS-naar-mobiel-omleiding (bijv. https:// www naar https://m), en als de pagina werd verwijderd en ergens anders naartoe werd geleid met een 301, voelde het alsof de gebruiker van bureau naar bureau werd doorgegeven in een belastingkantoor. Dit is een extreem voorbeeld voor een beter begrip, maar als u een pagina omleidt naar een andere URL met een 301-omleiding en die pagina vervolgens omleidt naar een andere met een 301-omleiding, maakt u mogelijk dezelfde onlogische opzet.
- als u gebruik geen preconnect of DNS-prefetch voorvoegsels gebruikt wanneer u verbinding maakt met uw services van derden en verbinding maakt met veel services van derden, doet u niets nuttigs voor FCP.
Verminder render-blokkerende bronnen
Ik moet toegeven dat het maanden kan duren om dit ene punt, geschreven als regelitem, aan te pakken.
Om dit te bereiken is er een oplossingsmethode waarbij alle JS, CSS en soortgelijke bronnen die de weergave van de pagina blokkeren, worden geladen nadat de pagina is gemaakt, maar het aanvankelijk zichtbare deel van de site wordt eerst geladen terwijl de site wordt geladen. Om dit te doen moeten echter alle JS-, CSS- en soortgelijke bronnen worden onderzocht en moeten de meest tijdrovende processen worden gescheiden. Bovendien helpt het gebruik van zo min mogelijk services van derden bij het optimaliseren van FCP.
