Miten mitataan etupään verkkosivuston suorituskykyä

Optimointiprosessista puhuminen on lähes olematon uusien aikakauden web-suunnittelijoiden keskuudessa. Monet web-suunnittelijat, jotka ovat olleet liiketoiminnassa vuosikymmenen tai pidempään, eivät täysin ymmärrä sivuston optimoinnin merkitystä.

Pitkän ajan kuluttua sivusto alkaa ryöstää. Frontend-tiedostot voivat sisältää liioiteltuja koodilohkoja tai lukittuja, piilotettuja bittejä. Tämä näkyy yleisimmin JavaScript-tiedostojen tai kuvien sisällä. Saattaa olla tärkeää luoda miellyttävä sivusto käyttäjäkokemukselle, mutta ilman optimoitua sivustoa suunnittelussa ei ehkä ole edes mahdollisuutta ladata kärsimättömiä käyttäjiä.

Alla olevat vinkit ovat kiinnostuneita aloittelijoille ja välittäjille niiden sivujen optimointi täysin. Käytettävissä on monia tekniikoita ja kukin käyttäytyy eri tavalla sen mukaan, mitä ongelmia sivustosi kärsii. Yritä ohittaa muutamia alueita ja katso, voitko soveltaa näitä tekniikoita omiin merkkeihisi.

HTTP-pyynnöt

Aina kun sivusto latautuu, se lähettää HTTP-pyynnön etäpalvelimelle. Tällaista tiedonsiirtoa kutsutaan nimellä a verkkoprotokolla käytetään nimenomaan selkokielisten tiedostojen jakeluun ja tallentamiseen. Näihin sisältyy usein perusliittymäkoodi, kuten HTML, CSS ja JavaScript.

Kun pyyntö on lähetetty, selaimesi jäsentää jokaisen sivuelementin. Jokaisesta verkkosivustosta ladataan eri tavoin, ja elementit näkyvät vaihtelevassa järjestyksessä siirtonopeuksien perusteella riippuen jäsenkoneesta. Esimerkiksi Internet Explorer tekee Web-sivut erilaisiksi kuin Chrome tai Safari, ja kaikki nämä kulkevat hieman eri tavoin kuin Firefox tai Opera.

On otettava huomioon, kuinka kauan pyyntöaika on kullekin tiedostolle ja onko tämä suuntaus johdonmukainen. Harkitse saavansa 100 k: n tai 1 miljoonan kävijän palkkaa kuukaudessa. Selaimen tehtävänä on koota yhteen jokainen sivuelementti ja ladata ulkoisia tiedostoja muistiin.

Usein tekijät, jotka pidättävät sivuston optimoidun nopeusohjeen Clunky JavaScript sisältää tai suuret kuvatiedostot. Verizon FiOSin suosion myötä on yleistä, että Internetin nopeus osuu 600 kbps: iin ja kiipeää! Valitettavasti tämä ei ole normi, ja jopa nopeilla yhteyksillä on mahdollista kokea optimointivirheet.

Sivuston suorituskyvyn korjaustoimenpiteet

Emme ole yksin web-kehityksen ja frontend-optimoinnin alalla. Jotta työ saataisiin päätökseen, on tiettyjä työkaluja, joita tarvitaan työn käsittelyyn.

Google on julkaissut sivunopeuden projektin, jonka avulla kehittäjät voivat optimoida verkkosivustonsa ja tarkistaa parhaan mahdollisen suorituskyvyn. Alun perin projekti aloitettiin avoimen lähdekoodin Firebug-lisäosana ja se on nyt hyväksytty kolmannen osapuolen viittauksena verkkosivustojen testaukseen.

Toinen vaihtoehto Firebug-käyttäjille on Yahoo!: N YSlow-lisäosa. Skripti analysoi jokaisen verkkosivupyynnön ja ehdottaa yleisimpiä tapoja parantaa suorituskykyä. Nämä ehdotukset perustuvat Yahoo! Kehittäjien resurssi web-suunnittelun parhaisiin optimointikäytäntöihin.

Ohjelma voi olla aluksi hieman hankaavaa, koska se sisältää niin paljon tietoa. Pidä kiinni perusasioista ja seuraa yksinkertaista dokumentaatiota, joten prosessin pitäisi olla kakkua.

Kehittäjät ovat aina kiinnostuneita hyppäämään hankkeeseen koodin hajottamiseksi, joten tämän ei pitäisi olla aivoja. Hieman apua voit tarkistaa YSlow-ohjekirjan.

Nopeusmenetelmät

On olemassa joitakin yksinkertaisia ​​temppuja, joita voit hakea sivustoosi välittömästi suorituskyvyn nopeuttamiseksi. Ensimmäinen ja helpoin tapa on erottaa CSS- ja JavaScript-tiedostosi.

CSS-koodi kuuluu asiakirjan otsikkoon. Tämä on hyödyllistä, koska CSS-ominaisuudet on jäsennettävä, kun DOM latautuu. Kun web-selain tunnistaa CSS-tyylisi otsikossa, se odottaa, että verkkosivu näkyy täysin, kunnes kaikki tyylit on ladattu. Myös kuvakkeisiin tai taustakuvioihin käytettävät kuvat vievät aikaa lataamiseen ja sen pitäisi tehdä ensin.

