Gebruik PageSpeed ​​Insights om de kwaliteit van een Landing Page te verbeteren

Geschreven door

Paloma García

UX · 12 / 12 / 2019

Gebruikers stellen steeds hogere eisen, dus we moeten snelle en bevredigende ervaringen bieden. Daarom is het belangrijk om de laadtijd van onze landing page te optimaliseren . En we moeten heel kieskeurig en veeleisend zijn met onze site op mobiele apparaten.

Volgens recente studies is de gemiddelde laadtijd van een pagina op een mobiel apparaat 22 seconden. Rekening houdend met het feit dat meer dan 50% van de bezoekers van een mobiele website een website verlaat die meer dan 3 seconden nodig heeft om te laden, wordt dit als een probleem beschouwd. Daarom moet onze site de gebruiker binnen die marge overtuigen en hem niet laten wachten.

We nemen hieronder een grafiek op die de waarschijnlijkheid weergeeft dat een pagina op mobiele apparaten wordt verlaten op basis van de laadtijd van de site.

 

Probabilidad de abandono en función del tiempo de carga

Waarschijnlijkheid van verlaten bezoekers afhankelijk van de laadtijd. Bron: Google / SOASTA-studie

Het is geen geheim dat kopers van een e-commerce of bezoekers van een website in toenemende mate snellere ervaringen eisen. Als deze ervaringen te langzaam of te ingewikkeld zijn, kunnen ze de site of het winkelwagentje verlaten.

Vervolgens laten we u kennismaken met de PageSpeed ​​Insights tool en leggen we de nadruk op de basispunten om de user experience op onze landing page verbeteren

We hebben al in andere posts gesproken over hoe de ervaring met het gebruik van de landing page van een AdWords advertentie de kwaliteitsscore en daarmee de gemiddelde positie heeft beïnvloed. In deze blogpost hebben we bijvoorbeeld een kleine truc gegeven om de relevantie van de landing page te vergroten.

Hoe wordt Google PageSpeed ​​Insights gebruikt en waar is het voor?

PageSpeed is een Google Developers tool die de inhoud van een website analyseert, aspecten meet met betrekking tot de laadtijd en de ervaring van het gebruik van een webpagina en op basis van de resultaten van die meting een score (op 100) en enkele tips voor verbetering.

De tool biedt ons twee verschillende metingen: voor mobiel en computer. Verschillende schalen, verschillende metingen en daarom verschillende resultaten.

Het is zeer eenvoudig te gebruiken:

  1. Krijg toegang tot PageSpeed Insights
  2. Geef de URL van de pagina die u wilt meten
  3. Klik op Analyseren en wachten op de resultaten

Utilizar Google PageSpeed Insights es muy sencillo

Hoe zijn de resultaten van een PageSpeed Insights analyse te interpreteren ?

Eerst zullen we zien dat de resultaten verschillend zijn voor mobiel en computer. Het gebruikt verschillende criteria, dus de analyse is anders.

De verschillende gemeten factoren kunnen deze 3 kwalificaties verkrijgen:

Los posibles resultados del análisis de Google PageSpeed Insights

Daarom kunnen we de verschillende soorten kwalificaties observeren:

  • Goedgekeurde regels.
  • Geen gemiddelde impact gehad. Elementen die u kunt overwegen te corrigeren. Het oplossen zal geen groot verschil maken.
  • Mislukt en heeft een aanzienlijk negatief effect. Elementen die u moet corrigeren. Het oplossen hiervan zou aanzienlijk zijn.

Snelheids statistieken in PageSpeed ​​Insights

De tool identificeert aspecten met betrekking tot de laadtijd van de pagina. De waarheid is dat het behoorlijk veeleisend is met de laadsnelheid, vooral in mobiel.

Vista de resultados PageSpeed Insights desktop

Volgens alle door de applicatie geanalyseerde aspecten en de beoordeling krijgt u een cijfer (van de 100).

Dit zijn enkele van de analyse statistieken die deze tool meet:

  • Data Field:

Het biedt ons een eerste schatting van de laadtijd van het web gedurende de laatste 30 dagen in vergelijking met de prestaties van andere websites die zijn opgenomen in het Chrome User Experience Report.

