Ik heb een boutique travelsite geholpen met prestatieoptimalisaties in WordPress. In dit artikel deel ik de problemen die we tegenkwamen voor de snelheid van de site en geef ik een eenvoudige maar geavanceerde methode voor het optimaliseren van hero content. Het voorbeeld is gebaseerd op Elementor voor WordPress, maar de techniek kan worden toegepast op elke website en met de meeste Content Management Systemen.
In mijn vorige artikel heb ik uitgelegd hoe de metric Largest Contentful Paint (LCP) wordt berekend. Als je nog niet de kans hebt gehad om het te lezen, ga dan naar het artikel en begin met het lezen van de eerste alinea (vergeet niet terug te keren naar dit artikel ).
Welk probleem hebben we met hero content?
Op de meeste pagina’s op internet vind je een aantrekkelijke afbeelding in combinatie met een Call to Action (CTA), zoals in de onderstaande voorbeelden. Het bestaat uit een inhoudsgedeelte met een achtergrondafbeelding, tekst en een knop erbovenop. De eenvoudigste en meest gebruikte manier om dit voor elkaar te krijgen is door een CSS achtergrondafbeelding in te stellen. De onderstaande afbeelding toont een paar verschillende gestileerde heldensecties. Ze gebruiken allemaal een achtergrondafbeelding met knoppen of zelfs een compleet formulier of carrousel erop.
Standaard ben ik niet tegen het gebruik van achtergrondafbeeldingen met CSS, maar als het gaat om content boven de vouw wordt het een ander verhaal. Met de nieuwe Google Web Vital metrics zal dit een negatief effect hebben op de gebruikerservaring gemeten met de Largest Contentful Paint.
Een CSS achtergrondafbeelding in Elementor
De afbeelding hieronder toont de veelgebruikte instellingen die worden toegepast binnen Elementor en hoe het eruit ziet op een desktopapparaat. In sommige gevallen moet de achtergrondpositie anders zijn op basis van het type apparaat en hoe het focuspunt is gepositioneerd. In dit voorbeeld hieronder is de afbeelding voor mobiele bezoekers meer gericht op het linkerdeel van de afbeelding, terwijl voor bezoekers op een desktopapparaat de omgeving ook wordt getoond.
De standaard manier versus de geoptimaliseerde manier
De filmstrip hieronder toont de visuele voortgang van het laden van de homepage nadat we de optimalisaties hebben toegepast in vergelijking met de vorige toestand. We zijn van 4,6 naar 1 seconde gegaan!
Optimalisatiepotentieel
Er zijn een paar redenen waarom het oorspronkelijk zo lang duurde voordat de pagina visueel klaar was. De meeste redenen hebben te maken met de volgorde waarin bronnen op de pagina worden geladen. Om eerlijk te zijn draait het bij snelheidsoptimalisatie allemaal om de juiste volgorde, dus daarover in een later artikel meer.
In het geval van een CSS achtergrondafbeelding weet de browser pas dat de afbeelding moet worden getoond nadat de CSS is gedownload en gelezen door de browser. Voordat de afbeelding daadwerkelijk wordt weergegeven, heeft het (een deel van de) beschikbare bronnen (CPU) van het apparaat nodig. Afhankelijk van het type apparaat kan dit langer duren (Samsung Galaxy S8 wordt beschouwd als een middenklasse apparaat). Wanneer de CSS aan de pagina wordt toegevoegd met JavaScript (ook wel CSS-in-JS genoemd) vraag je om prestatieproblemen.
Hoe dit op te lossen voor een snelle Grootste Contentful Paint
De basis voor het snel tonen van de afbeelding is door ervoor te zorgen dat alle informatie over de afbeelding en de styling deel uitmaken van de pagina wanneer deze wordt gedownload. Door de tekst en CTA bovenop de afbeelding te leggen met html-tags kunnen we dit bereiken. Normaal gesproken is dit een meer geavanceerde vorm van optimalisatie, maar met Elementor kan dit eenvoudig worden bereikt voor een eenvoudige hero header.
Hoe hebben we het gedaan?
In Elementor hebben we twee secties gemaakt. De eerste met een afbeeldingscomponent en de tweede met de tekst en CTA-knop.
De eerste sectie met een z-index van 1 en de tweede met een z-index van 2. Daarnaast hebben we de tweede sectie ook een negatieve marge gegeven om deze bovenop de eerste sectie te plaatsen.
Nu we de CSS achtergrondafbeelding hebben verwisseld met de gewone afbeeldingscode, moesten we CSS toepassen om de afbeelding uit te rekken en de positieopties opnieuw toe te passen. Gelukkig bestond de CSS object-fit eigenschap al waarmee we precies dit konden doen.
Op basis van de optimalisatie zien we de volgende resultaten in termen van Site Speed Metrics:
Opmerking: Probeer niet om de CSS toe te voegen als aangepaste CSS in Elementor zelf, omdat dat zal worden toegepast met JavaScript wat resulteert in hetzelfde ongewenste gedrag. Voeg het in plaats daarvan toe met de WordPress Customizer zodat het in de pagina zelf wordt geïnjecteerd. Het gedrag kan variëren, afhankelijk van het CMS en de gebruikte paginabouwer. Voorbeeldcode wordt hieronder getoond:
.full-width.hero img {
margin-left: -50vw;
margin-right: -50vw;
max-width: 100vw;
position: relative;
right: 50%;
width: 100vw;
object-fit: cover;
} Het gebruik van deze techniek resulteert in het niet meer kunnen gebruiken van de standaard achtergrondopties voor boven de vouw-inhoud. Bij gebruik van deze aanpak met meerdere content editors werkt het alleen met prebuild paginasjablonen en -richtlijnen en enkele handmatige migraties van bestaande pagina’s.
Enkele tips voor het gebruik van deze techniek:
Nadat je de twee secties in Elementor hebt gemaakt, geef je ze een aansprekende naam en exporteer je ze als sjabloon voor later gebruik.
Gebruik niet de standaardoptie voor achtergrondafbeeldingen voor inhoud boven de vouw, optimaliseer voor gebruikerservaring
Wat je ook doet, gebruik geen afbeeldingscarrousel boven de vouw. Ze zijn moeilijk te optimaliseren (maar ja, het is mogelijk) en tot nu toe ben ik nog nooit bedrijven tegengekomen waar het echt werkte in termen van engagement. Meestal is het zelfs nadelig voor de conversie.
Belangrijke aandachtspunten voor gebruikerservaring en sitesnelheid:
Content moet snel zichtbaar zijn zodat je bezoekers weten of ze op de juiste plek zijn en wat ze moeten kopen. Zorg ervoor dat je je inhoud dienovereenkomstig prioriteert
Meet niet alleen de paginasnelheid, maar ook hoe je content laadt in de browser zelf met behulp van bijvoorbeeld de filmstrip zoals hierboven getoond
Optimaliseer alle activa die op de pagina worden geladen
Disclaimer: Optimaliseren voor snelheid kan verslavend worden!
Dit artikel is eerder gepubliceerd op LinkedIn.
