Share
Vi vet alle at det er utallige grunner til at nettsiden lastetider skyrocket, men å finne frem til problemet kan være kostbart både i tid og penger. Så hvorfor kaste bort innsatsen når noen andre - eller noe annet - kan gjøre alt det skitne arbeidet for deg?
Møte Yahoo's YSlow, en gratis websiden analysator for Firefox.
YSlow har to krav:
YSlow piggybacks på Firebug, så du må installere tilleggene i ordren nevnt ovenfor før du fortsetter.
Webdesignere, utviklere og copywriters streber etter å ha det mest unike og interessante innholdet når de sammenlignes med sine konkurrenter.
Du har kanskje brukt dager til å perfeksjonere ditt nye blogginnlegg og nesten falt av stolen din med spenning når du ser den for første gang. Men etter at en strøm av besøkende oversvømmer nettstedet ditt, ser du at ting ikke lenger løper jevnt. Under press kan ditt nye nettsted svare som en Commadore 64.
Nettanalyseverktøy faller vanligvis inn i to kategorier:
YSlow passer inn i sistnevnte. Den bruker forhåndsdefinerte regelsett for å rangere ytelsen til en nettside og tredjepartsverktøy (for eksempel Smush.it og JS Minifiers) for å løse eventuelle problemer.
Det er tre visninger:
YSlow inneholder seks nyttige verktøy: Disse spenner fra JavaScript-kode testing til bildeoptimalisering gjennom Smush.It (et annet gratis webprogram fra Yahoo). Hele applikasjonen er pakket inn i Firebugs popup-vindu, som kan åpnes og lukkes av et praktisk ikon på nettleserens oppgavelinje.
La oss hoppe rett inn med en nærmere titt på "Grade" -visningen.
Ved å bruke Envatos hjemmeside som et eksempel, som er et relativt lavt trafikksted, ser vi at den samlede ytelsesscore er rangert til 74 av 100, med en gul "C" -grad. Men hva betyr dette egentlig? Tross alt gjør nettsiden perfekt i nettleseren. Vel, vi må ta en nærmere titt på reglene til venstre for visningen for å finne ut dette.
Reglene er delt inn i kategorier: innhold, cookies, CSS, bilder, JavaScript og server. Som YSlow inspiserte elementer i DOM, gradert den hver på et forhåndsdefinert regelsett (i dette tilfellet YSlow V2). Jo nærmere et element fast i reglene, desto høyere scoret det. Etter at alle scoreene er samlet, ble sluttkarakteren tildelt.
I tilfelle av Envato scoret alle brukergrensesnittreglene høyt, men serverreglene utførte mindre effektivt. Dette senket sluttkarakteren.
Heldigvis forklarer hver regel hvor problemet ligger og gir en detaljert forklaring på hvordan du løser problemet. Denne funksjonen vil gi en stor lettelse til alle som er ny for å optimalisere nettsteder.
For noen er visse regler viktigere enn andre. YSlow gir deg et standard regelsett, men lar deg også bytte til "klassisk", "lite nettsted eller blogg" eller lage din egen. Hvis du ikke bryr deg om å bruke innholdsleveringsnett, må du bare redigere et regelsett og fjerne den funksjonen. Det kunne egentlig ikke vært enklere.
Komponentvisningen viser elementene fra en analyse i en ren, utvidbar datatabell.
Mens denne delen gir en mer grundig analyse, kan data som en utløpsdato for fil eller svartid være nyttig for å forstå problematiske områder. Hvis du har GZIP-komprimering aktivert, kan du se filstørrelsesforskjellen her.
Alle elsker en graf. YSlow gjør også.
Statistikk siden er en rask og enkel måte å forstå totalvekten på dine HTTP-forespørsler. Enkelt sagt, det er to grafer: tom cache og primed cache. Disse grafene bryter nettstedet ditt ned i HTML, JavaScript, bilder og så videre. Filstørrelsene til hver vises da som pausegmenter. Tom cache representerer en nettlesers første besøk på nettsiden. Prime Cache indikerer hvilke komponenter som ville eller ikke ville være i nettleserens cache når de ble revidert. Rent, klart og effektivt.
Endelig har vi verktøy. Umiddelbart vil du merke en mangel på spesifisitet mot analysert nettside, men ikke bli lurt. Hvert verktøy er en kraftig tidsbesparende når det gjelder å krympe, redusere og komprimere innholdet ditt. Hvis du er kjent med ideen om optimalisering, kan det hende du har kommet over lignende verktøy før.
Når du reduserer sidebelastningstider, er det viktig å fjerne hvitt mellomrom og kommentarer fra dokumentene, og optimalisere bildene dine.
Heldigvis utfører disse verktøyene alt hardt arbeid for deg, fordi det å gjøre dette for hånd vil utvilsomt ta deg dypt inn i natten. Ingen mengde energidrikker vil holde deg fra å gå gal etter at du har slettet en JavaScript-funksjon ved et uhell for hundre gang.
Det er åtte verktøy helt og holdent; dekker alle av dem ville ta et par artikler. Så jeg vil konsentrere meg om Yahoo! Smush.it som et eksempel.
Yahoo! Smush.it er et lite webprogram, som kan brukes med YSlow eller rett fra nettleseren din.
Smush.it er ganske enkelt et lossless bildeoptimerer. YSlow laster opp bildene for deg, som er "smusset" og presentert i et bord hvor du kan se det nye bildet, størrelsen og kompresjonsbesparingsprosenten.
Du kan til og med beholde filene i samme katalogstruktur og laste dem alle ned som en praktisk zip-fil.
Det er mange gratis applikasjoner med lignende verktøy, men de som er pakket med YSlow er et velkomment tillegg.
Som nevnt tidligere, er Envato YSlow ytelsesscore 74 med en karakter på C. La oss ta litt tid til å analysere YSlows resultater, og hva som kan gjøres for å forbedre sluttresultatet.
Her er de foreslåtte forbedringene, fra toppen:
Denne regelen går videre til detaljene at det er seks eksterne JavaScript-skript og 17 eksterne bakgrunnsbilder. Deres forslag er å kombinere filene og bruke CSS sprites for å løse problemet.
Det første du må gjøre er å se på komponentvisningen, og spesielt JS-filene.
Som webadressene viser, er bare én JavaScript-fil vert på samme server som den analyserte siden. Dette inneholder tilpasset JavaScript for WordPress. To er påkrevd for JQuery og Google Analytics, og de siste tre er fra formspring.com.
Hvis JavaScript-filene var mine egne, kan jeg vurdere å kombinere de egendefinerte application.js og formprene JS-filer til en og hoste dem lokalt. Imidlertid ser bare filen application.js ut til å være tilpasset. Så jeg vil virkelig ikke leke med andres arbeid. Spesielt som noen av disse filene mangler lisens / copyright informasjon.
Bruke Googles hosting for jQuery anses også for å være god praksis, men de bør oppdatere til den nyeste versjonen av jQuery: 1.4.2.
Så i dette tilfellet er det sannsynligvis best å ignorere denne regelen, da eventuelle endringer i de nåværende metodene kan føre til noen problemer lenger nedover linjen. Min eneste reelle bekymring er svaret for to av FormStack-filene, på dette tidspunktet snakker de hver over 360 ms for å svare. Hvis dette fortsetter, kan det være verdt å finne en metode for å være vertskap for dem lokalt.
Neste ser vi på bildene; alle er vert lokalt, svarer innen 40 ms og er ganske små i størrelse. Dette forteller oss at disse filene individuelt er optimalisert for denne siden. YSlow foreslår at vi kombinerer disse bildene og bruker CSS sprites for å forbedre karakteren vår.
Hvis du ikke er kjent med CSS sprites, kan du klikke på lenken "Les mer", som tar deg til Yahoo! S beste praksis for å øke hastigheten på nettsiden din.
I dette tilfellet, ved å bruke ett optimalisert bilde, bør vi se en forbedring av bilde responstid. CSS spriter arbeid ved å kombinere bakgrunnsbildene til en og deretter bruke CSS til å justere bildet med bakgrunnsbilde og bakgrunnsposisjon. Det er ikke noe spesielt med CSS som brukes, så det bør være kompatibelt med alle de store nettleserne.
Mange nettsteder vil ha en F-karakter for denne regelen, på grunn av at det tar litt arbeid å sette opp; fordelene er imidlertid mer enn verdt tiden. I tillegg tilbyr tjenester som Amazon overraskende billig hosting. Mens Envato helt bruker CDN for sine høye trafikksteder, som Nettuts +, kan de ha bestemt seg for at det ikke er nødvendig for et lavere trafikksted.
Igjen står vi overfor en regel som er opptatt av HTTP-forespørsler. Utløper overskrifter er vanlige, fordi de tillater at komponenter blir cacheable. Bufret komponenter (bilder, JavaScript, osv.) Sparer tid og båndbredde for gjentatte besøk på en nettside. Så det er verdt å implementere utløpsdatoer for innholdet ditt.
YSlow fant 55 komponenter "uten en langt fremtidig utløpsdato" etter å ha analysert Envato.com. De fleste komponentene er bakgrunnsbilder. Vi vet fra det første forslaget, "Gjør færre HTTP-forespørsler," at vi kan bruke CSS sprites for å redusere antall bakgrunnsbilder, som automatisk forbedrer denne karakteren.
Å sette opp "Utløper" -overskrifter er vanligvis en enkel prosess, og krever vanligvis bare et raskt tillegg til .htaccess-filen. Når du har brukt, bør alle komponentene dine nå ha riktig utløper overskrifter uten ytterligere filmanipulering eller modifikasjon. For å få fullt innblikk i å jobbe med .htaccess-filen og overskriftene krever en artikkel til seg selv. I stedet for å gå i detalj her, har jeg tatt med et sett med nyttige lenker for videre lesing:
YSlow fant et stilark utenfor hovedelementet for Envato. Heldigvis er dette den enkleste regelen å rette opp. Ved å holde stilark øverst på websiden din øker du automatisk hastigheten som din nettside vil laste inn. Når en gang er flyttet, bør YSlow rapportere en klasse A for denne regelen.
Hvis du fjerner ubrukt hvitt mellomrom i dokumentene dine, reduseres størrelsen på dokumentet, og øker dermed hastigheten der filen lastes ned. Som nevnt tidligere gir YSlow oss et redigeringsverktøy, slik at alt hardt arbeid kan gjøres for oss.
Gå over til Verktøy-visningen og velg YUI CSS kompressor. I blikket i et øye blir CSS-filer minifisert og tilgjengelig for nedlasting. Rask, ren og enkel.
ETags gir en måte å validere en bestemt versjon av en nettside komponent (bilder, JavaScript, etc). De jobber med webserveren for å matche nettleserens bufret innhold mot innholdet på webserveren. Dessverre har YSlow hentet på to manglende ETags for filer som er hosted på formspring.com. På grunn av dette kan det være best å følge YSlows forslag og fjerne ETags i sin helhet. Dette kan gjøres ved å legge til "FileETag ingen"til Apache konfigurasjonsfilen din. Du bør nå se en forbedring i denne regelen klasse.
Det er mange alternativer når det gjelder nettsideanalyse, og jeg ville ikke bli overrasket om du hadde favorittene dine. Sammen med YSlow bruker jeg ytterligere fire gratis analysatorer. Som du kanskje forventer, tilbyr hver en unik funksjon, og av den grunn alene tror jeg det er viktig å huske at ingen verktøy kan gi en absolutt kollisikker rapport.
For å gi deg en ide om hvor forskjellige hver av disse genererer et sluttresultat, har jeg tatt med en kort beskrivelse og poengsummen gitt til Envatos nettside.
Utgitt av AOL, legger denne applikasjonen til en rekke innstillinger til analysen din. Du kan simulere nettleserversjon, tilkoblingshastighet og utføre visuelle sammenligninger med andre nettadresser. Det er en flott funksjon hvis du ønsker å starte A / B-testing.
Score: N / A. Gir en optimalisering sjekkliste og last timings.
PageSpeed er en annen tillegg for Firefox og Firebug. Dette vises til og med i samme meny som YSlow og gir en lignende analyse. Som YSlow bruker den regler og rapporterer om hvor godt hver komponent utfører. Det vil til og med optimalisere og redusere innholdet ditt.
Score: 76/100
Fortsatt i beta, vil dette gratis webprogrammet sjekke innholdet ditt, Alexa rangering, trafikk, søkemotoroptimalisering, geo-metadata og mer. Igjen, er nyttige tips lagt til med hver analyse. Du kan til og med legge til en widget på nettstedet ditt, som viser din "woorank score".
Score: 65.8 / 100
Grader er et annet gratis webprogram, også tilgjengelig for iPhone. Dette verktøyet er ganske lik WooRank, med et rent og detaljert grensesnitt. Det er enda et dedikert verktøy for å analysere blogger: en unik funksjon ut av de fem som er oppført i denne artikkelen.
Score: 99/100
Applikasjoner som YSlow tilbyr en rask og effektiv analyse av nettsider. De kan generere detaljerte rapporter fra informasjonen de samler, gi forslag eller verktøy for å løse problemer, og de kan ende opp med å lære deg noe underveis. Men YSlow og dets alternativer vil alltid ha konkurranse: en dedikert, erfaren og kvalifisert webutvikler eller SEO-analytiker.
Ingenting slår kunnskap og praksis; Som vi så, vil flere analysverktøy alltid komme opp med flere forskjellige rapporter.
Det er ingen sann løsning når det gjelder søkemotoroptimalisering eller økt websidetid. En hjelpende hånd som YSlow kan imidlertid lette arbeidsbelastningen og spare deg eller din klient mye tid og enda viktigere penger i det lange løp.
Accentsconagua