Koda

Vad varje webbutvecklare borde veta om front-end-prestanda

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.

Story of a Web Request

webbsidans tidslinje

När en besökare begär en sida från din webbplats, händer flera saker:

    • Din webbserver returnerar ett HTML-dokument;
    • Den besökares webbläsare söker efter och begärde länkade filer (CSS, JavaScript, bilder);
    • Din webbserver returnerar de länkade filerna;
    • Besökarens webbläsare visar dessa filer, kör dem eller tittar igenom dem för fler saker att begära (t.ex. CSS-bakgrundsbilder).

      Medan denna process verkar enkelt nog kan ett antal komplikationer verkligen sakta ner det:

      • Varje begärd fil har rubriker som också måste skickas. Att skicka många små filer skapar onödigt overhead, vilket du undviker med ett par stora filer.
      • De flesta webbläsare är begränsade i antalet filer som de kan hämta från en domän åt gången. Om du har 24 filer att ladda ner från samma domän börjar den nionde inte hämtas tills den första är klar.
      • Många webbläsare blockerar alla parallella nedladdningar när du laddar extern JavaScript.

      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.

      5 Snabba ändringar för att förbättra din webbplatss prestanda

      1. Flytta din JavaScript till Footer

      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.


      2. Sätt CSS först

      Att ladda CSS först är lika viktig som att sätta JavaScript i slutet av HTML-dokumentet, av två skäl:

      1. CSS innehåller ofta bakgrundsbilder som kräver en annan omgång av förfrågningar. Att få dessa startade ASAP är viktigt.
      2. Sidor görs så snart CSS är klar.

      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.


      3. Kompilera och minimera din CSS och JavaScript

      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:


      4. Var försiktig med skript från tredje part

      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:


      5. Mät dina resultat

      gtmetrix

      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:

      • Firefox Firebug
        Kolla in fliken Nät i Firebug för att se en visuell tidslinje för hur lång tid din webbplats tar att ladda och varför det är så.
      • YSlow for Firebug
        Yahoo har släppt en plug-in för Firebug som analyserar en webbplats mot dess YSlow-rekommendationer och föreslår sätt att förbättra prestanda.
      • PageSpeed ​​for Firebug
        Det fungerar precis som YSlow men bygger på Googles rekommendationer för PageSpeed.
      • GTMetrix
        Det här verktyget tar en URL och levererar en fullständig rapport om webbplatsens prestanda baserat på YSlow och PageSpeed. Det är bekvämt när Firebug inte är tillgängligt eller du vill dela resultaten via en länk.

      Går ett steg vidare

      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.


      Lägg till Expires Headers

      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.


      Använd Gzip-komprimering

      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.


      Överväg att installera mod_pagespeed

      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å.

      Slutsats

      Ä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.

      webbplats hastighet programmering koda prestanda