Pagespeed met een beperkt budget: Kosteneffectieve manieren om websiteprestaties te verbeteren

Pagespeed met een beperkt budget

Als Core Web Vitals consultant krijg ik veel verschillende verzoeken voor pagespeed ondersteuning. En ja, soms is er geen groot budget. Als dat het geval is, moet ik nog efficiënter met mijn tijd omgaan en alleen optimalisaties uitvoeren met veel winst en weinig inspanning. In dit artikel zullen we praktische, kosteneffectieve strategieën onderzoeken om de prestaties van websites te verbeteren en een naadloze gebruikerservaring te bieden.

Core Web Vitals TIP: De meest budgetvriendelijke dienst die ik aanbied is de 2 uur Core Web Vitals ondersteuning! In 2 uur help ik een effectieve strategie op te zetten die de meest urgente problemen oplost die u het meeste waar voor uw geld geven!

Boek nu!

Zoek eerst de problemen uit

Bij het optimaliseren van Web Performance met een beperkt budget moeten we er absoluut zeker van zijn dat we zo effectief mogelijk optimaliseren. Dat betekent dat we eerst moeten weten wat het echte probleem is.

We kunnen de uitstekende gratis PageSpeed Insights gebruiken om de CrUX-data op te vragen. De CrUX-data is de enige gegevensbron die ertoe doet, aangezien dat de gegevensbron is die Google gebruikt.

CrUX data geslaagd!

CrUX data mislukt!

Onder de CrUX-score ziet u een lighthouse audit. 

Laat me duidelijk zijn over de lighthouse audit! Op dit moment geven we niet om lighthouse. Waarom? Omdat het de Core Web Vitals niet meet. Zeker, lighthouse is een geweldige testtool en voel u vrij om al zijn suggesties te verkennen, maar aangezien we een beperkt budget hebben, geven we om het halen van de Core Web Vitals. We geven nu niet om het halen van synthetische tests!

Terug naar de CrUX-data. Hier zijn enkele richtlijnen om te volgen als u een beperkt budget heeft! Begin met het onderzoeken van de Core Web Vitals in exact deze volgorde en focus eerst op deze problemen!

• Als u faalt op de Time to First Byte, los dat dan eerst op!
• Als u faalt op de First Contentful Paint, los render blocking bronnen op (defer scripts en optimaliseer stijlen)
• Als u faalt op de Largest Contentful Paint, prioriteer bronnen die u nodig heeft voor die LCP (zoals lettertypen of afbeeldingen)
• Als u faalt op de CLS, voeg breedte en hoogte toe aan alle afbeeldingen, zoek en verwijder CSS-transities en reserveer ruimte voor laat renderende elementen (zoals advertenties, productfilters enz.)
• Als u faalt op de Interaction to Next Paint, gebruikt u waarschijnlijk te veel JavaScript op het verkeerde moment. Verwijder onnodige scripts/plugins, gebruik een RUM-tool zoals Core/Dash om de traagste scripts te vinden

Afbeeldingen verantwoord optimaliseren

Afbeeldingen dragen op een paar verschillende manieren bij aan de Core Web Vitals. Ze zijn vaak de grootste bijdragers aan de grootte van de webpagina. Door efficiënte beeldcompressietechnieken te gebruiken en moderne afbeeldingsformaten zoals WebP te gebruiken, kunnen website-eigenaren de visuele kwaliteit behouden en tegelijkertijd de laadtijden aanzienlijk verkorten. Vaak worden afbeeldingen het Largest Contentful Paint element. Dat betekent dat we die belangrijke LCP-afbeeldingen moeten prioriteren en minder belangrijke en below-the-fold afbeeldingen moeten deprioriteren.

1. Converteer afbeeldingen gratis naar WebP

Er zijn veel gratis tools, oplossingen en plugins beschikbaar waarmee u afbeeldingen kunt converteren naar nieuwere, snellere en modernere formaten zoals WebP. Voor WordPress zou ik bijvoorbeeld de uitstekende en gratis WebP Express aanraden

2. Implementeer Lazy loading

Lazy loading geeft aan de browser aan dat een afbeelding niet moet worden geladen totdat deze (bijna) in de zichtbare viewport (het zichtbare deel van de pagina) is. Als u 15 afbeeldingen op een pagina heeft en slechts 3 in het zichtbare deel van de pagina staan, kunt u veilig loading="lazy" toevoegen aan de afbeeldingen die niet in de zichtbare viewport staan. 

Er zijn 2 manieren om dit aan te pakken. De eerste is om lazy loading in uw CMS in te schakelen. Dit voegt lazy loading toe aan alle afbeeldingen. Raadpleeg vervolgens de documentatie over hoe u lazy loading verwijdert voor de afbeeldingen die zichtbaar en belangrijk zijn. De andere manier is om handmatig loading="lazy" toe te voegen aan below-the-fold afbeeldingen.

