Slik måler du ytelse på websiden

Å snakke om optimaliseringsprosessen er nesten ikke-eksisterende blant nybegynnere webdesignere. Selv mange webdesignere som har vært i virksomhet et tiår eller lengre, forstår ikke fullt ut betydningen av nettstedoptimalisering.

Etter en lengre periode begynner en nettside å falle ned. Frontend-filene kan inneholde overdrevne blokker med kode eller låste, skjulte biter. Dette er vanligvis sett i JavaScript-filer eller -bilder. Det kan være viktig å skape et behagelig nettsted for brukeropplevelsen, men uten et optimalisert nettsted kan designet ikke engang ha muligheten til å fullføre på utålmodige brukere.

Tipsene nedenfor er for nybegynner-mellomliggende webutviklere interessert i optimalisere sidene sine til det fulleste. Det finnes mange teknikker tilgjengelig, og hver enkelt oppfører seg annerledes avhengig av hvilke problemer nettstedet ditt lider av. Prøv å skumle noen områder og se om du kan bruke disse teknikkene i dine egne karakterer.

HTTP-forespørsler

Hver gang nettstedet laster, sender det en HTTP-forespørsel til en ekstern server. Denne typen dataoverføring kalles a nettverksprotokoll Brukes spesielt for distribusjon og lagring av enkle tekstfiler. Disse inkluderer ofte din grunnleggende frontendkode som HTML, CSS og JavaScript.

Når forespørselen er sendt, vil nettleseren din analysere hvert sideelement. Avhengig av analysemotoren vil hver nettside belastes annerledes, og elementene vil vises i varierende rekkefølge basert på overføringshastigheter. For eksempel vil Internet Explorer gjøre nettsider forskjellig fra Chrome eller Safari, og alle disse kjører litt forskjellige parsing motorer enn Firefox eller Opera.

Det som må vurderes er hvor lenge forespørselstiden er for hver fil tar, og hvis denne trenden holder konsekvent. Vurder å motta opp til 100k eller 1 million besøkende i en måned. Det er nettleserens jobb å sammenkoble hvert sideelement og laste eksterne filer til minnet.

Ofte innebærer faktorene som holder ned et nettsteds optimaliserte hastighetsreferanse clunky JavaScript, eller store bildefiler. Med popularisering av Verizon FiOS er det vanlig at Internett-hastigheter rammer 600kbps og fortsetter å klatre! Dessverre er dette ikke normen, og selv med høyhastighetsforbindelser er det mulig å oppleve optimaliseringsfeil.

Rettsmidler for ytelse på nettstedet

Vi er ikke alene innen webutvikling og frontendoptimalisering. For riktig arbeid som skal gjennomføres, er det visse verktøy som kreves for å håndtere jobben.

Google har gitt ut et prosjekt med tittelen Sidehastighet som ble bygd for å hjelpe utviklere til å optimalisere sine nettsteder og kontrollere de beste resultatene. Opprinnelig startet prosjektet som en åpen kildekode Firebug add-on og er nå akseptert som en tredjeparts referanse for nettsiden testing.

Et annet alternativ for Firebug-brukere er Yahoo! S YSlow-tillegg. Skriptet analyserer hver nettsideforespørsel og foreslår de vanligste måtene å forbedre ytelsen. Disse forslagene er basert på Yahoo! Utviklerressurs for beste optimaliseringspraksis i webdesign.

Programmet kan være litt slitende først da det inneholder så mye informasjon. Bare hold deg til det grunnleggende og ved å følge enkel dokumentasjon skal prosessen være et stykke kake.

Utviklere er alltid interessert i å hoppe på et prosjekt for å bryte ned koden, så dette burde være en no brainer. For litt hjelp kan du sjekke ut hjelpeguiden til YSlow.

Hastighetsteknikker

Det er noen enkle triks som du kan søke på nettstedet ditt umiddelbart for å øke hastigheten på ytelsen. Den første og enkleste måten er å skille CSS- og JavaScript-filene dine.

CSS-koden tilhører dokumentets header. Dette er nyttig fordi CSS egenskaper må analyseres mens DOM lastes. Når en nettleser gjenkjenner dine CSS-stiler i overskriften, venter den å vise nettsiden helt til alle stiler er lastet inn. Også noen bilder som brukes til ikoner eller bakgrunnsdesign, vil ta tid å laste og bør gjøre det først.

