Trenger nettstedet ditt et nettleserdiett?

For flere uker siden berørte jeg designtemaet i front-enden med stykket "New Concepts in Front End Web Design Architecture", som var en bred tilnærming til noen av de nåværende og trending tankene og prinsippene som rørte rundt i nettutviklingsverdenen.

I dette innlegget vil jeg fordype meg mer i tingene som påvirker nettstedets frontend-ytelse, og vil trekke frem hovedpunktene fra en relativt ny ressurs som heter Browser Diet. Nettleserdiett kaller seg "Den definitive front-end performance guide: Hvordan gå ned i vekt i nettleseren." Denne fremføringsresursen ble opprettet av et konsortium av mennesker som Briza Bueno fra Americanas.com, Davidson Fellipe fra Globo.com, Giovanni Keppelen en eks-Peixe Urbano, Jaydson Gomes fra Terra, Marcel Duran med Twitter, Mike Taylor på Opera, Renato Mangini med Google, og Sérgio Lopes på Caelum. Browser Diet GitHub-ressursen viser over femti referanser, inkludert emner og kilder fra bøker, nettsteder, personer, HTML, CSS, JavaScript, jQuery, bilder og servere. Som en interessent på organisasjonens nettsted kan det være lurt å vurdere noen av disse retningslinjene for ytelse av webdesign.

Figur B

Hvorfor ytelse betyr noe?

Vi som webutviklere vet alle at hvis nettsidene dine ikke lastes raskt nok for brukerne dine, så faller konverteringsfrekvensen, inntektene per bruker faller, søkene per bruker lider, salgsnedgangen og nedlastingshastighetene kommer til å gjennomsøke. Folkene på Browser Diet satt sammen en fin kort innvirkning på ytelse som viser hvordan de store søkemotorene som Bing, Google og Yahoo! forbedret ytelsen, så vel som eksempler fra flere vertikale markeder som Shopzilla, Mozilla og Netflix.

Den "definitive" guiden

Nettleser-dietten "Definitive Guide" er delt inn i syv seksjoner som omfatter hovedtemaene HTML, CSS, JavaScript, jQuery, Bilder, Server og en bonus-del. Jeg vil trekke frem flere av de viktigste retningslinjene som nettleserdiet detaljerer.

HTML

Unngå inline og innebygd kode

Som en tommelfingerregel vil du bruke eksterne samtaler for å laste CSS fra en og JavaScript fra src- attributtet i koden. Selv om innebygd og inline-kode kan være nyttig for noen implementeringer som for eksempel små sider, eller sider som bare brukes til et midlertidig formål, vil du i de fleste tilfeller ønske å ringe CSS og JavaScript fra eksterne kilder. Den andre fordelen er at nettleseren er i stand til å bufret de eksterne filene, noe som hjelper til ytelsen til websiden. Et av verktøyene som det vises til her er Assetgraph-byggherren, som er det AssetGraph-baserte byggesystemet (for det meste) for enkeltsidede webapplikasjoner.

Legg stilen din til å ringe opp og skriptsamtaler nederst på siden

Dette er standard praksis som virkelig er en ikke-brainer, men du vil laste stilene dine innenfra, slik at siden blir gjengitt med stilene intakte og brukes når siden lastes inn. Og for alle tagger du vil forsikre deg om at de plasseres rett før lukkekoden nederst på webdokumentsiden. Dette ser ut til å være området som ikke har tatt mye trekkraft, men ser mer adopsjon blant nettsteder og utviklere. Årsaken til dette er at noe JavaScript eller JQuery kan ta litt mer tid å laste på siden enn hva som normalt forventes av brukeren, og å ha samtalene for skriptene nederst på siden lar alt ikke-skriptet innhold til last først.

Andre HTML-emner inkluderer å minifisere HTML-koden din, opprettholde lesbar kode og bruke async-attributtet for bedre lastetid, slik at skripter kan lastes ned asynkront mens resten av siden fortsetter å laste.

CSS

Minifiser CSS-en din

Selv om kommenterte og lesbare CSS-koder ser bra ut med innrykk, legger dette faktisk litt oppblåsthet til stilarket ditt. Nettlesere bekymrer seg ikke for kommentarer og innrykk i stilarkfilene dine, så CSS-filer vil lastes raskere når den ekstra menneskelige oppblåsten fjernes, og det er flere automatiserte verktøy som kan ta kommenterte CSS-er og minifisere den før du setter den i iscenesettelse eller produksjonsmiljøer, viser eksemplet nedenfor en prøve av typisk kommentert og innrykket CSS og deretter den samme CSS-koden minifisert:

Før
 /* hode */ 
 .logo a { 
 viser: blokk; 
 høyde: 46px; 
 text-indent: -999em; 
 bredde: 115px; 
 } 
 .head .homelink { 
 bakgrunn: # 0b5375 url ('/ i / bg-area-title.gif') no-repetisjon; 
 høyde: 78px; 
 venstre: -20px; 
 stilling: i forhold; 
 bredde: 490px; 
 } 
Etter (minifisert)
 .logo a {skjerm: blokk; høyde: 46 px; tekstinnrykk: -999em; bredde: 115 px;}. hode. hjemmelink {bakgrunn: # 0b5375 url ('/ i / bg-area-title.gif') no- repeat; høyde: 78px; venstre: -20px; stilling: i forhold, bredde: 490px} 

Som "nettleserdietten" påpeker, "... de som bruker forprosessorer som Sass, Less og Stylus, er det mulig å konfigurere din kompilerte CSS-utgang for å bli minifisert." Flere andre verktøy for å minifisere din CSS er listet opp i referansen, inkludert CSS Minifier og CSSmin.js.

Reduser antall forespørsler om CSS-filer

Hvor mange ganger har du sett noe slikt i dokumentene på websiden?

Hver av disse CSS-forespørslene tar mer tid å laste inn siden, så det er fornuftig å kombinere all CSS-en din til en enkelt fil som krever at siden bare sender en forespørsel:

Det endelige CSS-emnet sier at det er foretrukket å bruke over @import for å ringe stilarket ditt, siden nettlesere ikke er i stand til å laste ned @import-eiendeler parallelt.

Javascript

Last inn tredjepartsinnhold asynkront

Hvor mange ganger legger du inn skripter fra tredjeparter fra YouTube, Vimeo, Twitter eller Facebook på websidene dine? Problemet er at mange av disse tredjeparts innholdstilkoblinger ikke alltid er rene eller effektivt distribuerte; det er et mangfold av variabler som kan endre sluttbrukeropplevelsen. For å unngå dette problemet kan du laste inn disse kodene på asynkron måte, og foretrekker en kobling til en import, og dette skriptet kan brukes til å laste inn flere tredjepartswidgets.

Unngå document.write

Siden dette alltid krever at siden er fullastet hver gang document.write-samtalen returneres.

Andre JavaScript-emner inkluderer:

  • caching array lengder
  • minimere repaints og refow
  • minifiser skriptet
  • kombinere flere js-filer til en.

jQuery

Bruk alltid den siste versjonen av jQuery

Dette er et annet prinsipp som alltid bør være innebygd i skriptsamtalene dine hvis du bruker jQuery, men det måtte inkluderes siden mange kobler til statiske versjoner av biblioteket. Henvis til presentasjonen, jQuery Proven Performance Tips and Tricks. Den siste versjonen av jQuery er tilgjengelig på: http://code.jquery.com/jquery-latest.js.

Andre jQuery-emner inkluderer bruk for i stedet for hvert og bruker ikke jQuery med mindre det er absolutt nødvendig.

Bilder

Bruk CSS-sprites

Å gruppere flere bilder i en enkelt fil, og deretter plassere dem i CSS, hjelper til med å redusere antall forespørsler. Selv om sprite-teknikken er kjent, er den ikke mye brukt, men den har blitt funnet i nyere tid med parallax-rulle-teknikken.

Data URI

Et alternativ til CSS-sprites, dette er et opplegg som gir en måte å inkludere data på nettet. Denne teknikken gjør det mulig å ringe til separate elementer som bilder og stilark i en enkelt HTTP-forespørsel i stedet for fra flere HTTP-forespørsler, noe som gir høyere effektivitet og ytelse.

Andre bilderemner inkluderer ikke omskalering av bilder ved markering og optimalisering av bildene dine.

Server

Aktiver smart hurtigbufring

Som jeg nevnte i innlegget mitt, "Cache er konge: Lær mer om nettstedbufringspolicyer" for flere uker siden. Den beste måten å optimalisere forespørsler på websiden din er å ikke ha en forespørsel i det hele tatt, og dette betyr at nettleseren kan cache ressursene og eiendelene dine.

Det andre serveremnet er bruk av gzip for å komprimere filene dine på servernivå.

Bonus

Bonusdelen inneholder noen få ressurser for å teste ytelsen til nettstedet ditt, inkludert utvidelser du kan inkludere i nettleserne som YSlow og PageSpeed, så vel som online verktøy som WebPageTest og HTTP Archive.

Hvis organisasjonen din allerede følger disse prinsippene, har du sannsynligvis et nettsted med ganske gode ytelsesnivåer; hvis ikke, kan det være lurt å integrere de manglende ideologiene i nettutviklings- og produksjonsmiljøene.

© Copyright 2020 | mobilegn.com