9 tapaa parantaa verkkosivustosi latausnopeutta

Oletko kyllästynyt hitaaseen verkkosivustoon? Opi parantamaan ja parantamaan verkkosivustosi suorituskykyä saadaksesi nopeamman sivun latausnopeuden, onnellisimmat katsojat, & parempia muuntokursseja.


Kuinka korjata hitaasti ladattava verkkosivusto

Olet jo viettänyt paljon aikaa sivustosi käytettävyyden ja käyttökokemuksen parissa – mikä on välttämätöntä nykypäivän online-liiketoiminnalle -, mutta optimoimatta sivustosi sivun latausnopeutta epäonnistut lopulta molemmat. Nopeus on tärkeä osa sekä sivustosi käytettävyyttä että käyttökokemusta, ja ilman sitä sivustosi on vaarassa kadottaa kävijöitä.

Kukaan ei tykkää a hidas verkkosivusto. Hidas sivun latausnopeus voi ajaa käyttäjät pois nopeammin kuin…. ainakin nopeammin kuin sivun lataamiseen kuluva aika!

Nopea huomautus: Tutkimukset ovat osoittaneet se vie yhden sekunnin katsojan ajatusvirta pysyy keskeytyksettä. Joka toinen sekunti verkkosivustosi on vaarassa menettää katsojan kiinnostuksen. Tavoitteesi on saada verkkosivustosi latautumaan enintään sekunti.

Verkkosivuston latausaika on tärkeä!

Verkon alkuaikoina monet verkkosivustot olivat staattisia HTML-muotoisia, pohjimmiltaan pelkkää tekstiä sisältävää asiakirjaa, joten lataaminen vie teoriassa hyvin vähän aikaa. Yhteysnopeudet olivat kuitenkin myös alhaiset (jos olet liian nuori muistamaan selaamalla verkkoa 28.8-modeemilla, tämä on kuin pakko ajaa 1 maili tunnissa valtatiellä). Oli erittäin tärkeää ottaa huomioon kuvan koko ja verkkosivujen grafiikoiden lukumäärä, puhumattakaan siitä, että dynaamiset verkkosivut ladattiin CGI: llä. joka hidasti asioita huomattavasti. Nyt kaistanleveys on kasvanut. Voimme tehdä paljon enemmän verkossa, ja tietysti myös.

On kuitenkin tärkeää muistaa, että vanhoja sääntöjä sovelletaan edelleen.

Huolimatta siitä, että Internet-nopeuksemme ja käyttämämme laitteet (kuten kannettavat tietokoneet, tabletit), & älypuhelimet) muuttuvat entistä nopeammin vuodessa, kärsivällisyytemme näyttää lyhenevän. Sen ei koskaan tarpeeksi. Haluamme mitä haluamme ja haluamme sen nyt. Siksi verkkoyritysten on erittäin tärkeää optimoida verkkosivustonsa latausaika.

Tässä artikkelissa keskustelemme parhaista käytännöistä ja nykyisistä tekniikoista, joita käytetään verkkosivuston sivun latausnopeuden optimoimiseksi, jotta voit soveltaa näitä omaan verkkosivustoosi.

LUKAA myös: Nopeus on tärkeä myös SEO: lle.

Testaustyökalut

Ennen kuin aloitat mitään, sinulla on oltava menetelmä määrittämiseen mitä hidastaa sivustoasi ja on nykyisen verkkosivustosi nopeuden vertailuarvo parannusten mittaamiseksi. Jäljempänä luetellut ongelmat saattavat olla tärkein ongelmasi, mutta et voi tietää sitä, ellet voi seurata prosessia.

Sinun tulisi olla tietoinen siitä, että antaa ja ottaa paljon. Jotkut alla olevista ratkaisuista saattavat kuulostaa siltä, ​​että ne ovat ristiriidassa keskenään. Tämä johtuu siitä, että joskus ratkaisu yhteen ongelmaan voi kasvattaa nopeusongelmaa toisella sivustosi alueella. Esimerkiksi kuvan spritien luominen voi aiheuttaa tarpeen ladata ensin yksi iso kuva, mikä vähentää tarvetta ladata monia muita kuvia, mutta voi hidastaa alkuperäistä latausaikaa (käsittelen näitä menetelmiä myöhemmin).

Tästä syystä sinun pitäisi mitata yhden muutoksen tuloksia toiseen, jotta voit määrittää, mikä antaa parhaat tulokset.