På forsiden kan alle JavaScript-filer flyttes inn i nettstedets footer, og det kan dramatisk løse hangup-tidene. Mange nettlesere blokkerer parallelle nedlastinger, noe som betyr at før du gjengir siden en brukeres nettleser kan stoppe i 4 sekunder for å fullføre ekstern JS inkluderer.

Dette er ikke alltid mulig, og det er ikke alltid nødvendig for hvert nettsted. Hvis sidene dine legger det samme med like responstider, uavhengig av inkludering av filplasseringer, må du ikke bry deg om manøvrering av noen av spillene.

Dynamisk innhold kan ikke lastes inntil hele DOM er ferdig, men noen ganger returnerer dette feil. Test ut CSS / JS inkluderer for å se om du kan returnere eventuelle optimaliseringsfordeler.

Komprimering av filstørrelse

Komprimering av store filer har blitt veldig populært. Det kan nå til og med brukes på nettsider for å redusere belastningstider og holde filstørrelsen svært lav. Mye av arbeidet har allerede blitt gjort, og med verktøy som YUI Compressor mini-størrelse filer er en ingen-energiprosess.

Det er mange andre gratis tjenester på nettet for å hjelpe deg med denne oppgaven også. Minimer CSS har et helt CSS-komprimeringsgrensesnitt for å gjøre prosessen enkel. Den samme nettsiden har også en tilpasset JavaScript-kompressor som utfører mye av de samme oppgavene, men holder skriptet organisert.

Du kan også vurdere å komprimere de største bildene i websidene dine. Dette kan gjøres med hvilken som helst bilderedigeringsprogramvare som Adobe Photoshop eller GIMP ved ganske enkelt å omformere bildet med en lavere oppløsning. PNG-bilder vil eksportere mye mindre i gjennomsnitt enn jpg- eller TIFF-formater. Det er også mange elektroniske verktøy som Image Optimizer som hjelper til i kompresjonsprosessen.

Kildekontroll og beregninger

Dette er en rutine som ikke ofte praktiseres av webutviklere som kan tilby fantastiske resultater. Ved å analysere alle sidelementene på nettstedet ditt kan du se hvilke som tok lengst å laste og rekkefølgen der hvert stykke ble lastet.

Det mest populære verktøyet Mozilla Firebug er en plug-in for Firefox-nettleseren. Denne appen installerer en liten verktøylinje nederst i nettleseren din for å sjekke responstider, headerinformasjon, sideelementer og skript for hvert nettsted. Skriptet har også blitt sendt inn i Firebug Lite som en utvidelse for Google Chrome.

Apache med mod_pagespeed

Ikke alle oppsettene kjører en Apache-webserver, så dette alternativet er ikke alltid tilgjengelig. Denne modulen er direkte relatert til Googles sidens hastighetsmonitor nevnt tidligere. Faktisk var koden for mod_pagespeed opprinnelig basert på mange biblioteker fra Google Kodens databaser.

Apache tillater serveradministratorer å installere små pakker kalt moduler for å forbedre ytelsen til deres servere. mod_pagespeed er en av disse modulene som utfører optimaliseringsteknikker automatisk ved kjøring. Det er for mange prosesser som skal listes, selv om noen av de viktigste applikasjonene inkluderer fly-HTML / CSS / JS komprimering og bilde caching.

Prosjektet er for tiden plassert hos Google og er åpent for utviklere. Google har jobbet med GoDaddy for å implementere mod_pagespeed i alle hosting-kontoer som kjører Apache HTTP-serveren.

Selv om mange andre alternativer er tilgjengelig, er frontend-utviklingsarbeidet noe av det mest intense, spesielt med tanke på preoptimalisering av viktige nettsider. Optimalisering for nettstedoverskrifter og store bilder kan være en ekstremt kjedelig, men givende oppgave.

Tenk på noen av teknikkene som er introdusert i denne artikkelen, og se hvordan disse kan brukes i webprosjektene dine. Ofte tar utviklere ikke nok tid til å sette pris på sitt arbeid og rydde ut gamle biter av kode. Hvis du fortsatt lurer på noen tips, bør du lese vår ultimate weboptimaliseringsguide for tips om vedlikehold av frontenden og praktiske forbedringer av ytelsen..