De First Content Rendering (FCP), de tijd die de pagina nodig heeft om de eerste afbeelding of tekst van de website weer te geven en de Latency van de eerste interactie (FID) worden in aanmerking genomen voor dit deel van de analyse. Om het samen te vatten toont het ons de totale laadtijd totdat onze gebruiker kan beginnen met interactie met onze inhoud of elementen op de website.

De resultaten worden door de tool in een kleurenschaal weergegeven en geven aan hoe het web is geladen voor de verschillende gebruikers van wie de gegevens de afgelopen 30 dagen zijn vastgelegd in het Chrome User Experience Report.

Het toont het gemiddelde van alle FCP en FID bovenaan. Als uw pagina binnen het gemiddelde ligt in vergelijking met de rest van de pagina’s, wordt uw score oranje. Als het erboven ligt, wordt het in groen weergegeven en betekent dit dat het sneller is dan gemiddeld, en als het eronder ligt, wordt het in rood weergegeven.

Als het Chrome User Experience Report niet voldoende real-time web speed data bevat, wordt dit veld leeg weergegeven.

  • Experiment gegevens:

De tool simuleert een laadtest op een mobiel apparaat met 3G-verbinding en analyseert een reeks statistieken die zijn gekoppeld aan verschillende laadtijden van een site, samen met de mogelijkheid van gebruikersinteractie gedurende het proces. De statistieken zijn de volgende:

First Content Rendering of FCP.  Dit is de tijd die de website nodig heeft om de eerste afbeelding of inhoud te laden.

Eerste significante weergave. Dit is de tijd die de website nodig heeft om de hoofdinhoud met afbeeldingen en tekst te laden.

Snelheidsindex Dit is hoe snel de inhoudsdoelen worden gevuld. 

Eerste inactieve tijd en de CPU. Dit is de tijd die verstrijkt totdat de belangrijkste componenten of elementen van het web minimaal interactief zijn.

Tijd totdat het interactief is. Dit is de tijd die moet verstrijken totdat de pagina 100% interactief is.

Estimated Entry Latency (geschatte invoer latentie) of FID. Dit is de tijd die de componenten nodig hebben om te reageren wanneer de gebruiker er gedurende de 5 seconden van het laden op reageert. Met waarden groter dan 50 ms hebben gebruikers de indruk dat de website tijd nodig heeft om te laden.

  • Mogelijkheden:

In dit gedeelte worden de aanbevelingen weergegeven die door de tool zijn voorgesteld om de prestatiestatistieken van het web te optimaliseren. Als dergelijke verbeteringen worden opgenomen, zou een schatting van de snelheid worden gemaakt.
Dit zijn enkele voorbeelden:

    • Het laden van afbeeldingen die niet op het scherm verschijnen
    • Uitstellen reactietijden van de server (TTFB)
    • Verwijderen van bronnen die de weergave blokkeren
    • Gebruik een voldoende afbeeldingsgrootte
    • Vermijd pagina omleidingen
    • Publiceer afbeeldingen met de volgende generatie formaten
    • Stel het laden van CSS uit
  • Diagnose:

De tool geeft ons ook een aantal meer technische aanbevelingen die voornamelijk zijn bedoeld voor ontwikkelaars. Enkele van de suggesties die ons worden voorgesteld, zijn onder meer het verminderen van het aantal knooppunten in het web of de JS-runtime.

  • Goedgekeurde controles:

Stelt een samenvatting samen van de tests die de website met succes heeft doorstaan.

Het is allemaal vooral interessant, omdat het de bruikbaarheid van de pagina beïnvloedt, lees dit artikel op “De inhoud van de bovenste helft van de pagina verkleinen“.

Hoe gebruik je PageSpeed ​​Insights om de kwaliteit van een Landing Page te verbeteren?

In een wereld waar meer en meer gebruikers meer informatie ontvangen en er minder tijd aan besteden, is de laadtijd van een webpagina essentieel. En op mobiele toestellen is het nog relevanter als we weten dat het gebruik van mobiele apparaten blijft toenemen ten opzichte van andere soorten apparaten.

Daarom is de ervaring die u aan uw gebruikers biedt essentieel, en dit omvat de laadsnelheid van uw site. Als u de gebruikers op uw website wilt houden en niet wilt wegjagen, moet u aandacht besteden aan alle hierboven genoemde details en een snellere website maken, die vriendelijker is en over het algemeen een betere user experience biedt. 

