Tarvitseeko verkkosivustosi selaimen ruokavaliota?

Useita viikkoja sitten kosketin etuosan suunnitteluaihetta teoksella "New Concepts in Front End Web Design Architecture", joka oli laaja-alainen lähestymistapa joihinkin nykyisiin ja trendikkäisiin ajatuksiin ja periaatteisiin, jotka sekoittuvat verkkokehitysmaailmassa.

Tässä viestissä aion tutkia enemmän asioita, jotka vaikuttavat verkkosivustosi käyttöliittymäsuorituskykyyn, ja korostaa pääkohtia suhteellisen uudesta resurssista nimeltä Selaimen ruokavalio. Selaimen ruokavalio kutsuu itseään "lopulliseksi käyttöliittymän suoritusoppaksi: Kuinka laihtua selaimessa". Tämän etusivulle tarkoitetun esitysresurssin ovat luoneet sellaisten ihmisten yhteenliittymä, kuten Briza Bueno (Americanas.com), Davidson Fellipe (Globo.com), Giovanni Keppelen (entinen Peixe Urbano), Jaydson Gomes of Terra, Marcel Duran (Twitter), Mike Taylor Opera, Renato Mangini Googlen kanssa ja Sérgio Lopes Caelumissa. Selaimen ruokavalion GitHub -resurssi luetteloi yli viisikymmentä viitettä, mukaan lukien kirjojen, verkkosivustojen, ihmisten, HTML: n, CSS: n, JavaScriptin, jQueryn, kuvien ja palvelimien aiheet ja lähteet. Sidosryhmänä organisaatiosi verkkosivuilla kannattaa ehkä harkita joitain näistä ohjaavista periaatteista käyttöliittymän web-suunnittelun suorituskyvylle.

Kuvio B

Miksi esitys on tärkeätä?

Web-kehittäjinä tiedämme kaikki, että jos verkkosivustosi eivät lataudu tarpeeksi nopeasti käyttäjillesi, muuntoprosentit laskevat, liikevaihto käyttäjää kohti laskee, haut käyttäjää kohden, myynti laskee ja latausnopeudet indeksoidaan. Browser Diet -yhteisön edustajat kokosivat mukavan lyhyen suorituskyvyn vaikutuksen, joka osoittaa kuinka suuret hakukoneet, kuten Bing, Google ja Yahoo! paransivat suorituskykyään sekä esimerkkejä useilta vertikaalisilta markkinoilta, kuten Shopzilla, Mozilla ja Netflix.

"Lopullinen" opas

Selaimen ruokavalion "lopullinen opas" on jaettu seitsemään osaan, jotka käsittävät HTML: n, CSS: n, JavaScriptin, jQueryn, kuvat, palvelin ja bonusosion pääaiheet. Korostan useita selaimen ruokavalion yksityiskohtaisimpia päätavoitteita.

HTML

Vältä sisäänrakennettua ja upotettua koodia

Nyrkkisääntönä haluat käyttää ulkoisia puheluita CSS: n lataamiseen ja JavaScript: n tunnisteen src- määritteestä. Sulautetusta ja sisäisestä koodista voi olla hyötyä joillekin toteutuksille, kuten pienille sivuille tai sivuille, joita käytetään vain väliaikaiseen tarkoitukseen, useimmissa tapauksissa haluat kutsua CSS: n ja JavaScriptin ulkoisista lähteistä. Toinen etu on, että selain pystyy välimuistiin tallentamaan ulkoiset tiedostot, mikä auttaa verkkosivun suorituskykyä. Yksi työkaluista, joihin tässä viitataan, on Assetgraph-builder, joka on AssetGraph-pohjainen rakennusjärjestelmä (useimmiten) yhden sivun web-sovelluksille.

Laita tyylipuhelut alkuun ja komentosarjokutsu sivun alaosaan