Tässä on muutama hyödyllinen työkalu:

  • Google-sivun nopeustiedot – Tämä ilmainen Google-työkalu tarkistaa kaikki URL-osoitteet ja suorittaa sivustosi testin toimivuuden suhteen. Se tarjoaa erilaisia ​​tuloksia sivustosi toiminnasta sekä pöytätietokoneissa että mobiiliympäristöissä. Se kattaa monia tässä artikkelissa käsiteltyjä alueita ja antaa ehdotuksia siitä, mikä saattaa erityisesti johtaa sivustosi hidastumiseen. Tämä työkalu näyttää kuitenkin olevan erittäin aggressiivinen ja joskus epärealistinen, joten pidä tämä mielessä.
  • Pingdom-verkkosivuston nopeustesti – Pingdomilla on myös hienoja nopeuden testausratkaisuja, jotka voivat testata sivustosi useista eri puolista maailmaa (tämä on yksi syy siihen, miksi on hyvä idea käyttää CDN: tä; lisää tästä alla). Se tarjoaa monia käytännöllisiä ratkaisuja nopeuden parantamiseksi.
  • YSlow – Tämä on selaimesi ilmainen laajennus, joka antaa sinulle arvosanan, joka perustuu HTTP-pyyntöjen määrään, kuvan kokoon, käytetäänkö CDN: tä jne..
  • Suorituskykybudjettilaskin – Tämä on hyödyllinen pieni työkalu selville, millaista sisältöä sinulla on varaa (kaistanleveyden perusteella) pitääksesi sivustosi optimaalisena.

varoitus: Toinen tärkeä huomioitava asia on, mikä lähestymistapa parantaa parhaiten käyttäjän kokemusta. Sinun tulisi selvittää, ovatko ylimääräiset latausajat verrattuna asteittaisiin latausaikoihin tehokkaimpia. Paras tapa tehdä tämä on käytettävyystestaus ja erityisesti A / B-testaus.

Kuinka verkkosivustosi latautuu nopeammin

Okei, joten nyt, kun sinulla on joitain testaustyökaluja, sukellaan todellisiin asioihin, joita voimme tehdä nopeuttaaksemme verkkosivujamme!

KÄYTÄT WORDPRESSIÄ? Laajennuksia on monia & tietyt WordPress-optimoinnit, jotka ovat käytettävissä suorittamaan monia tässä lueteltuja tehtäviä! Tutustu artikkeliimme, joka on tarkoitettu yksinomaan WordPressin nopeuttamiseen.

1. Tiedostosi ovat liian suuria tai sinulla on liikaa

Muistatko aikaisemmin, kuinka puhuimme siitä, kuinka tärkeä tiedostokoko oli verkon alkuaikoina? Se on edelleen tärkeä. Vaikka tämä saattaa vaikuttaa itsestään selvältä, se on silti sanottava. Suurten tiedostojen lataaminen vie kauemmin.

Käytä pienempiä tiedostoja ja vähemmän niitä (myös tämä saattaa todella lisätä käyttökokemusta. Vaikka ihmiset pitävät kuvista, liian monet voivat luoda tiedon ylikuormituksen)

Useimmiten et tarvitse kovin suuria kuvia. Vaikka kuvan koon muuttaminen on helppoa CSS: n avulla, tuhlaat kaistanleveyttä, jos teet tämän pienentääksesi tiedostoa. Muuta kuvien kokoa ennen lataat ne. On hämmästyttävää, kuinka paljon pienempiä voit tehdä niistä.

2. Kytke GZIP-pakkaus päälle

Jopa pienentäessäsi tiedostokokoa, on hyvä idea pakkaa ne yhdessä muun sivustosi kanssa ennen lähettämistä käyttäjälle. Olet todennäköisesti jo perehtynyt tähän käsitteeseen. Joskus tarvitset tavan lähettää paljon tiedostoja verkon välityksellä, joten sinun on pakotettava ”kopioimaan” tiedostot kokoon, jonka palveluntarjoajasi sallii. No, HTTP-pakkaus on melko sama asia.

Useimmat verkkopalvelimet sallivat tiedostojen pakkaamisen apuohjelmalla, jota kutsutaan gzip. Gzip ottaa kaikki sivustosi tiedostot, pakata ne paljon pienemmäksi ennen lähettämistä käyttäjän selaimeen. Tämä toimii kaikkien sivustosi tiedostojen kanssa. Tässä on myös joitain muita käteviä online-kuvanpakkaustyökaluja, joita voit käyttää pakkaamaan sivustosi tiedostoja.

3. Välimuisti

Voit myös antaa selaimille ohjeita siitä, milloin sen pitäisi käyttää sivustosi välimuistissa olevaa versiota verrattuna uuteen versioon. Käyttämällä Korjaa otsikot voit kehottaa käyttäjää käyttämään välimuistissa olevaa sisältöä, jos se on staattista, mutta myös hyödyntämään tarvittaessa uuden sisällön lataamista, kuten dynaamista sisältöä.