En als u deze website gebruikt als de bestemmings-URL van een AdWords advertentie, kan een slechte bruikbaarheid de kwaliteit van uw advertentie beïnvloeden, de gemiddelde positie verlagen en de resultaten van uw campagne verslechteren.

Dus als u tussen de 3 en 10 seconden hebt om uw potentiële klant te overtuigen, moet u zich ervan bewust zijn dat elke seconde telt. Een betere beoordeling op PageSpeed ​​betekent een beter antwoord op de gebruiker.

Hoe kunnen we onze score verbeteren en daarmee de laadsnelheid?

Vista de resultados PageSpeed Insights móvil

Hieronder worden enkele aanbevelingen weergegeven waarmee we de Google PageSpeed ​​Insights score kunnen verbeteren: 

  • Het laden van afbeeldingen, video’s of multimedia-inhoud uitstellen die eerst niet zichtbaar is.

Met een progressieve lading van de verschillende elementen die we eerder hebben genoemd, slagen we erin om de initiële laadtijd te verminderen, omdat de elementen worden weergegeven afhankelijk van het gebied van het scherm waarin de gebruiker zich bevindt en dat het noodzakelijk is voor deze interactie met de website. Met Lazy Load Technology kunnen we het bereiken.

  • Stel bronnen uit of verwijder ze die het laden van het web blokkeren.

  • Vermijd onnodige omleidingen. Dit kan ook de oplaadtijd verkorten.

  • Verwijder ongebruikte CSS. Het verwijderen van alle regels code waarmee ze worden gebruikt, verbetert ook de snelheid van onze site. De ongebruikte CSS wordt weerspiegeld in het gedeelte Coverage van de Chrome-console.

  • Volgende generatie afbeeldingsformaten, zoals JPEG 2000, JPEG XR of WebP.

Elk van deze formaten wordt sneller gedownload dan conventionele PNG- of JPEG-formaten. Het probleem dat we tegenkomen, is dat dit soort indelingen niet compatibel zijn met alle browsers en dat het noodzakelijk is om hun evolutie te zien om te zien of we ze uiteindelijk in onze websites moeten opnemen.

Andere tools: Google Test My Site

Andere tools die ons kunnen helpen de laadtijd van onze website te verbeteren, met name op mobiele apparaten, meet de Google Test My Site tool de snelheid van alle pagina’s van uw website op basis van verschillende gegevens van over de hele wereld en in vergelijking met andere bedrijven in de sector die zijn verzameld in een Chrome User Experience Report.

Vista de Test My Site

Wanneer je Google PageSpeed ​​Insights gebruikt of andere tools, moet je er rekening mee houden dat het niets vanzelf oplost. Houd er rekening mee dat wij het zijn die de acties uitvoeren. Als u het echter als een gids gebruikt, voldoet u aan uw suggesties en krijgt u betere beoordelingen, zodat we onze gebruikers beter en sneller kunnen bereiken. 

Digital Menta

UX · 17 / 12 / 2019

Bestemmingspagina's strategieën voor rekrutering in de onderwijs sector en dergelijke

bestemmingspaginas-strategieen-voor-rekrutering-in-de-onderwijs-sector-en-dergelijke Wanneer een student recruitment strategie is gedefinieerd en geïmplementeerd in digitale kanalen, een van de fundamentele beslissingen die kunnen betekenen succes of de doorslaande falen van campagnes is de landing pages strategie waarvoor te kiezen. Er zijn verschillende opties, variërend van het creëren van unieke landing pages tot het gebruik van primaire corporate websites. […]

Paloma García

UX · 24 / 10 / 2019

Wat is CRO? Beschrijving en sleutelconcepten

En este post explicamos qué es CRO (Conversion Rate Optimization) y los conceptos clave relacionados con este conjunto de técnicas que nos ayudan a mejorar el rendimiento de nuestro sitio web y, finalmente, aumentar nuestras ventas.

Pedro López

UX · 13 / 09 / 2019

Kan een goed webontwerp de conversieratio verhogen? Het antwoord is ja.

El  diseño UX/UI (experiencia de usuario/interfaz de usuario) ha cobrado una gran relevancia en los últimos años. Con páginas (landings) claramente orientadas a objetivos, cada decisión tomada en el proceso de diseño puede ser decisiva a la hora de llevar al usuario a buen puerto.

Send this to a friend