Hur man mäter prestanda på webbplatsen

Att prata om optimeringsprocessen är nästan obefintlig bland nya webbdesigners. Även många webbdesigners som har varit verksamma ett årtionde eller längre förstår inte fullt ut vikten av webbplatsoptimering.

Efter en längre tid börjar en hemsida att mossa ner. Frontend-filerna kan innehålla överdrivna block av kod eller låsta, dolda bitar. Det här ses oftast inom JavaScript-filer eller bilder. Det kan vara viktigt att skapa en tilltalande webbplats för användarupplevelsen men utan en optimerad webbplats kan designen inte ens få chansen att ladda fullt ut på otåliga användare.

Tipsen nedan är för nybörjare-mellanliggande webbutvecklare intresserade av optimera sina sidor fullt ut. Det finns många tekniker tillgängliga och var och en kommer att uppträda olika beroende på vilka problem din webbplats lider av. Försök skimming några områden och se om du kan tillämpa dessa tekniker i dina egna märken.

HTTP-förfrågningar

Varje gång din webbplats laddar den skickas en HTTP-begäran till en fjärrserver. Denna typ av dataöverföring kallas a nätverksprotokoll används speciellt för att distribuera och lagra rentextfiler. Dessa inkluderar ofta din grundläggande frontendkod, som HTML, CSS och JavaScript.

När begäran har skickats kommer din webbläsare att analysera varje sidelement. Beroende på analysparametern laddas varje hemsida annorlunda och elementen kommer att visas i varierande ordning baserat på överföringshastigheter. Till exempel kommer Internet Explorer att göra webbsidor annorlunda än Chrome eller Safari, och alla dessa kör lite annorlunda parsningsmotorer än Firefox eller Opera.

Vad som måste beaktas är hur länge begäran är för varje fil tar och om denna trend håller konsekvent. Överväg att ta emot 100k eller 1 miljon besökare på en månad. Det är webbläsarens jobb att sammanfoga varje sidelement och ladda externa filer till minnet.

Ofta innehåller de faktorer som håller ner en webbplats optimerad hastighetsreferens clunky JavaScript, eller stora bildfiler. Med populariseringen av Verizon FiOS är det vanligt att Internethastigheter slår 600kbps och fortsätter att klättra! Tyvärr är detta inte normen och även med höghastighetsanslutningar är det möjligt att uppleva optimeringsfel.

Rättsmedel för webbplatsens prestanda

Vi är inte ensamma inom webbutveckling och frontendoptimering. För att korrekt arbete ska vara klart finns det vissa verktyg som krävs för att hantera jobbet.

Google har släppt ett projekt med titeln Sidhastighet som byggdes för att hjälpa utvecklare att optimera sina webbplatser och kontrollera de bästa resultaten. Ursprungligen startade projektet som en open-source Firebug add-on och är nu godkänd som en tredje part referens för webbplats testning.

Ett annat alternativ för Firebug-användare är Yahoo! S YSlow-tillägg. Skriptet analyserar varje webbsida begäran och föreslår de vanligaste sätten att förbättra prestanda. Dessa förslag är baserade på Yahoo! Utvecklare resurs för bästa optimering praxis i webbdesign.

Programmet kan vara lite abrasivt först eftersom det innehåller så mycket information. Håll bara fast vid grunderna och genom att följa enkel dokumentation ska processen vara en bit tårta.

Utvecklare är alltid intresserade av att hoppa på ett projekt för att bryta ner koden så att detta borde vara en brainer. För lite hjälp kan du kolla YSlow-hjälpguiden.

Hastighetstekniker

Det finns några enkla knep som du kan ansöka direkt på din webbplats för att påskynda prestanda. Det första och enklaste sättet är att skilja dina CSS- och JavaScript-filer.

CSS-koden hör i huvudet på ditt dokument. Detta är användbart eftersom CSS-egenskaper måste analyseras när DOM-filen laddas. När en webbläsare känner igen dina CSS-stilar i rubriken väntar den att fullständigt visa webbsidan tills alla stilar har laddats. Även bilder som används för ikoner eller bakgrundsdesign tar tid att ladda och borde göra det först.

