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 det hende at designen ikke engang har muligheten til å fullføre på utålmodige brukere.

Tipsene nedenfor er for nybegynner-mellomliggende webutviklere som er interessert i å optimalisere sidene deres til det fulle. 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 en nettverksprotokoll som brukes spesielt for å distribuere og lagre 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 for Internett-hastigheter å slå 600kbps og fortsette å klatre! Dessverre er dette ikke normen, og selv med høyhastighetsforbindelser er det mulig å oppleve optimaliseringsfeil.

Rettelser for ytelse på nettstedet

Vi er ikke alene innen webutvikling og frontendoptimalisering. For riktig arbeid å være ferdig er det visse verktøy som kreves for å håndtere jobben.

Google har gitt ut et prosjekt med tittelen Sidehastighet som ble bygget for å hjelpe utviklere til å optimalisere sine nettsteder og se etter de beste resultatnivåene. Opprinnelig startet prosjektet som en åpen kildekode Firebug add-on, og er nå akseptert som en tredjepartsreferanse for nettstedstesting.

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 kode, 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å flippen flytter alle JavaScript-filer til nettstedets footer dramatisk løse opplastingstider. Mange nettlesere blokkerer parallelle nedlastinger, noe som betyr at før du gjør siden, kan brukerens nettleser stoppe i 4 sekunder for å laste inn ekstern JS.

Dette er ikke alltid mulig, og det er ikke alltid nødvendig for hvert nettsted. Hvis sidene dine lader det samme med like responstid, 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-energi prosess.

Det er mange andre gratis tjenester på nettet for å hjelpe deg med denne oppgaven også. Minify 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 å resamplere 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 for å hjelpe til i komprimeringsprosessen.

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 sidehastighetsmonitor som 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 programmene inkluderer fly-HTML / CSS / JS-komprimering og bildebufring.

Prosjektet er for tiden plassert på 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 frontendutviklingsarbeidet 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 utviklere tar ikke nok tid til å sette pris på sitt arbeid og rydde ut gamle biter av kode. Hvis du fremdeles lurer på noen tips, bør du lese vår ultimate weboptimaliseringsguide for tips om vedlikehold av frontenden og praktiske ytelsesforbedringer.

Sammenligne skrifttyper rett i nettleseren din med vende typisk

Hver designer trenger å vite litt om skrifttyper . De er byggesteinene av innhold, og de kan lage eller bryte en lesbar nettside.Med Flipping Typical web app kan du sammenligne alle skrifter installert på maskinen din for å se hvilke som passer best. Du kan skrive inn en hvilken som helst frase i toppboksen og se umiddelbare oppdateringer for alle de forskjellige skriftene. D

(Tekniske og design tips)

Facebook involverer tredjeparts fakturakontrollere for å undersøke nyheten

Kuratert innhold og et undersøkelsessystem er bare toppen av det berømte isberget i Facebooks forsøk på å slå ned falske nyheter . Sosialmediebedriften bruker nå hjelp av tredjeparts fakturatorganisasjoner for å hjelpe til med å identifisere falske nyheter før den går viral.Nylig har Facebook avslørt at dette systemet bidrar til å granske nyhetsshistoriene som går gjennom Facebook News Feed. Disse faktok

(Tekniske og design tips)