<img loading="lazy" src="image.jpg">

3. Configureer afbeelding fetchpriority

Door fetchpriority = "high" toe te voegen aan een afbeeldingstag kunnen we aan de browser signaleren dat deze afbeelding belangrijker is dan andere afbeeldingen en met een hoge fetchpriority moet worden gedownload. En hoewel ik me ervan bewust ben dat er betere manieren zijn, waaronder image preloading en 103 early hints, is het instellen van de fetchpriority eenvoudig, snel en effectief! Het proces is simpel: identificeer gewoon de belangrijkste afbeelding op uw pagina, bewerk de template van de pagina zelf en voeg fetchpriority = "high" toe aan de afbeelding. Dit ziet er ongeveer zo uit

<img fetchpriority="high" src="image.jpg">

2. Gebruikmaken van Browser Caching voor consistentie

Als u budgetvriendelijke hosting gebruikt, is de kans groot dat de webserver niet optimaal is geconfigureerd. Een van de fouten die ik regelmatig tegenkom, is een verkeerd geconfigureerde browser caching.  Browser caching zorgt ervoor dat veelgebruikte bronnen zoals afbeeldingen, scripts en stylesheets lokaal worden opgeslagen, waardoor de laadtijden voor terugkerende bezoekers worden verkort. Configureer caching headers om een balans te vinden tussen optimale prestaties en ervoor te zorgen dat gebruikers de nieuwste inhoudsupdates ontvangen.

Als u Apache als webserver gebruikt, maak dan eenvoudig een bestand genaamd .htaccess in de root (basis) map van uw website en voeg deze regels toe

<FilesMatch "\.(ico|pdf|jpg|jpeg|png|webp|gif|css|woff|woff2)$">
  <IfModule mod_headers.c>
    Header set Cache-Control "max-age=172800, public, must-revalidate"
  </IfModule>
</FilesMatch>

Als u een andere webserver zoals NGINX gebruikt, neem dan contact op met uw hostingprovider en wijs hen op dit artikel!

3. Overweeg een gratis of budgetvriendelijk CDN zoals CloudFlare

Verken de voordelen van Content Delivery Networks om statische inhoud over servers wereldwijd te verspreiden. Hoewel premium CDN's geavanceerde functies bieden, kunnen zelfs de gratis of budgetvriendelijke opties nog steeds een aanzienlijke boost geven in pagespeed en betrouwbaarheid.

Op het gratis plan:

Op het gratis plan krijgt u veel van de 'goede dingen' zoals 

1. Supersnelle DNS. De CloudFlare DNS-servers zijn gratis en zullen waarschijnlijk beter presteren dan de DNS-servers van uw budget hostingprovider. Alleen al daarom is het een goed idee om over te stappen naar CloudFlare 
2. HTTP/3. CloudFlare gebruikt de nieuwste protocollen en de snelste compressiemethoden. Zonder in veel details te treden, wees gerust dat dit uw netwerk met minstens 10% zal versnellen.
3. Consistente Browser caching. CloudFlare heeft een vrij sterke staat van dienst als het gaat om het cachen van statische bronnen. De out-of-the-box configuratie is waarschijnlijk beter dan wat u nu heeft!
4. Edge caching voor statische bronnen. CloudFlare cachet versies van uw statische bronnen zoals afbeeldingen, scripts en css-bestanden en serveert deze direct aan de eindgebruiker vanaf hun edge-netwerk. Dit elimineert de noodzaak voor round trips naar uw origin server.
5. Rocket loader. Rocket loader zal het laden van scripts deferren en alle complicaties die daaruit voortvloeien afhandelen. Rocket loader is een ruwe methode, maar als u niet in staat bent om scripts handmatig te deferren, zal dit waarschijnlijk de paint metrics zoals Largest Contentful Paint verbeteren.

Op het Pro plan

Een van de eerste dingen die ik altijd zeg als ik een gratis CloudFlare plan zie is 'ga pro!'. Als de $25 iets is dat u zich kunt veroorloven en bereid bent uit te geven aan een snellere site, moet u het waarschijnlijk overwegen.

1. Alle gratis functies. Natuurlijk wordt het pro plan geleverd met alle gratis functies.
2. CloudFlare APO voor WordPress. APO voor WordPress is een complete oplossing die uw pagina's op het edge-netwerk cachet als bezoekers niet zijn ingelogd. Dit kan de time to first byte enorm versnellen. 
3. Lossless en Lossy Beeldoptimalisatie. Een van de belangrijkste voordelen van het gebruik van de pro-versie van CloudFlare is hun beeldoptimalisatie. CloudFlare converteert en cachet afbeeldingen in webp-formaat en serveert ze alleen aan bezoekers die deze formaten accepteren.