4. Sinulla on liikaa palvelinsoittoja (HTTP-pyynnöt)

Tämä on yksi tärkeimmistä asioista, jotka on otettava huomioon nopeuttaessasi sivustoasi. Joka kerta kun pyydät uutta tiedostoa tai ohjaat sivuston jostain syystä, tämä hidastaa prosessia. Jokaisen kanssa käyttäjän selaimen on suoritettava matka palvelimellesi, joka sitten löytää resurssin, ja välittää se takaisin käyttäjälle. Vaikka tämä on hyvin pieninä annoksina, jokainen palvelinsoitto (varsinkin jos se tapahtuu samalla sivulla) hidastaa sivustoasi rajusti.

Jokainen tiedosto, jota pyydät tai jolla on sivustosi, lähettää puhelun palvelimelle. Jos sivustollasi on 20 kuvaa, se on 20 kertaa palvelimelle kutsuttava. Voit vähentää näitä asioita monella tavalla.

  • Käytä CSS-kuvapiirejä – nämä ovat yksittäisiä kuvia, jotka sisältävät yhdistelmän kaikista sivustosi kuvista yhtenä kuvana. CSS: n avulla voit antaa vain sen tiedoston osan, joka on välttämätöntä näytettäväksi tietyssä paikassa. Tämä tarkoittaa, että 20 puhelun sijaan 20 kuvaa vaatii vain yhden suuren kuvan. Ole kuitenkin varovainen – vaikka tämä vähentää puheluita db: hen, mikä nopeuttaa ehdottomasti sivustoasi, kuvan koko voi silti olla ongelma.
  • Korjaa rikki linkit – joka kerta, kun yrität lähettää joku sivulle, jota ei enää ole sivustossasi, se aiheuttaa palvelimellesi 404-sivun toimittamisen. Pohjimmiltaan tämä tarkoittaa, että se etsii sivua, saa viestin, jota ei löydy, ja sen on sitten haettava mukautettu virhe. Jokainen näistä palvelinpuheluista voi hidastaa sinua.
  • Vähennä uudelleenohjauksia – Yritä vähentää kuinka monta kertaa valitset palvelimen lähettävän jonkun toiselle sivulle. Vaikka tämä saattaa vaikuttaa hyödylliseltä (esimerkiksi SEO: lle) sivujen luomisessa tätä tarkoitusta varten, jos soitat liian monta palvelinpuhelua, tämä saattaa hidastaa sivustosi ja vaikuttaa negatiivisesti käyttökokemukseen.

Esimerkki kuvankaiteestaEsimerkki kuvan spriteistä. Kuvan lähde

6. Verkkosivustosi koodaustarpeita on optimoitava

  • Pienennä CSS ja javascript – Tyhjä tila tarkoittaa jotain selaimessa. Se voi näyttää tyhjältä sinulle tai minulle, mutta jokainen tyhjä tila on merkki, joka on luettava ja muutettava. Monissa tapauksissa se ei ole välttämätöntä, joten käytät joitain minimointityökaluja tiedostojen pakkaamiseen edelleen toimiviksi mutta nopeammin komponenttien lukemiseksi. Googlella on käytettävissä hyviä työkaluja, jotka auttavat sinua minimoi JavaScript ja CSS
  • Käytä HTML: ää PHP: n sijasta, jos se ei ole dynaamista sisältöä – Vaikka suuri osa koodistasi voi olla dynaamista, joskus on hienoa mennä vanhaan kouluun ja käyttää pelkkää HTML-koodia. PHP on suoritettava prosessorin läpi. Selain tulkitsee HTML: n suoraan. Jos kyseessä on vain toimittamasi staattinen sisältö, säilytä se staattisesti.
  • Laita CSS ylhäällä ja JavaScript alareunaan – Tämä on vanha sääntö, mutta sitä sovelletaan edelleen. Tarvitset CSS: n renderoinnin nopeasti, mutta JavaScriptin pitäisi suorittaa vasta, kun sivu itse latautuu. Voit myös olla riippuvainen liiasta JavaScriptin kutsumisesta ulkoisesta tiedostosta. Jos sitä ei ole paljon, sisällytä se suoraan sivulle, koska tämä on yksi HTTP-pyyntö, joka on tehtävä.

