vinkkejä verkkosivujen nopeuden parantamiseen / kuinka verkkosivujen nopeuttaminen

miten kehittäjät voivat saada verkkosivustonsa latautumaan nopeammin?

Sivuston nopeus vaikuttaa valtavasti käyttökokemukseen, hakukoneoptimointiin ja konversiokursseihin. Parantaa sivuston suorituskykyä on välttämätöntä piirtää liikennettä sivuston ja pitää sivuston kävijät mukana. Tässä tarkastelemme askelia, joita kehittäjät voivat tehdä nopeuttaakseen verkkosivustoa:

Testisivuston suorituskyky

verkkosivujen nopeustestit arvioivat verkkosivuston toimivuutta. Sivuston säännöllinen testaus voi auttaa kehittäjiä seuraamaan suorituskyvyn alenemista tai parannuksia. Nopeustestin pitäisi myös auttaa kehittäjiä tunnistamaan joitakin tai kaikkia sivuston suorituskykyä hidastavia alueita ja missä parannettavat alueet ovat.

suoritustason mittaamiseen on runsaasti laadukkaita työmaan nopeustestejä, joista monet ovat ilmaisia. WebPageTest.org (which partners with Cloudflare) on useita ilmaisia testejä ja tuottaa yksityiskohtaisia erittelyjä siitä, kuinka nopeasti Yksittäiset osat sivun kuormitus. WebPageTest.org: n avulla kehittäjät voivat myös testata verkkosivustoja eri laitteiden ja verkkoyhteyden nopeuksien varalta.

Google tarjoaa myös PageSpeed Insightsia yksityiskohtaiseen suorituskyvyn testaukseen. Google Chrome DevTools voi myös auttaa kehittäjiä arvioimaan sivustonsa suorituskykyä; Verkko-välilehti näyttää kaikki HTTP-pyynnöt, kuinka suuria pyydetyt varat ovat ja kuinka kauan pyyntöjen täyttäminen kestää.

käytä CDN: ää (content delivery network)

CDNs nopeuttaa verkkosivustoja tallentamalla sisältöä välimuistiin useissa paikoissa ympäri maailmaa. CDN-välimuistipalvelimet sijaitsevat tyypillisesti lähempänä loppukäyttäjiä kuin isäntä-eli origin-palvelin. Sisältöpyynnöt menevät CDN-palvelimelle eikä aina hosting-palvelimelle, joka voi olla tuhansia kilometrejä ja useiden autonomisten verkkojen päässä käyttäjästä. CDN: n käyttö voi johtaa sivujen latausaikojen massiiviseen vähenemiseen.

kuvien optimointi

kuvat muodostavat suuren osan Internet-liikenteestä, ja niiden lataaminen verkkosivustolle kestää usein pisimpään, sillä kuvatiedostot ovat yleensä kooltaan suurempia kuin HTML-ja CSS-tiedostot. Onneksi kuvan latausaikaa voidaan lyhentää kuvan optimoinnin avulla. Kuvien optimointiin kuuluu tyypillisesti resoluutioiden pienentäminen, tiedostojen pakkaaminen ja niiden mittojen pienentäminen, ja monet kuvaoptimaattorit ja kuvakompressorit ovat saatavilla ilmaiseksi verkossa.

Minify CSS-ja JavaScript-tiedostot

Minifying-koodi tarkoittaa kaiken sen poistamista, mitä tietokone ei tarvitse ymmärtääkseen ja toteuttaakseen koodia, mukaan lukien koodikommentit, välilyönnit ja tarpeettomat puolipisteet. Tämä tekee CSS-ja JavaScript-tiedostoista hieman pienempiä, jotta ne latautuvat selaimessa nopeammin ja vievät vähemmän kaistanleveyttä. Yksinään miinoittaminen johtaa vain vähäisiin nopeusparannuksiin. Kuitenkin, toteutetaan yhdessä näiden muiden vinkkejä, se johtaa parempaan sivuston suorituskykyä.

vähennä HTTP-pyyntöjen määrää, jos mahdollista

useimmat verkkosivut vaativat selaimia tekemään useita HTTP-pyyntöjä sivun eri resursseista, mukaan lukien kuvat, skriptit ja CSS-tiedostot. Itse asiassa monet verkkosivut vaativat kymmeniä näitä pyyntöjä. Jokainen pyyntö johtaa edestakaiseen matkaan resurssia isännöivälle palvelimelle ja palvelimelta, mikä voi lisätä verkkosivun kokonaiskuormitusaikaa. Lisäksi, kun resursseja Ladataan useilta eri tarjoajilta, ongelma yhden isännän kanssa voi vaikuttaa verkkosivun kykyyn ladata nopeasti, tai ollenkaan.

näiden mahdollisten emissioiden vuoksi kullekin sivulle ladattavien varojen kokonaismäärä on pidettävä mahdollisimman pienenä. Nopeustestin pitäisi myös auttaa tunnistamaan, mitkä HTTP-pyynnöt vievät eniten aikaa. Esimerkiksi, jos kuvat aiheuttavat sivun latautumisen hitaasti, kehittäjät voivat etsiä nopeamman kuvan hostausratkaisun (kuten CDN).

Käytä selaimen HTTP-välimuistia

selaimen välimuisti on väliaikainen tallennuspaikka, johon selaimet tallentavat staattisten tiedostojen kopiot, jotta ne voivat ladata äskettäin vierailleet verkkosivut paljon nopeammin sen sijaan, että niiden tarvitsisi pyytää samaa sisältöä uudelleen ja uudelleen. Kehittäjät voivat ohjeistaa selaimet välimuistiin elementtejä verkkosivun, jotka eivät muutu usein. Ohjeet selaimen välimuistiin mennä otsikot HTTP vastauksia hosting-palvelimen. Tämä vähentää huomattavasti datan määrää, jonka palvelin tarvitsee siirtää selaimeen, lyhentäen latausaikoja käyttäjille, jotka vierailevat usein tietyillä sivuilla.

minimoi ulkoisten skriptien sisällyttäminen

kaikki Skriptatut verkkosivun elementit, jotka ladataan jostain muualta, kuten ulkoisista kommentointijärjestelmistä, CTA-painikkeista tai lead-sukupolven ponnahdusikkunoista, täytyy ladata joka kerta, kun sivu latautuu. Riippuen komentosarjan koosta, nämä voivat hidastaa verkkosivun alas, tai aiheuttaa verkkosivun ei ladata kaikki kerralla (tätä kutsutaan ’sisällön hyppääminen’ tai ’layout shifting’ ja voi olla erityisen turhauttavaa mobiilikäyttäjille).

älä käytä uudelleenohjauksia, jos mahdollista

uudelleenohjaus on se, kun yhden verkkosivun kävijät ohjataan toiselle sivulle. Uudelleenohjaukset lisäävät sivun latausaikaan muutaman sekunnin murto-osan tai joskus jopa kokonaisen sekunnin. Suorituskykyoptimoitua verkkosivustoa rakennettaessa jokainen sekunti on tärkeä. Uudelleenohjaukset ovat joskus väistämättömiä, mutta niitä ei pitäisi käyttää, jos ei ole tarpeen.