4. Self host zoveel als u kunt!

Een andere eenvoudige en effectieve optimalisatie is het zelf hosten van 'statische bronnen'. Op veel sites worden statische bronnen gehost op externe CDN's (verwar dit niet met uw eigen CDN). Bijvoorbeeld jQuery wordt gehost op  https://code.jquery.com/,  Bootstrap wordt gehost op https://cdn.jsdelivr.net en uw lettertypen worden gehost op https://fonts.googleapis.com. Ik snap de aantrekkingskracht, deze CDN's presenteren zich als gemakkelijk en snel, maar het gebruik hiervan is eigenlijk een vrij slecht idee en zal uw site vertragen!

Het idee om een gedeeld CDN te gebruiken voor dit soort bestanden was goed toen browsers deze bestanden nog over websites heen konden delen. Die dagen liggen in het verleden. Het resultaat is dat een nieuwe bezoeker altijd het statische bestand moet downloaden en voor elk bestand een nieuwe verbinding naar een nieuwe server nodig heeft. En deze nieuwe verbindingen naar deze nieuwe servers kunnen veel extra tijd in beslag nemen.

De oplossing is om die bestanden van derden zelf te hosten. Dit is eenvoudig, download gewoon het bestand, plaats het op uw server en wijzig de verwijzing naar dit bestand.

5. Asynchroon Script laden

Een enorm knelpunt kunnen 'blokkerende scripts' in de head van de pagina zijn. Deze scripts kunnen soms het laden van de pagina met wel 20 seconden vertragen! Het deferren van deze scripts is helemaal niet moeilijk. Voeg gewoon defer toe aan de scripttag en u bent klaar. Als u kunt, doe dit dan! Bewerk de template en wijzig uw script als volgt

<!-- oude blokkerende script tag -->
<script src="script.js"></script>

<!-- nieuwe deferred script tag -->
<script defer src="script.js"></script>

Maar er zijn haken en ogen! Het toevoegen van defer aan scripttags kan allerlei problemen en afhankelijkheidsfouten veroorzaken. En aangezien u een beperkt budget heeft, moet ik aannemen dat u niet de middelen heeft om een JavaScript-expert in te huren om alle problemen op te lossen die zich kunnen voordoen. Dus probeer alsjeblieft uw scripts te deferren en controleer op fouten (druk op Ctrl-Shift-I in chrome en controleer het console tabblad). Als er na het testen geen problemen zijn ... bent u een van de weinige gelukkigen! Als er problemen zijn, moet u waarschijnlijk uw toevlucht nemen tot een van de volgende oplossingen:

Gebruik Rocket loader 

Zoals besproken geeft de gratis versie van CloudFlare u toegang tot Rocket Loader. Dit defert alle scripts op een pagina. Het is geenszins perfect, maar meestal doet het goed werk.

Gebruik een plugin

De meeste op CMS gebaseerde sites hebben een enorme repository met plugins. Er zijn veel plugins die u JavaScript laten deferren en alle complicaties afhandelen die gepaard kunnen gaan met het deferren van scripts.

6. Caching caching caching!

Wanneer u een beperkt budget heeft en niet veel wilt uitgeven aan hosting, is caching een van de meest effectieve manieren om een website te versnellen. Caching is vooral effectief tegen een hoge time to first byte. Caching kan op verschillende niveaus worden gedaan. 

Client side cache: Configureer uw webserver om de browser te instrueren zoveel mogelijk statische bronnen te cachen. Dit vermindert de belasting van uw server.

Object Cache:  Object cache kan worden gebruikt om gegevens op te slaan die rekenintensief zijn om opnieuw te genereren, zoals het resultaat van complexe database query's. Vraag uw hoster om Redis of Memcached te installeren.

Full Page Cache: Als u een CMS gebruikt, wilt u waarschijnlijk een full page cache aan uw site toevoegen. Voor WordPress zijn goede opties WP Fastest Cache of WP Core Web Vitals

7. Maak strategische hostingkeuzes

Als het op hosting aankomt, loont het om rond te kijken en de duurste host is niet altijd de snelste. Over het algemeen bent u op zoek naar een hostingplan dat is geoptimaliseerd voor uw CMS, want een manusje-van-alles is een meester in niets!  Zoek providers die geoptimaliseerde servers aanbieden. Een strategische hostingkeuze kan een aanzienlijk verschil maken in websitesnelheid.

8. Continue Monitoring en Analyse

Implementeer een robuuste monitoringstrategie met betaalbare tools zoals [url =https://coredash.app]CoreDash[/url] Audit regelmatig de prestaties van uw website om nieuwe optimalisatiemogelijkheden te identificeren en consistente snelheidsverbeteringen te garanderen.