Share
Vi vet alla att det finns otaliga anledningar till att webbläsningstider skyrocket, men att hitta problemet kan vara dyrt både i tid och pengar. Så varför slösar ansträngningen när någon annan - eller något annat - kan göra allt det smutsiga arbetet för dig?
Träffa Yahoos YSlow, en gratis webbsida analysator för Firefox.
YSlow har två krav:
YSlow piggybacks på Firebug, så du måste installera tilläggen i ovanstående ordning innan du fortsätter.
Webbdesigners, utvecklare och copywriters strävar efter att ha det mest unika och intressanta innehållet i jämförelse med sina konkurrenter.
Du kan ha tillbringat dagar som perfektar ditt nya blogginlägg och nästan fallit av din stol med spänning när du tittar på den för första gången. Men efter att en ström av besökare översvämmer din webbplats märker du att saker inte längre löper smidigt. Under press kan din nya webbplats reagera som en Commadore 64.
Webbplatsanalysverktyg faller vanligen i två kategorier:
YSlow passar in i den senare. Det använder fördefinierade regeluppsättningar för att betygsätta prestanda för en webbsida och verktyg från tredje part (som Smush.it och JS Minifiers) för att hjälpa till att lösa eventuella problem.
Det finns tre visningar:
YSlow innehåller sex användbara verktyg: Dessa spänner från JavaScript-kodstestning till bildoptimering via Smush.It (ett annat gratis webbprogram från Yahoo). Hela applikationen är invecklad i Firebugs popup-fönster, som kan öppnas och stängas av en användbar ikon på webbläsarens aktivitetsfält.
Låt oss hoppa rätt in med en närmare titt på "Grade" -vyn.
Med hjälp av Envats hemsida som ett exempel, vilket är en relativt låg trafikplats, ser vi att den totala prestationspoängen är betygsatt till 74 av 100, med en gul "C" -grad. Men vad betyder det här egentligen? Webbsidan är trots allt perfekt i webbläsaren. Nåväl, vi måste titta närmare på reglerna till vänster om att få reda på det här.
Reglerna är indelade i kategorier: innehåll, cookies, CSS, bilder, JavaScript och server. Som YSlow inspekterade element i DOM, graderade den var och en på en fördefinierad regeluppsättning (i detta fall YSlow V2). Ju närmare ett element fastnade på reglerna, ju högre gjorde det. När alla poäng har samlats in, fick den slutliga betyget.
I fråga om Envato gjorde alla användar gränssnittsregler mycket, men serverns regler utfördes mindre effektivt. Detta sänkte slutkursen.
Tack och lov förklarar varje regel hur problemet ligger och ger en detaljerad förklaring om hur man löser problemet. Den här funktionen kommer att ge en stor lättnad till alla som är nya för att optimera webbplatser.
För vissa är vissa regler viktigare än andra. YSlow ger dig en standardregeluppsättning, men låter dig också byta till "klassisk", "liten webbplats eller blogg" eller skapa din egen. Om du inte bryr dig om att använda Content Delivery Networks, redigera bara en regeluppsättning och ta bort den funktionen. Det kan verkligen inte vara enklare.
I komponentvisningen visas elementen från en analys i en ren, expanderbar datatabell.
Även om det här avsnittet ger en djupare analys kan data som ett filutgångsdatum eller svarstid vara till hjälp för att förstå problematiska områden. Om du har GZIP-komprimering aktiverad kan du se skillnaden i filstorlek här.
Alla älskar en graf. YSlow gör också.
Statistik sidan är ett snabbt och enkelt sätt att förstå den totala vikten av dina HTTP-förfrågningar. Enkelt sagt, det finns två grafer: tom cache och primat cache. Dessa diagram bryter din webbplats ner i HTML, JavaScript, bilder och så vidare. Filstorlekarna för varje visas sedan som pajsegment. Tom cache representerar en webbläsares första besök på webbsidan. Prime Cache indikerar vilka komponenter som skulle eller inte skulle finnas i webbläsarens cache när de granskades. Ren, tydlig och effektiv.
Slutligen har vi verktyg. Omedelbart kommer du att märka en brist på specificitet mot den analyserade webbsidan, men låt dig inte lura. Varje verktyg är en kraftfull tidsbesparing när det gäller att krympa, minska och komprimera ditt innehåll. Om du är bekant med begreppet optimering kan du ha stött på liknande verktyg innan.
När du sänker sidlastningstiden är det viktigt att du tar bort vitt utrymme och kommentarer från dina dokument och optimerar dina bilder.
Lyckligtvis utför dessa verktyg allt det hårda arbetet för dig, för att göra detta för hand kommer utan tvivel att ta dig djupt in på natten. Ingen mängd energidrycker kommer att hålla dig från att gå galen när du har raderat en JavaScript-funktion av en olycka för hundra gången.
Det finns åtta verktyg helt och hållet; som täcker dem alla skulle ta ett par artiklar. Så jag kommer att koncentrera mig på Yahoo! Smush.it som ett exempel.
Yahoo! Smush.it är ett litet webbprogram, som kan användas med YSlow eller direkt från din webbläsare.
Smush.it är helt enkelt en förlustfri bildoptimering. YSlow laddar upp bilderna för dig, som "smutsas" och presenteras i en tabell där du kan se den nya bilden, storleken och komprimeringsbesparingsprocenten.
Du kan även hålla filerna i samma katalogstruktur och ladda ner dem alla som en praktisk zip-fil.
Det finns gott om gratis applikationer med liknande verktyg, men de som är packade med YSlow är ett välkommet tillägg.
Som jag nämnde tidigare är Envatos YSlow prestationspoäng 74 med en betygsättning av C. Låt oss ta lite tid att analysera YSlows resultat och vad som kan göras för att förbättra slutresultatet.
Här är deras förslag till förbättringar, från början:
Denna regel går vidare till detaljer om att det finns sex externa JavaScript-skript och 17 externa bakgrundsbilder. Deras förslag är att kombinera filerna och använda CSS sprites för att lösa problemet.
Det första du behöver göra är att titta på komponentens vy, och i synnerhet JS-filerna.
Som webbadresserna visar är endast en JavaScript-fil värd på samma server som den analyserade sidan. Det innehåller anpassad JavaScript för WordPress. Två krävs för JQuery och Google Analytics, och de sista tre är från formspring.com.
Om JavaScript-filerna var egna, kan jag överväga att kombinera de anpassade applikationerna.js och formpring JS-filer till en och värd dem lokalt. Men endast filen application.js verkar anpassad. Så, jag vill verkligen inte leka med någon annans arbete. Särskilt eftersom vissa av dessa filer saknar licens / upphovsrättsinformation.
Att använda Googles webbhotell för jQuery anses också vara bra, men de borde uppdatera till den senaste versionen av jQuery: 1.4.2.
Så i det här fallet är det troligtvis bäst att ignorera denna regel eftersom någon ändring av de nuvarande metoderna kan leda till några problem längre ner i raden. Min enda verkliga oro är svarstiden för två av FormStack-filerna, på den här tiden pratar de över 360 ms för att svara. Om detta fortsätter kan det vara värt att hitta en metod för att vara värd för dem lokalt.
Nästa granskar vi bilderna; alla är värd lokalt, svara inom 40 ms och är ganska små i storlek. Detta berättar för oss att dessa filer redan är optimerade för den här sidan. YSlow föreslår att vi kombinerar dessa bilder och använder CSS sprites för att förbättra vår klass.
Om du inte är bekant med CSS sprites kan du klicka på länken "Läs mer", som tar dig till Yahoo! S bästa praxis för att påskynda din webbplats.
I det här fallet bör vi se en förbättring av bildens svarstid genom att använda en optimerad bild. CSS spriter arbete genom att kombinera dina bakgrundsbilder till en och sedan använda CSS för att anpassa den bilden med bakgrundsbild och bakgrundsposition. Det finns inget speciellt med CSS-användningen, så det borde vara kompatibelt med alla större webbläsare.
Många webbplatser kommer att ha en F-klass för denna regel, på grund av att det tar lite arbete att installera. Men fördelarna är mer än värda tidskostnaden. Dessutom erbjuder tjänster som Amazon överraskande billig hosting. Medan Envato helt använder CDN för sina högtrafikplatser, som Nettuts +, kan de ha bestämt att det inte är nödvändigt för en lägre trafikplats.
Återigen konfronteras vi med en regel som berör HTTP-förfrågningar. Utgår rubriker är vanliga, eftersom de tillåter komponenter att bli cacheable. Cachade komponenter (bilder, JavaScript, etc.) sparar tid och bandbredd för upprepade besök på en webbsida. Så det är värt att implementera utgångsdatum för ditt innehåll.
YSlow hittade 55 komponenter "utan ett långt framtida utgångsdatum" efter analys av Envato.com. De flesta komponenterna är bakgrundsbilder. Vi vet från det första förslaget, "Gör färre HTTP-förfrågningar", att vi kan använda CSS sprites för att minska antalet bakgrundsbilder, vilket automatiskt förbättrar den här betyget.
Att konfigurera "Expires" -rubriker är i allmänhet en enkel process, och kräver vanligtvis bara ett snabbt tillägg till .htaccess-filen. När de är applicerade ska alla dina komponenter nu ha lämpliga utgåvor utan ytterligare filmanipulation eller modifiering. För att få full inblick i arbetet med .htaccess-filen och rubrikerna krävs en artikel till sig själv. I stället för att gå in i detalj här har jag tagit med en uppsättning användbara länkar för vidare läsning:
YSlow hittade ett stilark utanför huvudelementet för Envato. Lyckligtvis är det den enklaste regeln att rätta till. Genom att hålla stilark längst upp på din webbsida ökar du automatiskt den hastighet som din webbsida laddar. När en gång flyttats ska YSlow rapportera en betygsättning A för den här regeln.
Om du tar bort oanvända vita utrymmen i dokumenten minskar dokumentets storlek och ökar därmed hastigheten vid vilken filen laddas ned. Som jag nämnde tidigare, ger YSlow oss ett verktyg för minifiering, så allt hårt arbete kan göras för oss.
Gå över till Verktygsvy och välj YUI CSS kompressor. I ögonkastet är dina CSS-filer minifiera och tillgängliga för nedladdning. Snabb, ren och enkel.
ETags ger ett sätt att validera en specifik version av en webbsida komponent (bilder, JavaScript, etc). De arbetar med webbservern för att matcha webbläsarens cachade innehåll mot innehållet på webbservern. Tyvärr har YSlow plockat upp på två saknade ETags för filer som finns på formspring.com. På grund av detta kan det vara bäst att följa YSlows förslag och ta bort ETags helt och hållet. Detta kan göras genom att lägga till "FileETag none"till din Apache-konfigurationsfil. Du bör nu se en förbättring av denna reglergrad.
Det finns många alternativ när det gäller webbplatsanalys, och jag skulle inte bli förvånad om du hade dina favoriter. Tillsammans med YSlow använder jag ytterligare fyra fria analysatorer. Som du kan förvänta dig, erbjuder varje en unik egenskap, och av det anledningen anser jag att det är viktigt att komma ihåg att inget verktyg kan ge en absolut kollisäker rapport.
För att ge dig en uppfattning om hur olika var och en av dessa genererar ett slutresultat, har jag tagit med en kort beskrivning och poängen som ges till Envatos hemsida.
Tillhandahålls av AOL, den här applikationen lägger till en mängd olika inställningar för din analys. Du kan simulera webbläsareversion, anslutningshastighet och visa visuella jämförelser med andra webbadresser. Det är en bra funktion om du vill starta A / B-testning.
Göra: N / A. Ger en optimerings checklista och laddningstider.
PageSpeed är en annan tillägg för Firefox och Firebug. Detta visas även i samma meny som YSlow och ger en liknande analys. Liksom YSlow använder den regler och rapporterar om hur bra varje komponent utför. Det kommer även att optimera och minska ditt innehåll.
Göra: 76/100
Fortfarande i beta, kommer denna gratis webbapplikation att kontrollera ditt innehåll, Alexa ranking, trafik, sökmotoroptimering, geo-metadata och mer. Återigen läggs till användbara tips med varje analys. Du kan till och med lägga till en widget på din webbplats och visa bort din "woorank score".
Göra: 65,8 / 100
Grader är en annan gratis webbapplikation, också tillgänglig för iPhone. Detta verktyg liknar WooRank, med ett rent och detaljerat gränssnitt. Det finns även ett dedikerat verktyg för att analysera bloggar: en unik funktion utav de fem som anges i den här artikeln.
Göra: 99/100
Applikationer som YSlow erbjuder en snabb och effektiv analys av webbsidor. De kan generera detaljerade rapporter från den information de samlar, tillhandahålla förslag eller verktyg för att lösa problem, och de kan sluta lära dig något på vägen. Men YSlow och dess alternativ kommer alltid att ha konkurrens: en dedikerad, erfaren och kvalificerad webbutvecklare eller SEO-analytiker.
Ingenting slår kunskap och övning Som vi såg, kommer flera analysverktyg alltid att komma med flera olika rapporter.
Det finns ingen sann lösning när det gäller sökmotoroptimering eller ökande webbsidor. En hjälpande hand som YSlow kan emellertid underlätta din arbetsbelastning och spara dig eller din kund mycket tid och, ännu viktigare, pengar, i det långa loppet.
Accentsconagua