Merkintä: Jos käytät suuria suosittuja JavaScript-kirjastoja, kuten JQuery, neuvoja on hiukan erilainen. Haluat nämä erillisessä tiedostossa, mutta realistisesti se on vielä parempi idea käyttää jQuerya suoraan CDN-levyltä. Tällä on muutama etu. Koska nämä kirjastot ovat suosittuja, on erittäin todennäköistä, että käyttäjällä on jo tämän välimuistin versio kirjastosta, joten sen lataaminen ei vie aikaa. Jos palvelimesi antaa sen, tämä on toinen palvelinsoitto, ja koko kirjasto on ladattava, jotta se toimii. Tämä voi lisätä verkkosivustosi hitautta.

Okei, joten nyt olet katsellut ja kiinnittänyt niin paljon kuin pystyt sisäisesti, mutta se näyttää silti hitaalta, etenkin pitkistä etäisyyksistä. Katsotaanpa joitain palvelintyökaluja.

7. Sivustosi on hidas latenssin takia

Viive on termi, joka tarkoittaa aikaa, joka kuluu palvelimen vastaamiseen HTTP-pyyntöön. Syy tähän on tärkeä samasta syystä, että et halua tehdä liian monta pyyntöä. Jos pystyt nopeuttamaan tätä aikaa, se lisää huomattavasti sivustosi nopeutta. Viive lisääntyy loppukäyttäjän ja sisältöä tarjoavan palvelimen välisen fyysisen etäisyyden funktiona.

Esimerkki verkkosivustojen viiveestä

Yksi parhaimmista tavoista käsitellä tätä on käyttää sisältöjakeluverkkoja tai CDN: itä. Nämä välimuistikopiot verkkosivustosi sisällöstä eri puolilla maailmaa, joten viive laskee jokaisessa näissä paikoissa. Tunnetuimpia CDN-palveluntarjoajia ovat Akamai, Cloudflare ja Amazon AWS, mutta niitä on monia. CDN: n käyttäminen on vaivan arvoista, etenkin jos sinulla on asiakkaita, jotka ovat kaukana palvelimesi sijainnista.

8. Tietokanta on liian hidas

Suurin osa verkkosivustoista on nykyään riippuvainen suuresti tietokantaan tallennetusta sisällöstä. Tämä pätee erityisesti verkkokauppasivustoihin. Sinulla on todennäköisesti monia tuotteita ja sinun on säilytettävä ne ja toimitettava heille yhdellä napsautuksella. Vaikka tietokannat ovat suuria ja ovat ystäväsi, tietokanta voi olla tehottomasti järjestetty tai voi olla olemassa useita huonoja kyselyitä. Muista, että jos käyttäjän on odotettava useita sekunteja kunkin kyselyn välillä, tämä laskee. Jos käyttäjät eivät löydä tarkkaa tuotetta heti tai jos se vie liian kauan, he voivat lähteä ilman ostoa. Vaikka he löytäisivät jotain, todennäköisyys, että he jatkavat selaamista, pienenee myös jokaisella lisäkerralla.

Tässä on hyvä askel askeleelta opas kuinka aloittaa tämä MySQL-tietokannassa.

merkintä: Jos sinulla on suuri tietokanta, sinun on ehkä palkattava tietokantaammattilainen auttamaan sinua, koska tämä voi jonkin verran osallistua.

9. Web-palveluntarjoajasi ei vain ole tarpeeksi nopea

Riippumatta siitä kuinka paljon hemmottelua ja mukautusta teet verkkosivustollesi, se on vain yhtä nopea kuin sen heikoin linkki – mikä tässä tapauksessa on Web-palvelimesi. Nopean web-isännän valitseminen on perusta nopealle verkkosivustolle. Itse asiassa voit jakaa kaikki optimoinnit kahteen pääosaan – 1) verkkosivustosi optimointiin ja 2) web-palvelimen optimointiin. Web-hosting on tärkeä asia, ja siksi olemme kirjoittaneet siitä laajoja oppaita. Verkkopalvelimesi on oikeastaan ​​melko monimutkainen ja siellä on paljon määrityksiä, joita tarvitaan sekä fyysisen palvelimen laitteistoille että ohjelmistoille, mutta onneksi suurin osa web-hosting-suunnitelmista hallitaan, mikä tarkoittaa, että web-hosting-yritys tekee tämän puolestasi. Olemme julkaissut tämän artikkelin nopeimmista verkkoisäntäkoneista luettelon hyödyllisistä yrityksistä.

johtopäätös

Vaikka jokainen edellä mainituista kategorioista voidaan tutkia yksityiskohtaisemmin, jos noudatat näitä ohjeita, sinulla on erittäin hyvät mahdollisuudet lyhentää verkkosivustosi latausaikaa puoleen tai enemmän ja parannat varmasti nopeutesi sivusto. Ilmoita minulle kommentti-osiossa, jos sinulla on kysyttävää.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me