De Speed Test Tool van Uptrends gebruiken om websiteperformance te verbeteren

Als u ooit de performance van uw pagina hebt gecontroleerd in onze gratis Website Speed Test tool, hebt u een lijst met optimalisaties van Google Insights gezien die, wanneer geïmplementeerd, de performance van uw site verbeteren, wat leidt tot een betere gebruikerservaring en hogere conversiepercentages.

De lijst met optimalisaties lijkt voor sommigen misschien overweldigend, maar laten we eens kijken naar de meest voorkomende aanbevelingen van Google Insights en u een klein overzicht geven van wat de aanbeveling is en hoe u en uw gebruikers hiervan kunnen profiteren.

Begin met het benchmarken van uw paginaperformance

U moet weten hoe uw pagina op dit moment presteert, zodat u uw succes kunt meten. Als u een Uptrends-gebruiker bent (Business of Enterprise), weet u waarschijnlijk precies hoe uw pagina presteert. Bent u geen Uptrends-gebruiker, dan kunt u onze gratis Website Speed Test Tool gebruiken om uw site te testen en de performancestatistieken te verzamelen die u nodig hebt om te beginnen met optimaliseren.

We raden u aan een van onze testopties voor Mobiele snelheid te gebruiken; wat snel is op mobiel is supersnel op desktops. Noteer uw testparameters en controlestationkeuze voor toekomstig gebruik.

Boven aan de resultaten van de gratis Website Speed Test tool vindt u data over uw paginagrootte, objecttypes en objecttellingen. Bewaar deze informatie samen met de informatie over de verbindings- en responstijden onder aan de watervalgrafiek.

Nu u uw beginpunt weet, kunt u beginnen met het toepassen van de optimalisaties die nodig zijn om de laadtijden van uw pagina’s te versnellen. Boven aan de pagina vindt u een Google Insights-score en een lijst met aanbevelingen.

In dit artikel gaan we het hebben over deze aanbevelingen, samen met enkele andere nuttige optimalisaties die u mogelijk moet aanbrengen om de performance van uw website te verbeteren.

Houd op met onzin: verwijder onnodige downloads

Oké, “Houd op met onzin” is geen echte Google Insight-aanbeveling, omdat Google geen oordeel velt over het nut van uw content (tenminste, nu nog niet), maar een objectieve blik op uw bestaande content is de eerste plaats om te beginnen.

Verwijder ongebruikte en onnodige downloads

Sommige downloads worden nooit gebruikt door de pagina die ze opvraagt. Het is gemakkelijk om te vergeten een file request uit uw paginaheaders te verwijderen als uw pagina deze niet langer nodig heeft. Vergeten pagina-elementen worden een serieuzer probleem als het gaat om verweesde scriptbestanden. Scriptbestanden gaan ten koste van performance, niet alleen door ophalen maar in verwerkingstijd. JavaScript neemt 60% meer verwerkingstijd in beslag dan afbeeldingen van dezelfde grootte. Tree Shaking kan het opgeblazen gevoel door onnodige code minimaliseren.

Andere pagina-elementen bieden misschien niet veel in ruil voor hun kosten in paginagrootte en performance. Houd pagina-elementen in de gaten die weinig tot geen interactie van gebruikers ontvangen, zoals beeldcarrousels. Verwijder onderbenutte elementen om uw pagina een plotselinge opleving in performance te geven.

Verklein (minify) en comprimeer uw op tekst gebaseerde bronnen

Wist u dat uw HTML-, CSS- en scriptbestanden vol staan met onnodige inhoud die uw gebruikers niet zien en die ze eerlijk gezegd niet nodig hebben? Nadat ontwikkelaars de site hebben voltooid, laten ze veel dingen achter in de CSS-, script- en HTML-bestanden die de browser en de gebruikers niet nodig hebben. U kunt bestandsgroottes verkleinen door het volgende te verwijderen:

• Opmerkingen van ontwikkelaars: opmerkingen spelen een belangrijke rol bij het gemakkelijker begrijpen en lezen van de code, maar de meeste gebruikers kan het niets schelen en zien de opmerkingen nooit en hebben deze ook niet nodig.
• Overbodige code: uw CSS-bestanden kunnen meerdere declaraties voor dezelfde content bevatten, door ze te consolideren neemt de bestandsgrootte af.
• Witruimte en tekens voor nieuwe regels: witruimte en nieuweregeltekens helpen mensen de code te lezen, maar de browser heeft ze niet nodig. De browser kan code prima lezen zonder de extra witruimte.

Tools zur Kompression und Minimierung können die Dateigröße erheblich reduzieren. Minimierung findet vor dem Hochladen auf einen Webserver statt, während die Kompression dynamisch auf Grundlage der Browser-Möglichkeiten des Nutzers erfolgt.

Gangbare compressie- en minification-tools kunnen de bestandsgrootte aanzienlijk verkleinen. Het verkleinen (minification) gebeurt voordat de pagina naar de webserver wordt geüpload, terwijl de compressie dynamisch plaatsvindt op basis van de mogelijkheden van de browser van de gebruiker.

Optimaliseer afbeeldingen en grafische elementen

