Waarom is http-compressie zo belangrijk?
Gepubliceerd: Auteur: Vishvesh Gowrising Categorie: NieuwsblogHttp-compressie is een essentiële functie, gebouwd in webservers om overdrachtssnelheid en bandbreedtegebruik te verbeteren. Het is onmisbaar, zeker in moderne Progressive Web Apps (PWA). In deze blog licht ik graag toe waarom http-compressie zo belangrijk is, hoe het zich verhoudt tot je PWA én wat de voordelen zijn.
Over http-compressie
De twee meestgebruikte compressietechnieken van dit moment zijn Brotli (.br) en GZIP (.gz). De GZIP-compressie wordt door meerdere browsers ondersteund, maar de Brotli-compressie heeft een hogere compressieverhouding (wat resulteert in een kleinere bestandsgrootte).
De meest efficiënte aanpak is om te coderen met behulp van een prioriteitenmatrix. Als de klantbrowser Brotli ondersteunt, gebruik je standaard deze codering. Is dat niet het geval? Dan gebruik je GZIP. Uiteindelijk is compressie simpelweg een techniek om bandbreedte te behouden. Als de browser geen enkele compressie ondersteunt, gebruik je de ongecomprimeerde bestanden.
Waarom http-compressie gebruiken?
De meeste PWA’s zullen HTML, JavaScript of CSS-bestanden gebruiken. Deze bestanden kunnen variëren van een paar kilobytes tot honderden kilobytes. Http-compressie is van essentieel belang als je de laadtijden van applicaties wil optimaliseren bij lagere internetsnelheden, zoals een langzame 3G-verbinding. Stel dat je een JavaScript-bestand van 900 kilobytes hebt, en de klant een internetsnelheid heeft van 300 kilobytes per seconden. Dit zou betekenen dat de laadtijd drie seconden is.
Laten we deze laadtijd nu berekenen wanneer je gebruik zou maken van http-compressie. In een ideale situatie ondersteunt de klantbrowser Brotli. Door de hoge compressieverhouding van Brotli is het gecomprimeerde JavaScript-bestand nog maar 200 kilobytes. De laadtijd voor dit bestand is daarmee verminderd van 3 seconden naar 0,67 seconden! En onthoud, dit is zonder het bestand aan te passen.
Wanneer http-compressie gebruiken?
De laadtijden van de applicatie verbeteren aanzienlijk door een http-compressie, terwijl de set up relatief eenvoudig is. Dus zeker wanneer de laadtijden van je applicatie lang en gerelateerde prestaties laag zijn, is http-compressie essentieel. Online vind je diverse applicaties waarmee je de belangrijkste punten van je PWA kunt meten.
Synergische verbeteringen
Http-compressie werkt nog beter met andere optimalisaties. Als je de juiste key factors optimaliseert, versterken ze elkaar. Voorbeelden van deze verbeteringen zijn:
- Verklein de oorspronkelijke grootte van uw HTML-, JavaScript- of CSS-bestanden.
- Gebruik de ‘swap’-waarde voor de ‘font-display optie in CSS-bestanden.
- Zet afbeeldingen om in next-gen formaat. Ik ben persoonlijk een scenario tegengekomen waar ik een PNG-bestand met hoge resolutie van 5 megabytes omzette tot WEBP. Het omgezette bestand was 200 kilobytes. Dit houdt in dat de laadtijd van 300KB/s is verkleind van 17.1 seconden naar 0.67 seconden!
- Laad applicatie-bestanden zo veel mogelijk ‘lazy’. Stel: u hebt een login-pagina en een gebruikersprofiel. De gebruiker moet inloggen voordat hij zijn profiel kan bekijken. De CSS die vereist is voor de profielpagina van de gebruiker, moet nog niet geladen worden zolang de gebruiker zich nog op de inlogpagina bevindt. U zou een niet-blokkerende pre-loading strategie kunnen gebruiken om de gebruikerservaring te verbeteren.
- Gebruik service workers als dat mogelijk is. Een service worker kan een applicatiebestanden cachen. Vervolgens kan hij deze cachbestanden gebruiken iedere keer wanneer de gebruiker de website laadt. Zo hoeft niet steeds een nieuw verzoek te worden gemaakt. Dit verkleint de belasting op uw webserver, terwijl de data van de gebruiker bewaard blijft!
- De meeste service workers ondersteunen een standaard uitvoering om te controleren of de gegevens in de cache verouderd zijn. U zou dit kunnen gebruiken om een notificatie naar gebruiker te sturen met de mededeling dat er een nieuwe versie van de applicatie beschikbaar is.
Zelf aan de slag?
Tot slot mijn kernboodschap: gaat u een PWA bouwen? Houd dan altijd de applicatieprestatie en laadtijden in gedachten. Zoals we allemaal weten is de eerste indruk het belangrijkst. Investeer dus zelf tijd om de laadtijd van de applicatie te verkleinen, zodat die niet ten koste gaat van de tijd van de gebruiker.
