Alltför ofta som utvecklare ignorerar vi ett viktigt sista steg innan vi startar en webbplats: optimera för prestanda .
De flesta utvecklare erkänner nu att den organiserade, giltiga koden säkerställer underhåll och kompatibilitet.
Den som tvivlar på detta måste bara prata med en utvecklare som har plockat upp arbete på en gammal webbplats som är fylld med oorganiserad, okommentarisk spaghettikod.
Precis som att förbereda vår kod som ska läsas av andra utvecklare är viktig, så förbereder vi vår kod som ska läsas av webbläsare. Stor webbutveckling kan börja med bra organisation, men det slutar med stor optimering.
Den här artikeln introducerar bästa praxis för front-end-prestanda.
När en besökare begär en sida från din webbplats, händer flera saker:
Medan denna process verkar enkelt nog kan ett antal komplikationer verkligen sakta ner det:
Medan allt detta kan höra något komplicerat, finns det bästa metoder att följa för att göra det mycket enklare. Både Google och Yahoo erbjuder ganska omfattande riktlinjer för att optimera webbplats optimering:
Många av deras rekommendationer kräver lite arbete. Nedan följer de fem bästa sakerna du kan göra idag för att förbättra din webbplats prestanda med minimal ansträngning.
Att flytta dina JavaScript-filer till sidfoten är det snabbaste och enklaste du kan göra för att förbättra prestanda. Många webbläsare blockerar parallella nedladdningar när du laddar externa JavaScript-filer. Genom att lägga in dina filer i sidfoten, kommer webbläsare att börja ladda andra saker först.
Se dock ut för biverkningar till timing och utseende. Om du använder JavaScript för att ändra utseendet på ett element, kommer det inte att utföras förrän efter längre tid.
Att ladda CSS först är lika viktig som att sätta JavaScript i slutet av HTML-dokumentet, av två skäl:
Genom att placera CSS högst upp i dokumentet ser du till att alla bakgrundsbilder börjar ladda omedelbart och att din webbplats görs så snabbt som möjligt.
När du skriver kod för underhåll, använder du flera olika stilark och JavaScript-filer är ofta meningsfulla. När du optimerar för prestanda är det nästan det värsta du kan göra. Med varje fil du lägger till måste en rubrik skickas och en ytterligare begäran måste gå till och från servern.
Kombinera alla dina CSS i en fil och hela din JavaScript till en annan, och minimera dem båda. (Glöm inte att placera CSS längst upp i HTML-dokumentet och JavaScript i sidfoten.)
Även om omkompilering och minifiering av dina filer efter varje förändring kan låta som en smärta, är prestandakursen verkligen dramatisk.
Kompilering och minimering resurser:
Många webbplatser innehåller idag skript från tredje part och widgets som laddar in data från andra servrar. Exempel är Tweet-knappen, Facebook-fältet, Dela den här knappen och även Google Analytics. Du skulle tro att dessa skulle alla vara väl konstruerade, men många är inte. Till exempel, Digg widget gör nio förfrågningar , är 52 KB och blockerar huvudsidan från nedladdning!
Använd dessa widgets sparsamt, mäta deras prestanda och leta efter asynkrona alternativ. Alternativ till de mest populära widgetsna är tillgängliga; Installera dem är lite mer komplicerat, men de fungerar mycket bättre. Du kan vanligtvis hitta dem med lite grävning.
Asynkrona widget-resurser:
Ett antal bra verktyg där ute gör det enkelt att mäta prestandan på din webbplats. Vissa kan användas i webbläsaren; andra är online:
De flesta webbutvecklare skulle kunna implementera de fem tipsen ovan ganska enkelt. Det är sagt att ett antal andra saker är värda att göra om du vill gräva lite djupare och optimera serverns konfiguration.
Inkludera en utgångsrubrik med varje fil som din server skickar. Detta berättar för webbläsaren hur länge filen är bra för. På så vis vet webbläsaren att spara filen för nästa gång den refereras, så att webbläsaren inte behöver hämta den igen från servern.
Många webbplatser innehåller samma CSS-fil på varje sida, men det finns ingen anledning att en besökare borde ladda ner den för varje sida. webbläsaren bör veta att cache det.
Dagens datorer är verkligen snabba. Gzip-komprimering drar nytta av detta genom att be servern att komprimera varje fil innan den skickas till besökaren.
Den besökares webbläsare hämtar och komprimerar den sedan. Tidigare var vi tvungna att överväga serverns resurser för att bestämma om det skulle aktiveras. Idag finns det i princip ingen nackdel för att möjliggöra gzip.
Google har just släppt en Apache-modul som heter mod_pagespeed . Det implementerar automatiskt nästan alla teknikerna i den här artikeln.
Att förstå teknikerna innan man genomför den här modulen är dock fortfarande viktigt. om du vet hur webbplatsen fungerar kan du dra nytta av mod_pagespeeds många filter. Ett sådant filter, Kombinera CSS , finner, kombinerar och minifierar all CSS som refereras i HTML.
Modulen har ett antal filter och inställningar som kan förbättra webbplatsens prestanda. Alla är värda att titta på.
Även om det inte är det mest glamorösa ämnet, förtjänar optimering mer uppmärksamhet. Vårt jobb som utvecklare är att lära sig branschens bästa praxis för att leverera högkvalitativt arbete till våra kunder och användare.
Detta inlägg skrevs uteslutande för Webdesigner Depot av Joel Sutherland, grundare och webbutvecklare på Nya Media-kampanjer . Han är en del av laget som just lanserade Hi-fi , ett modernt innehållshanteringssystem byggt för designers med sina kunder i åtanke. Följ Joel på Twitter eller kontakta honom på HiFi-webbplatsen.
Känner du till ett enkelt sätt att förbättra en webbplatss prestanda som inte nämns i den här artikeln? Vänligen dela den och din erfarenhet i kommentarerna nedan.