På flipsidan kan alla JavaScript-filer flyttas till din sidfot, vilket kan dramatiskt lösa uppkopplingstider. Många webbläsare blockerar parallella nedladdningar vilket innebär att innan du gör sidan som en användares webbläsare kan stoppa i 4 sekunder för att ladda fullt externt JS inkluderar.

Det här är inte alltid möjligt, det är alltid nödvändigt för varje webbplats. Om dina sidor laddar upp samma sak med lika långa svarstider, oavsett om de innehåller filplaceringar, stör du inte med att manövrera några spelningar.

Dynamiskt innehåll kan inte laddas tills hela DOM är klar, men ibland kommer detta att returnera fel. Test ut CSS / JS innehåller för att se om du kan returnera några optimeringsfördelar.

Komprimering av filstorlek

Komprimering av stora filer har blivit mycket populär. Det kan nu även användas på webbsidor för att minska belastningstiderna och hålla filstorlekarna mycket låga. Många av arbetet har redan gjorts och med verktyg som YUI Compressor-miniatyrfiler är ingen energi-process.

Det finns gott om andra gratis tjänster på webben för att hjälpa till med den här uppgiften också. Minifiera CSS har ett helt CSS-komprimeringsgränssnitt för att göra processen enkel. Samma webbplats har också en anpassad JavaScript-kompressor som utför mycket av samma uppgifter men håller skriptet organiserat.

Du kan också överväga att komprimera de största bilderna på dina webbsidor. Detta kan göras med någon bildredigeringsprogramvara, till exempel Adobe Photoshop eller GIMP, genom att bara ommontera bilden med en lägre upplösning. PNG-bilder exporterar mycket mindre i genomsnitt än jpg- eller TIFF-format. Det finns också gott om onlineverktyg som Image Optimizer för att hjälpa till i komprimeringsprocessen.

Källkontroll och mätvärden

Detta är en rutin som inte ofta praktiseras av webbutvecklare som kan erbjuda fantastiska resultat. Genom att analysera alla sidelement på din webbplats kan du se vilka som tog längst att ladda och ordningen där varje bit var lastad.

Det mest populära verktyget Mozilla Firebug är en plug-in för Firefox-webbläsaren. Den här appen installerar ett litet verktygsfält längst ner i webbläsaren för att kontrollera svarstider, rubrikinformation, sidelement och skript för varje webbplats. Skriptet har också tagits in i Firebug Lite som en förlängning för Google Chrome.

Apache med mod_pagespeed

Inte alla inställningar körs en Apache webbserver, så det här alternativet är inte alltid tillgängligt. Den här modulen är direkt relaterad till Googles sidhastighetsmonitor nämnde tidigare. Faktum är att koden för mod_pagespeed ursprungligen baserades på många bibliotek från Google Kod: s databaser.

Apache tillåter serverns administratörer att installera små paket som heter moduler för att förbättra prestanda hos sina servrar. mod_pagespeed är en av dessa moduler som utför optimeringstekniker automatiskt vid körning. Det finns för många processer att lista, även om vissa av de viktigaste applikationerna inkluderar flyktig HTML / CSS / JS-komprimering och bild caching.

Projektet är för närvarande inrymt hos Google och är öppet för utvecklare. Google har arbetat med GoDaddy för att implementera mod_pagespeed i alla värdkonton som kör Apache HTTP-servern.

Även om många andra alternativ är tillgängliga, är frontendutveckling ett av de mest intensiva, särskilt med tanke på preoptimering för viktiga webbsidor. Optimering för sidhuvud och stora bilder kan vara en extremt tråkig men givande uppgift.

Tänk på några av de tekniker som introduceras i den här artikeln och se hur dessa kan tillämpas i dina webbprojekt. Ofta tar utvecklare inte tillräckligt med tid för att uppskatta sitt arbete och rensa gamla bitar av kod. Om du fortfarande är hankering för några tips bör du läsa vår ultimata webboptimeringsguide för tips på frontend underhåll och praktiska prestandaförbättringar.