Hoe u uw paginabeelden kunt optimaliseren om de sitesnelheid te verhogen


129

De officiële slogan van Google is “Do not Be Evil”, maar het gerucht gaat al lang dat het bedrijf een tweede, intern motto heeft dat ze meestal in de wikkels houden:

“Je bent snel, of je bent gefast.”

We hebben in het verleden al geschreven over siteversnelling, en er is geen twijfel mogelijk over het belang ervan (als die er is, blijf dan voor het gedeelte over statistieken van dit bericht), maar voor inhoudsmarketeers wordt het verbeteren van de snelheid van uw website vaak gezien als een bijzonder zware technische oefening die volledig buiten uw controle is. Alleen een back-end full-stack-engineer kan de dingen aanzienlijk versnellen, toch?

Het blijkt dat niets minder waar is. Zoals Tom Bennet van Builtvisible uitlegde in zijn uitstekende recente lezing op Brighton SEO . Hier zal ik enkele belangrijke punten bespreken die Tom heeft geadresseerd om te laten zien hoe en waarom je je moet concentreren op het leveren van een bliksemsnelle ervaring aan gebruikers.

Waarom is sitesnelheid belangrijk?

Nu noemde ik stats, nietwaar?

Volgens het officiële Google-webmaster-blog is siteversnelheid van belang. Google besteedt ontzettend veel tijd aan het controleren of uw site uw concurrenten bijhoudt. Als u langzamer bent, zal uw positie in de zoekresultaten hieronder lijden.

Maar dat is niet de enige belangrijke factor hier. Sitesnelheid verbetert de algehele gebruikerservaring. In dit geval noemde Tom deze buitengewone stat van Firefox:

brighton-seo-plaats-speed-for-inhoud-marketeers

Toen Firefox de gemiddelde laadtijd van de pagina’s met 2,2 seconden verhoogde, steeg het aantal downloads met 15,4%. Dat komt neer op meer dan 10 miljoen downloads per jaar.

Zodra je dergelijke cijfers hoort, begint de waarde duidelijk te worden. Tom nam ook de tijd om Steve Souder aan te halen, een pionier op het gebied van veel modern webprestaties:

brighton-seo-plaats-speed-for-inhoud-marketeers-Steve-Souders

Dus we weten dat we er iets aan kunnen doen. Maar waar onze inspanningen te concentreren?

Wat kunnen we eraan doen?

Ter illustratie heeft Tom een ​​eenvoudige, vrij standaard inhoudspagina gebouwd met bootstrap en jQuery. De contentmarketingindustrie produceert dagelijks duizenden hiervan, dus het moet redelijk relevant zijn:

brighton-seo-plaats-speed-for-inhoud-marketeers

Vervolgens vuren we de pagina op en meten deze met een combinatie van Yahoo’s Yslow en Google PageSpeed ​​regelsets. Dit zijn de eerste resultaten:

brighton-seo-plaats-speed-for-inhoud-marketeers

Dat F Grade gaat onze geloofwaardigheid in de ogen van Google ernstig schaden, en 3,9 seconden lijkt voor gebruikers een sleur te worden. Als je me niet gelooft, tel dan langzaam tot vier. Zou je bereid zijn om zo lang te wachten totdat elke pagina op een site is geopend?

Maar waar moeten marketeers hun inspanningen richten om de meeste impact te hebben?

Op een dergelijke typische pagina zijn afbeeldingen veruit het grootste en meest voorkomende element, dus dit is waar we ons moeten concentreren om mee te beginnen.

brighton-seo-plaats-speed-for-inhoud-marketeers

Dit is niet alleen een kwestie van uw foto’s openen in Photoshop en ze kleiner maken. Resolutie is van belang (we willen nog steeds dat onze pagina’s er mooi uitzien), maar slechts tot op zekere hoogte, dus de eerste stap is om onze beeldformaten te controleren:

brighton-seo-plaats-speed-for-inhoud-marketeers

Zoals je kunt zien aan het pagina-element, is deze afbeelding geüpload met 1024 x 683 pixels, maar de gebruiker zal deze alleen zien op een maximum van 420 x 289, minder dan de helft van de uploadgrootte.

Zoals altijd is het belangrijk om de gebruikerservaring te overwegen, dus laten we ons een paar vragen stellen:

  • Welke formaten moeten we gebruiken voor afbeeldingen? PNG’s zijn ideaal voor afbeeldingen met minder kleuren of transparanten, terwijl PEGS ideaal is voor foto’s.
  • Afmetingen: wat is de maximale breedte en hoogte waarop de afbeelding wordt weergegeven?
  • Tot slot, heb je echt al die afbeeldingen nodig?

Als u tekst in een afbeelding hebt, verwijdert u deze en gebruikt u een echt lettertype en gebruikt u vectorafbeeldingen of CSS voor zaken als logo’s of arcering op de pagina. Zoals Tom het uitdrukte

 “Het snelste HTTP-verzoek is het niet-gemaakte verzoek”

Google heeft een reeks richtlijnen en adviezen over deze beschikbaar die u moet controleren.

Dus heeft Tom de afmetingen aangepast, opnieuw geformatteerd of zijn afbeeldingen vervangen. Hoe heeft dit de algemene sitesnelheid beïnvloed?

brighton-seo-plaats-speed-for-inhoud-marketeers

Aandachtig zijn met afbeeldingen was genoeg om maar liefst 1,2 seconden – of 30% – te scheren van de totale laadtijd van de pagina.

Het is nog steeds geen rocketsnelheid op dit punt, maar het is veel, veel beter. Tom heeft tijdens zijn presentatie verschillende andere handige tips besproken die ik in de toekomst ook zal proberen te behandelen, maar nu – tijd om die beelden aan te scherpen .


0 Comments

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