Hoe de prestaties van front-endwebsites te meten
Spreken van optimalisatieproces is bijna onbestaande bij new age webdesigners. Zelfs veel webontwerpers die al tien jaar of langer actief zijn, begrijpen het belang van site-optimalisatie niet volledig.
Na een lange periode begint een website vast te lopen. De frontend-bestanden kunnen overdreven codeblokken of vergrendelde, verborgen bits bevatten. Dit komt het meest voor in JavaScript-bestanden of afbeeldingen. Het kan belangrijk zijn om een aangename website te maken voor de gebruikerservaring, maar zonder een geoptimaliseerde website heeft het ontwerp misschien niet eens de kans om ongeduldige gebruikers volledig te belasten.
De onderstaande tips zijn bedoeld voor beginnende en gevorderde webontwikkelaars het optimaliseren van hun pagina's op z'n best. Er zijn veel technieken beschikbaar en elk zal zich anders gedragen, afhankelijk van de problemen waar uw website aan lijdt. Probeer een paar gebieden af te skomen en kijk of je deze technieken in je eigen merktekens kunt toepassen.
HTTP-verzoeken
Elke keer dat uw website wordt geladen, wordt er een HTTP-verzoek naar een externe server verzonden. Dit type gegevensoverdracht wordt a genoemd netwerk protocol specifiek gebruikt voor het distribueren en opslaan van leesbare bestanden. Deze bevatten vaak uw standaard frontend-code, zoals HTML, CSS en JavaScript.
Zodra het verzoek is verzonden, zal uw browser elk pagina-element parseren. Afhankelijk van de parsing-engine wordt elke website anders geladen en verschijnen de elementen in verschillende volgorde op basis van overdrachtssnelheden. Internet Explorer zal bijvoorbeeld webpagina's anders weergeven dan Chrome of Safari, en al deze gebruiken iets andere ontleedmotoren dan Firefox of Opera.
Waar moet rekening mee worden gehouden, is hoe lang de aanvraagtijd is voor elk bestand en of deze trend consistent is. Overweeg om meer dan 100.000 of 1 miljoen bezoekers per maand te ontvangen. Het is de taak van de browser om elk pagina-element samen te voegen en externe bestanden in het geheugen te laden.
Vaak bevatten de factoren die de geoptimaliseerde snelheidsreferentie van een website bevatten, JavaScript of grote afbeeldingsbestanden. Met de popularisatie van Verizon FiOS is het gebruikelijk dat internetsnelheden 600 kbps bereiken en blijven klimmen! Helaas is dit niet de norm en zelfs met hogesnelheidsverbindingen is het mogelijk om optimalisatiefouten te ervaren.
Remedies voor siteprestaties
We zijn niet alleen op het gebied van webontwikkeling en frontend-optimalisatie. Voor het juiste werk dat moet worden voltooid, zijn er bepaalde gereedschappen nodig om de klus te klaren.
Google heeft een project uitgebracht met de titel Paginasnelheid, dat is ontwikkeld om ontwikkelaars te helpen hun websites te optimaliseren en naar de beste prestatieniveaus te zoeken. Oorspronkelijk begon het project als een open-source Firebug-add-on en wordt nu geaccepteerd als referentie van derden voor websitetests.
Een andere optie voor Firebug-gebruikers is de YSlow-add-on van Yahoo! Het script analyseert elke webpaginaverzoek en suggereert de meest voorkomende manieren om de prestaties te verbeteren. Deze suggesties zijn gebaseerd op de Yahoo! Ontwikkelaarshulpmiddel voor beste optimaliseringspraktijken in Webontwerp.
Het programma kan aanvankelijk een beetje schurend zijn omdat het zoveel informatie bevat. Blijf bij de basis en door het volgen van eenvoudige documentatie moet het proces een fluitje van een cent zijn.
Ontwikkelaars zijn altijd geïnteresseerd in het springen op een project om code op te splitsen, dus dit zou geen goed idee moeten zijn. Voor een beetje hulp kun je de YSlow-hulpgids raadplegen.
Snelheidstechnieken
Er zijn enkele eenvoudige trucs die u onmiddellijk op uw website kunt toepassen om de prestaties te verbeteren. De eerste en gemakkelijkste manier is om uw CSS- en JavaScript-bestanden te scheiden.
CSS-code hoort in de kop van uw document. Dit is handig omdat CSS-eigenschappen moeten worden geparseerd terwijl de DOM wordt geladen. Zodra een webbrowser uw CSS-stijlen in de kop herkent, wacht deze totdat de webpagina volledig is weergegeven totdat alle stijlen zijn geladen. Ook alle afbeeldingen die worden gebruikt voor pictogrammen of achtergrondontwerpen hebben tijd nodig om te laden en moeten dit eerst doen.
Aan de andere kant kan het verplaatsen van alle JavaScript-bestanden naar de voettekst van uw site de ophangtijden dramatisch oplossen. Veel browsers blokkeren parallelle downloads wat betekent dat voordat de pagina wordt weergegeven de webbrowser van een gebruiker 4 seconden kan stoppen om de externe JS-inhoud volledig te laden.
Dit is niet altijd mogelijk en ook niet altijd noodzakelijk voor elke website. Als uw pagina's hetzelfde laden met gelijke responstijden ongeacht bestandsverwijzingen opnemen, neem dan geen moeite met het manoeuvreren van spelen.
Dynamische inhoud kan niet worden geladen totdat de volledige DOM is voltooid, maar soms worden hierdoor fouten geretourneerd. Test CSS / JS inclusief om te zien of u eventuele optimalisatievoordelen kunt terugsturen.
Bestandsgrootte Compressie
Het comprimeren van grote bestanden is erg populair geworden. Het kan nu zelfs worden gebruikt op webpagina's om de laadtijden te verminderen en de bestandsgroottes zeer laag te houden. Veel van het werk is al gedaan en met tools zoals YUI Compressor mini-sized bestanden zijn een no-energie-proces.
Er zijn tal van andere gratis diensten op het internet om ook met deze taak te helpen. Verklein CSS heeft een volledige CSS-compressie-interface om het proces eenvoudig te maken. Dezelfde website heeft ook een aangepaste JavaScript-compressor die veel van dezelfde taken uitvoert, maar de scripting georganiseerd houdt.
U kunt ook overwegen om de grootste afbeeldingen in uw webpagina's te comprimeren. Dit kan worden gedaan met elke fotobewerkingssoftware zoals Adobe Photoshop of GIMP door eenvoudig de afbeelding opnieuw te samplen met een lagere resolutie. PNG-afbeeldingen exporteren gemiddeld veel kleiner dan jpg- of TIFF-indelingen. Er zijn ook tal van online hulpmiddelen zoals Image Optimizer om te helpen bij het compressieproces.
Broncontrole en statistieken
Dit is een routine die niet vaak wordt toegepast door webontwikkelaars die verbluffende resultaten kunnen bieden. Door alle pagina-elementen in uw website te analyseren, kunt u zien wat het langst in beslag nam en de volgorde waarin elk stuk werd geladen.
De populairste tool Mozilla Firebug is een plug-in voor de Firefox-browser. Deze app installeert een kleine werkbalk onder aan uw browser om responstijden, header-informatie, pagina-elementen en scripts voor elke website te controleren. Het script is ook geport naar Firebug Lite als een extensie voor Google Chrome.
Apache met mod_pagespeed
Niet alle setups zullen een Apache-webserver draaien, dus deze optie is niet altijd beschikbaar. Deze module is direct gerelateerd aan Google's Paginasnelheidmonitor eerder vermeld. De code voor mod_pagespeed was oorspronkelijk gebaseerd op veel bibliotheken uit de databases van Google Code.
Met Apache kunnen serverbeheerders kleine pakketten genaamd modules installeren om de prestaties van hun servers te verbeteren. mod_pagespeed is een van deze modules die tijdens runtime automatisch optimalisatietechnieken uitvoert. Er zijn te veel processen om op te noemen, hoewel sommige van de hoofdtoepassingen HTML / CSS / JS-compressie en image caching on-the-fly zijn.
Het project is momenteel ondergebracht bij Google en staat open voor ontwikkelaars. Google heeft samen met GoDaddy mod_pagespeed geïmplementeerd in alle hostingaccounts met Apache HTTP-server.
Hoewel er veel andere opties beschikbaar zijn, is het ontwikkelen van frontend-ontwikkelaars een van de meest intense, vooral als het gaat om pre-optimalisatie voor cruciale webpagina's. Optimalisatie voor sitekoppelingen en grote afbeeldingen kan een uiterst saaie en lonende taak zijn.
Overweeg enkele van de technieken die in dit artikel worden geïntroduceerd en kijk hoe deze kunnen worden toegepast in uw webprojecten. Vaak nemen ontwikkelaars niet genoeg tijd om hun werk te waarderen en oude stukjes code op te ruimen. Als je nog steeds op zoek bent naar enkele tips, lees dan onze ultieme gids voor weboptimalisatie voor tips over onderhoud aan de voorkant en handige prestatieverbeteringen.