Tämä on tavanomainen käytäntö, joka ei todellakaan ole ketterää, mutta haluat kuitenkin ladata tyylit sisäpuolelta, jotta sivu tehdään tyyleillä ehjinä ja niitä käytetään sivun lataamisen yhteydessä. Ja kaikille tunnisteille, jotka haluat varmistaa, että ne on sijoitettu juuri ennen verkkosivut-sivun alaosassa olevaa sulkevaa tunnistetta. Tämä näyttää olevan alue, joka ei ole ottanut paljon pitoa, mutta on yhä enemmän omaksumassa verkkosivustojen ja kehittäjien keskuudessa. Syynä tähän on se, että jonkin JavaScriptin tai JQueryn lataaminen sivulle voi viedä hieman enemmän aikaa kuin käyttäjän yleensä odottaa, ja koska skriptit vaativat sivun alareunassa, kaikki kirjoittamaton sisältö sallii lataa ensin.

Muita HTML-aiheita ovat html-tiedoston pienentäminen, luettavan koodin ylläpitäminen ja async-määritteen käyttäminen paremman latausajan antamiseksi, jotta skriptit voivat ladata asynkronisesti, kun muun sivun lataus jatkuu.

CSS

Pienennä CSS

Vaikka kommentoitu ja luettavissa oleva CSS-koodi näyttää hyvältä sisennyksellä, tämä todella lisää hieman paisumista tyylitaulukkoosi. Selaimet eivät ole kiinnostuneita tyylitaulukkotiedostojesi kommentteista ja sisennyksistä, joten CSS-tiedostot latautuvat nopeammin, kun ylimääräinen ihmisen paisuminen poistetaan. Lisäksi on olemassa useita automatisoituja työkaluja, jotka voivat ottaa kommentoidun CSS: n ja pienentää sitä ennen kuin laitat sen lavastetukseen. tai tuotantoympäristöissä, alla olevassa esimerkissä näkyy esimerkki tyypillisestä kommentoidusta ja sisennetystä CSS: stä ja sitten samasta CSS-koodista pienennettynä:

Ennen
 /* pää */ 
 .logo { 
 näyttö: lohko; 
 korkeus: 46px; 
 text-luetelmakohta: -999em; 
 leveys: 115px; 
 } 
 .head .homelink { 
 tausta: # 0b5375 url ('/ i / bg-area-title.gif') ei toista; 
 korkeus: 78px; 
 vasen: -20px; 
 kanta: suhteellinen; 
 leveys: 490px; 
 } 