Het merendeel van de content van een pagina bestaat uit afbeeldingsbestanden. Bij gangbare afbeeldingsbestanden zoals JPEG’s en PNG’s is al compressie toegepast, maar dit betekent niet dat de bestanden optimaal zijn. Beeldoptimalisatie is een discussie met veel facetten.

Biedt de afbeelding waarde?

Gebruik geen afbeeldingen en grafische elementen alleen maar omdat ze mooi zijn; als ze niet bijdragen aan het verhaal, is het beter om ze weg te laten.

Is de afbeelding tot het juiste formaat aangepast?

Het verzenden van een hogeresolutie-afbeelding naar de meeste apparaten verspilt bandbreedte. U hebt hoge resolutie nodig als u van plan bent afbeeldingen af te drukken, maar voor weergave op de meeste schermen hebt u slechts 72 tot 144 pixels per inch nodig. Verzend afbeeldingen op basis van schermgrootte in plaats van het formaat van afbeeldingen in de browser aan te passen. Komt een pagina request van een smartphone, verzend dan afbeeldingen die al aangepast zijn aan het formaat van dat scherm.

Gebruik het beste formaat voor uw grafische elementen

U hebt veel keuze voor het optimaliseren van visuele:

JPEG: een gecomprimeerd beeldformaat (met kwaliteitsverlies) dat voornamelijk voor foto’s wordt gebruikt. Vanwege verlies aan resolutie wanneer deze is gecomprimeerd, zijn JPEG-afbeeldingen niet geschikt voor afbeeldingen die tekst of andere grafische elementen met harde randen bevat.

PNG: een gecomprimeerd beeldformaat (zonder kwaliteitsverlies) dat wordt gebruikt voor foto’s, maar beter geschikt is voor grafische elementen, met name voor elementen die moeten gebruik moeten maken van transparantie.

GIF: een gecomprimeerd beeldformaat dat maximaal 256 kleuren gebruikt. Creëert kleine grafische bestanden, maar verwerkt verlopen niet goed en biedt geen transparantie. Geanimeerde GIF’s zijn ook populair op het web, maar hebben hoge kosten qua paginaperformance vanwege de bestandsgrootte. Het converteren van GIF-bestanden naar video kan dezelfde look opleveren maar dan zonder de hoge kosten.

SVG: schaalbare vectorafbeeldingen die zich gemakkelijk aan de omvang van de pagina aanpassen. SVG-bestanden worden het meest gebruikt voor pictogrammen en logo’s.

Image Sprites: een enkele afbeelding met verschillende grafische elementen die door het gebruik van CSS de browser laat weten welk deel van de afbeelding moet worden weergegeven. Sprites zijn perfect voor pictogrammen en andere kleine pagina-elementen die anders meerdere requests zouden vereisen.

CSS and HTML: u kunt veel gewone grafische effecten, zoals schaduwen en 3D-animaties, rechtstreeks op de pagina creëren zonder dat extra bronnen nodig zijn.

WebP: WebP is een compressie met en zonder kwaliteitsverlies die door Chrome en andere Blink-gebaseerde browsers wordt ondersteund en die bestandsgroottes tot 25% meer kunnen verkleinen dan PNG- of JPEG-indelingen.

Als u eenmaal weet wat de beste manier is om uw afbeeldingen en grafische elementen naar de pagina te brengen, moet u ervoor zorgen dat hun bestandsgrootte zo klein mogelijk is. Wij gebruiken TinyPNG om onze JPEG- en PNG-bestanden tot de kleinste bestandsgrootte te minimaliseren en de kwaliteit te behouden. Het gebruik van tools zoals TinyPNG is geweldig voor statische inhoud, maar als u een meer dynamische oplossing nodig hebt, neem dan contact op met uw CDN-providers. De meeste CDN’s bieden geautomatiseerde beeldoptimalisatie.

Gebruik client hints om met de beste bronnen te reageren

De request headers hebben optionele informatie die de omgeving en de verbinding van de gebruiker beschrijft. Met de waarden die in deze headers worden gevonden, kunt u reageren met de beste inhoud voor de omstandigheden van de gebruiker.

De Accept request header vertelt de server welke mediabestandstypes hij kan verwerken voor zaken als afbeeldingen en audio. Als de Accept header WebP bevat, kunt u de afbeeldingsgrootte met ongeveer 25% verminderen. De rest van de client hints zijn niet automatisch.

Client hints gebruiken

Een server meldt de client dat hij bepaalde dingen over de omgeving van de gebruiker wil weten door de Accept CH header te verzenden, gevolgd door de door komma’s gescheiden lijst met variabelen. Deze variabelen hebben meestal betrekking op scherm- en mediaresolutie, zoals:

• Intrinsic size
• Density-corrected intrinsic size
• Extrinsic size
• Viewport width
• Device pixel ratio (DPR)
• Width
• Device Memory

Met de clientinformatie kan de browser inhoud opmaken voor de beste prestaties zonder bandbreedte van de gebruiker te verspillen.

Netwerk hints

Netwerk hints vertellen de server over de verbinding. Met deze verzameling hints weet de server de round-trip time (RTT) die aangeeft hoe lang het duurt voordat de gebruiker de inhoud ontvangt en verwerkt. Andere hints zijn:

Downlink: megabits per seconde voor downloadsnelheid.

Effective connection type (ECT): dit is een vergelijkend type en niet het daadwerkelijke type. Als uw downlinktijd meer lijkt op een 3G-verbinding in plaats van een 4G-snelheid, behandelt de server deze als zodanig.

Save-Data: indicatie dat de client liever minder data wil ontvangen.

Het gebruik van client hints kan veel opleveren, maar het gebruik ervan wordt snel gecompliceerd. Jeremy Wagner behandelt de basisprincipes samen met use cases om u verder te helpen.

Krijg het één keer en dan is het klaar met HTTP caching

Veel paginabronnen worden steeds weer opnieuw gebruikt als een gebruiker door uw site klikt. Het opnieuw ophalen van deze bestanden, heeft dit ernstige gevolgen voor de gebruikerservaringen op uw site. Http caching helpt het aantal roundtrips te minimaliseren dat nodig is om de volgende pagina te laden. Door de maximale periode in seconden van de cache control in te stellen en een etag of token te verstrekken, laat u de browser de resource uit de cache hergebruiken als deze niet is verlopen, en als deze wel is verlopen, kan de browser de token terugsturen om te achterhalen of bron is veranderd. Als er niets is veranderd, kan de browser de bron opnieuw uit de cache gebruiken. Stel bij uw max-age een zo lang mogelijke lang tijd in voor paginabronnen die niet vaak veranderen.

Stel prioriteiten en verminder het aantal requests

U moet uw above-the-fold content of critical-path content eerst laden. Uw prioriteit voor elke pagina is om de gebruiker tevreden te stellen door hen zo snel mogelijk de content te geven die ze vragen. Als u probeert alles in één keer te laden, zitten uw gebruikers te wachten, en veel van hen vertrekken (40% vertrekt binnen de eerste drie seconden wachttijd).

• Bundel CSS- en scriptbestanden: het verpakken van uw bestanden in een enkele download kan zorgen voor snellere laadtijden door het aantal requests te verminderen. Voorkom weergaveblokkering door eerst kritieke bestanden te verzenden.
• Bepaal wat kritiek is en gebruik code splitting om wat belangrijk is direct te verzenden en bundel en lazy load de rest.
• Gebruik mediatypes en media queries om niet-kritieke CSS te markeren als niet-weergaveblokkerend.
• Gebruik HTTP/2 push om kritieke bestanden met de HTML te verzenden.
• Schakel HTML-caching in om meerdere requests voor hetzelfde bestand te voorkomen.
• Gebruik preloading en preconnect browser hints om browserprioritering te ontwijken en haal bestanden op waarvan u op voorhand weet dat de pagina ze nodig heeft.

Elimineer weergaveblokkerend JavaScript en CSS in de above-the-fold content

Hoelang uw gebruikers naar een leeg scherm kijken in afwachting van het laden van uw pagina, wordt beïnvloed door veel factoren, maar u kunt ze sneller laten communiceren en ervoor zorgen dat ze niet vertrekken door ze meteen iets te geven.

De browser moet de HTML-, JavaScript- en CSS-bestanden verwerken voordat hij de CSSOM en DOM kan construeren. Zolang de browser al die bestanden downloadt en verwerkt, ziet de gebruiker niets. Om de feitelijke en waargenomen wachttijden van gebruikers te helpen verkorten, verzendt u alleen de kritieke JavaScript en CSS. Zend de off-screen code en de conditional gebruikersinteractie code asynchroon om het scherm sneller weer te geven. Tegen de tijd dat de gebruiker scrolt of met de inhoud communiceert, heeft de browser de code gedownload en verwerkt. Lees meer over weergaveblokkerende code van Ilya Grigorik.

Is het uiteindelijk het extra werk waard? Absoluut!

Zelfs de kleinste winst in website- en paginaperformance kan een enorme invloed hebben op gebruikerstevredenheid, conversiepercentages, retentie, pagina rankings en inkomsten.

• 40% van de gebruikers verlaat een site die meer dan 3 seconden nodig heeft om te laden
• Elke seconde kost 7% aan conversies
• Een vertraging van één seconde bij een site die $ 100 duizend per dag verdient, kan leiden tot verliezen van $ 25 miljoen per jaar (bron).

Uw inkomsten zijn nauw verbonden met uw website, webapplicatie en API-performance. Elke paar microseconden die u van uw laadtijden af kunt halen, belonen u met hogere conversies en terugkerende bezoekers.

Webperformance kan onverwachts afnemen

Uw website is een levend dier dat dagelijks moet worden verzorgd en gevoerd. Elke wijziging in code, content, netwerk en architectuur heeft de potentie om de performance van uw website te beïnvloeden. Vaak is de invloed geen positieve, en deze zou deze geruime tijd onopgemerkt kunnen blijven. Bescherm uw investering en automatiseer uw performancetests met Uptrends’ Full Page Check, Multi-step API of Web Application monitoring. Uptrends laat het u direct weten als uw performance onder uw performancetolerantiedrempel komt.