Kääntöpuolella kaikki JavaScript-tiedostot siirretään sivuston alatunnisteeseen dramaattisesti hangup-kertaa. Monet selaimet estävät rinnakkaiset lataukset, mikä tarkoittaa, että ennen sivun tekemistä käyttäjän web-selain voi pysähtyä neljän sekunnin ajan, jotta ulkoinen JS: n lataus täyteen.

Tämä ei ole aina mahdollista eikä aina ole välttämätöntä jokaiselle verkkosivustolle. Jos sivusi lataavat samanlaiset vasteajat riippumatta tiedostojen sijoitteluista, älä häiritse mitään toistoja.

Dynaaminen sisältö ei pysty lataamaan, ennen kuin koko DOM on valmis, mutta joskus tämä palauttaa virheitä. Kokeile CSS / JS: tä, jos haluat nähdä, voisitko palauttaa optimointitulokset.

Tiedoston koon pakkaus

Suurten tiedostojen pakkaaminen on tullut erittäin suosittu. Sitä voidaan nyt käyttää myös web-sivuilla kuormitusaikojen lyhentämiseksi ja tiedostokokojen pitämiseksi erittäin alhaisina. Suuri osa työstä on jo tehty ja työkalut, kuten YUI Compressor, ovat pienikokoisia tiedostoja, jotka eivät ole energiaa.

Verkossa on myös paljon muita ilmaisia ​​palveluja, jotka auttavat tässä tehtävässä. Pienennä CSS on koko CSS-pakkausliitäntä, jotta prosessi on yksinkertainen. Samassa sivustossa on myös mukautettu JavaScript-kompressori, joka suorittaa paljon samoja tehtäviä, mutta pitää skriptit järjestettyinä.

Voit myös harkita Web-sivujen suurimpien kuvien pakkaamista. Tämä voidaan tehdä millä tahansa valokuvankäsittelyohjelmalla, kuten Adobe Photoshopilla tai GIMP: llä, yksinkertaisesti uudelleenmallimalla kuva pienemmällä resoluutiolla. PNG-kuvat vievät paljon pienempiä kuin jpg- tai TIFF-formaatit. Pakkausprosessissa on myös paljon online-työkaluja, kuten Image Optimizer.

Lähdetarkastus ja mittarit

Tämä on rutiini, jota web-kehittäjät eivät usein harjoita uskomattomia tuloksia. Analysoimalla kaikki sivustosi sivuelementit näet, mikä otti pisimmän latauksen ja missä järjestyksessä kukin kappale oli ladattu.

Suosituin työkalu Mozilla Firebug on Firefox-selaimen laajennus. Tämä sovellus asentaa selaimen alaosaan pienen työkalurivin, jolla voit tarkistaa vastausajat, otsikkotiedot, sivuelementit ja skriptit jokaiselle sivustolle. Skripti on myös siirretty Firebug Lite -ohjelmaan Google Chromen laajennuksena.

Apache ja mod_pagespeed

Kaikki asetukset eivät toimi Apache-verkkopalvelimella, joten tämä vaihtoehto ei ole aina käytettävissä. Tämä moduuli liittyy suoraan Googlen Page Speed ​​-näyttö aiemmin mainittu. Mod_pagespeed-koodi perustui alun perin useisiin kirjastoihin Google-koodin tietokannoista.

Apache sallii palvelimen järjestelmänvalvojien asentaa pieniä paketteja, joita kutsutaan moduuleiksi, parantamaan palvelintensa suorituskykyä. mod_pagespeed on yksi näistä moduuleista, joka suorittaa optimointitekniikat automaattisesti ajon aikana. Luetteloon on liian monta prosessia, vaikka jotkin tärkeimmistä sovelluksista sisältävät HTML / CSS / JS-pakkaus ja kuvan välimuistin.

Projekti sijaitsee tällä hetkellä Googlessa ja on avoin kehittäjille. Google on työskennellyt GoDaddyn kanssa, jotta mod_pagespeed voidaan toteuttaa kaikkiin Apache HTTP -palvelinta käyttäviin hosting-tileihin.

Vaikka monia muita vaihtoehtoja on saatavilla, frontend-kehitystyö on joitakin voimakkaimmista, varsinkin kun otetaan huomioon tärkeiden web-sivujen ennakointi. Sivustojen otsikoiden ja suurten kuvien optimointi voi olla erittäin työläs mutta palkitseva tehtävä.

Harkitse joitakin tässä artikkelissa esitettyjä tekniikoita ja katso, miten niitä voitaisiin soveltaa Web-projekteihin. Usein kehittäjät eivät ota riittävästi aikaa arvostaa heidän työstään ja puhdistaa vanhat koodit. Jos etsit vielä joitakin vinkkejä, lue lopullinen web-optimointikäsikirja, jossa on viitteitä etuosan ylläpidosta ja kätevistä suorituskyvyn parannuksista.