Jälkeen (jauhettu)
 .logo {näyttö: lohko; korkeus: 46px; tekstin sisennys: -999em; leveys: 115px;}. head .homelink {background: # 0b5375 url ('/ i / bg-area-title.gif') no- toisto; korkeus: 78px; vasen: -20px; kanta: suhteellinen; leveys: 490px} 

Kuten "selaimen ruokavalio" huomauttaa, "... sellaiset, jotka käyttävät esiprosessoreita, kuten Sass, Less ja Stylus, on mahdollista määrittää koottu CSS-lähtösi pienennettäväksi". Viitteessä on lueteltu useita muita työkaluja CSS: n minimoimiseksi, kuten CSS Minifier ja CSSmin.js.

Vähennä CSS-tiedostojen pyyntöjen määrää

Kuinka monta kertaa olet nähnyt jotain tällaista verkkosivustosi asiakirjoissa?

Jokainen näistä CSS-pyynnöistä vie enemmän aikaa sivun lataamiseen, joten on järkevää yhdistää kaikki CSS-tiedostot yhdeksi tiedostoksi, joka edellyttää sivulta vain yhden pyynnön esittämistä:

Viimeisessä CSS-aiheessa todetaan, että on suositeltavaa käyttää yli @import -sovellusta tyylitaulukkoon soittamiseen, koska selaimet eivät pysty lataamaan @import-omaisuutta rinnakkain.

JavaScript

Lataa kolmannen osapuolen sisältö asynkronisesti

Kuinka monta kertaa upotat kolmansien osapuolien komentosarjoja YouTubesta, Vimeosta, Twitteristä tai Facebookista verkkosivuillesi? Ongelmana on, että monet näistä kolmansien osapuolien sisältöyhteyksistä eivät ole aina puhtaita tai tehokkaasti levitettyjä; on olemassa lukuisia muuttujia, jotka voivat muuttaa loppukäyttäjän kokemusta. Tämän ongelman välttämiseksi voit ladata nämä koodit asynkronisesti, mieluummin linkin tuontiin, ja tätä skriptiä voidaan käyttää useiden kolmansien osapuolien widgetien lataamiseen.

Vältä document.write

Koska tämä vaatii aina sivun lataamisen täyteen joka kerta, kun document.write-puhelu palautetaan.

Muita Java-aiheita ovat:

  • välimuistiryhmän pituudet
  • minimoi uudelleenmaalaukset ja uudelleenvärjäykset
  • pienennä kirjoitustasi
  • yhdistä useita js-tiedostoja yhdeksi.

jQuery

Käytä aina uusinta jQuery-versiota

Tämä on toinen periaate, joka tulisi aina integroida komentosarjapuheluihin, jos käytät jQueryä, kuitenkin se oli sisällytettävä, koska monet ihmiset linkittävät kirjaston staattisiin versioihin. Viitaa esitykseen, jQuery Proven Performance Performance -vinkkejä ja -vinkkejä. Viimeisin jQuery-versio on saatavana osoitteessa: http://code.jquery.com/jquery-latest.js.

Muihin jQuery-aiheisiin sisältyy käyttö kummankin sijaan, äläkä käytä jQueryä, ellei se ole ehdottoman välttämätöntä.

kuvat

Käytä CSS-spritejä

Useiden kuvien ryhmittely yhdeksi tiedostoksi ja niiden sijoittaminen CSS: ään auttavat vähentämään pyyntöjen määrää. Vaikka sprite-tekniikkaa tunnetaan laajasti, sitä ei käytetä laajasti, mutta sitä on löydetty viimeaikaisesta käytöstä parallaksivieritystekniikan kanssa.

Tietojen URI

Vaihtoehto CSS-spriteille on tämä järjestelmä, joka tarjoaa tavan sisällyttää tiedot riviin. Tämä tekniikka mahdollistaa normaalisti erillisten elementtien, kuten kuvien ja tyylitaulujen, kutsumisen yhdessä HTTP-pyynnössä kuin useiden HTTP-pyyntöjen sijasta, mikä johtaa suurempaan tehokkuuteen ja suorituskykyyn.

Muita kuvateemoja ei saa muuttaa kuvien kokoa merkinnöissä ja optimoida kuviasi.

server

Ota älykäs välimuisti käyttöön

Kuten mainitsin viestissäni "Välimuisti on kuningas: Lisätietoja verkkosivustojen välimuistin käytännöistä", useita viikkoja sitten, paras tapa optimoida verkkosivupyyntösi on, ettei pyyntöä ole ollenkaan, ja tämä tarkoittaa selaimen välimuistin välimuistin sallimista. resurssit ja varat.

Toinen palvelinaihe on gzipin käyttö tiedostojen pakkaamiseen palvelintasolla.

Bonus

Bonusosio sisältää muutamia resursseja verkkosivustosi suorituskyvyn testaamiseen, mukaan lukien laajennukset, jotka voit sisällyttää selaimiin, kuten YSlow ja PageSpeed, sekä online-työkaluja, kuten WebPageTest ja HTTP-arkisto.

Jos organisaatiosi noudattaa jo näitä periaatteita, sinulla todennäköisesti on verkkosivusto, jolla on melko hyvät suoritustason; Jos ei, niin sinun kannattaa sisällyttää puuttuvat ideologiat Web-kehitys- ja tuotantoympäristöihisi.

© Copyright 2020 | mobilegn.com