Mitä jokainen web-kehittäjä tietää etusijapisteestä

Liian usein kehittäjinä sivuutamme tärkeän viimeisen askeleen ennen verkkosivuston käynnistämistä: optimoimalla suorituskykyä .

Useimmat kehittäjät tunnustavat nyt, että järjestetty, kelvollinen koodi takaa ylläpidon ja yhteensopivuuden.

Jokainen, joka epäilee tätä, tarvitsee vain puhua kehittäjälle, joka on hakenut töitä vanhalla verkkosivustolla, joka on täynnä järjestäytymättömiä, kommentoimattomia spagettien koodia.

Aivan kuten valmistaudutaan koodin lukemiseen muiden kehittäjien on tärkeää, niin valmistelee meidän koodi lukea selaimet. Suuri verkkokehitys voisi alkaa suurella organisaatiolla, mutta se päättyy hienooptimointiin.

Tässä artikkelissa esitellään parhaita käytäntöjä front-end-suorituskykyä.

Web-pyynnön tarina

Kun kävijä pyytää sivua verkkosivustostasi, tapahtuu useita asioita:

Web-palvelin palauttaa HTML-asiakirjan;
Vierailijan selaus etsii ja pyytää linkitetyt tiedostot (CSS, JavaScript, kuvat);
Web-palvelin palauttaa nämä linkitetyt tiedostot;
Vierailijan selaimessa näet nämä tiedostot, suorittavat niitä tai tarkastelemalla niitä lisäämällä pyydettäviä asioita (esim. CSS-taustakuvia).

Vaikka tämä prosessi tuntuu riittävän yksinkertaiselta, monet komplikaatiot voisivat todella hidastaa sitä:

Jokaisella pyydetyllä tiedostolla on otsikot, jotka on myös lähetettävä. Monien pienien tiedostojen lähettäminen luo tarpeettoman yleiskustannukset, joita vältetään muutamalla suurella tiedostolla.
Useimmilla selaimilla on rajallinen määrä tiedostoja, joita ne voivat ladata yhdeltä verkkotunnukselta kerrallaan. Jos sinulla on 24 tiedostoa ladattavaksi samasta verkkotunnuksesta, yhdeksäs ei aloita lataamista, ennen kuin ensimmäinen on valmis.
Monet selaimet estävät kaikki samansuuntaiset lataukset ladattaessa ulkoista JavaScriptia.

Vaikka kaikki tämä saattaa kuulostaa jonkin verran monimutkaiselta, parhaita käytäntöjä on noudatettava, jotta se olisi paljon yksinkertaisempaa. Sekä Google että Yahoo tarjoavat melko kattavia ohjeita sivuston optimoinnin toteuttamisesta äärimmäisyyteen:

Monet suosituksista vaativat vähän työtä. Seuraavassa on viisi parhainta asiaa, joita voit tehdä tänään parantaaksesi verkkosivuston tehokkuutta vähäisellä vaivalla.

5 nopeaa muutosta sivustosi tehokkuuden parantamiseksi

1. Siirrä JavaScriptin alatunnisteeseen

JavaScript-tiedostojen siirtäminen sivun alatunnisteelle on nopein ja helpoin tapa voit parantaa suorituskykyä. Monet selaimet estävät rinnakkaisia latauksia ladatessasi ulkoisia JavaScript-tiedostoja; asettamalla tiedostoja alatunnisteeseen, selaimet alkavat ensin ladata muita asioita.

Varmista kuitenkin, että haittavaikutukset ovat ajoitus ja ulkonäkö. Jos käytät JavaScriptia elementin ulkoasun muuttamiseen, sitä ei suoriteta ennen pitkää viiveaikaa.

2. Laita CSS ensimmäinen

CSS: n lataaminen on aivan yhtä tärkeää kuin HTML-asiakirjan lopettamisen JavaScript kahdesta syystä:

CSS sisältää usein taustakuvia, jotka vaativat toisen pyynnön. Näiden aloittaminen ASAP on tärkeä.
Sivut näkyvät heti, kun CSS on valmis.

Asettamalla CSS: n dokumentin kärkeen varmista, että kaikki taustakuvia alkaa latautua välittömästi ja että sivustosi toimii mahdollisimman nopeasti.

3. Kokoa ja pienennä CSS: ää ja JavaScriptia

Kun kirjoitat koodia ylläpidettävyyteen, useilla eri tyylisivuilla ja JavaScript-tiedostoilla on usein merkitystä. Suorituskyvyn optimoimiseksi tämä on melkein pahin mitä voit tehdä. Jokaisen lisättävän tiedoston kohdalla on lähetettävä otsikko ja lisäpyynnön on mentävä palvelimelle ja palvelimelta.

Yhdistä kaikki CSS-tiedostosi yhteen tiedostoon ja kaikkiin JavaScript-versioosi toiseen ja vähennä sitten molemmat. (Älä unohda laittaa CSS: n yläosaan HTML-asiakirjan ja JavaScriptin alatunnistimessa.)

Vaikka tiedoston uudelleenmuokkaaminen ja pienentäminen jokaisen muutoksen jälkeen saattaa kuulua kipu, suorituseroero on todella dramaattinen.

Kokoaminen ja minimointi resurssit:

4. Varo kolmannen osapuolen komentosarjoja

Monet verkkosivustot sisältävät nykyään kolmannen osapuolen komentosarjoja ja widgettejä, jotka lataavat tietoja muista palvelimista. Esimerkkejä ovat Tweet-painike, Facebook-tuuletin, Jaa tämä painike ja jopa Google Analytics. Luulisi, että nämä kaikki olisivat hyvin suunniteltuja, mutta monet eivät. Esimerkiksi Digg-widget tekee yhdeksän pyyntöä , on 52 KB ja estää pääsivun lataamasta!

Käytä näitä widgettejä säästeliäästi, mitatkaa niiden suorituskykyä ja etsi asynkronisia vaihtoehtoja. Suosituimpia widgettejä ovat käytettävissä; asentaminen on hieman monimutkaisempaa, mutta ne toimivat paljon paremmin. Löydät ne tavallisesti pienellä kaivamalla.

Asynkroniset widget-resurssit:

5. Mittaa tulokset

Erilaisia hienoja työkaluja siellä on helppo mitata verkkosivustosi tehokkuutta. Joitakin voidaan käyttää selaimessa; muut ovat verkossa:

Firefox Firebug
Tutustu Firebugin Net-välilehteen nähdäksesi visuaalisen aikajanan siitä, kuinka kauan sivustosi latautuu ja miksi se on.
YSlow for Firebug
Yahoo on julkaissut Firebug-plug-inin, joka analysoi verkkosivustoa YSlow-suosituksiaan vastaan ja ehdottaa tapoja parantaa suorituskykyä.
PageSpeed for Firebug
Tämä toimii kuten YSlow, mutta se perustuu Googlen PageSpeed -suosituksiin.
GTMetrix
Tämä työkalu ottaa URL-osoitteen ja toimittaa täydellisen raportin verkkosivuston tehokkuudesta, joka perustuu YSlow- ja PageSpeed -versioon. On kätevää, kun Firebugia ei ole saatavilla tai haluat jakaa tulokset linkin kautta.

Going One Step edelleen

Useimmat web-kehittäjät voisivat toteuttaa viisi vinkkejä melko helposti. Se sanoi, että muutamia muita asioita kannattaa tehdä, jos haluat kaivaa hieman syvemmälle ja optimoida palvelimen asetukset.

Lisää Expires Headers

Sisällytä vanhentunut otsikko jokaiseen palvelimesi lähettämään tiedostoon. Tämä kertoo selaimelle kuinka kauan tiedosto on hyvä. Näin selain tietää tallentavan tiedoston seuraavan kerran, johon viitataan, joten selaimen ei tarvitse hakea sitä uudestaan palvelimelta.

Monilla verkkosivustoilla on sama CSS-tiedosto jokaisella sivulla, mutta kävijän ei pitäisi olla mitään syytä ladata sitä jokaiselle sivulle. selain pitäisi tietää välimuistiin sen.

Käytä Gzip Compressionia

Nykypäivän tietokoneet ovat todella nopeita. Gzip-pakkaus hyödyntää tätä pyytämällä palvelinta pakottamaan jokaisen tiedoston ennen sen lähettämistä kävijälle.

Vierailijan selaus lataa ja purkaa sen. Aiemmin meidän oli harkittava palvelimen resursseja päättäessäsi, sallisiko tämä. Tänään ei ole olennaisesti mitään haittapuolta, jotta gzip olisi mahdollista.

Harkitse mod_pagespeedin asentamista

Google on juuri julkaissut kutsun Apache-moduulin mod_pagespeed . Se toteuttaa lähes kaikki tämän artikkelin tekniikat.

Tekniikan ymmärtäminen ennen tämän moduulin käyttöönottoa on kuitenkin edelleen tärkeä; jos tiedät, miten verkkosivusto toimii, voit hyödyntää mod_pagespeedin monia suodattimia. Yksi tällainen suodatin, Yhdistä CSS , etsii, yhdistää ja pienentää kaikkia CSS: tä, johon viitataan HTML: ssä.

Moduulissa on useita suodattimia ja asetuksia, jotka voivat parantaa sivustosi tehokkuutta. Kaikki kannattaa tarkastella.

johtopäätös

Vaikka ei ole kaikkein lumoava aihe, optimointi ansaitsee enemmän huomiota. Kehittäjien tehtävänä on oppia alan parhaita käytäntöjä, jotta voimme tarjota korkealaatuista työtä asiakkaillemme ja käyttäjillemme.

Tämä viesti on kirjoitettu yksinomaan Webdesigner Depotille, Joel Sutherland, perustaja ja web-kehittäjä klo Uudet mediakampanjat . Hän on osa juuri käynnistynyttä ryhmää HiFi , moderni sisällönhallintajärjestelmä, joka on suunniteltu suunnittelijoille heidän asiakkaidensa mielessä. Seuraa Joel Twitterissä tai ota yhteyttä Hifi-verkkosivuilla.

Tiedätkö helpoimmasta tavasta parantaa verkkosivuston tehokkuutta, jota ei mainittu tässä artikkelissa? Jaa sen ja kokemuksesi alla oleviin kommentteihin.

sivuston nopeus ohjelmointi koodi esitys