6 helppoa tapaa vähentää verkkosivustosi sivujen latausaikaa

Sanonta "kärsivällisyys on hyve" ei koske verkossa.

Jopa yhden sekunnin viive voi tapahtua rajusti vähentää sivun katselua, asiakastyytyväisyyttä ja pudottaa tuloksia. Sivustosi nopeus vaikuttaa jopa orgaanisen haun sijoituksiin.

Joten mikä on suurin tekijä sivusi nopeuteen?

Koko.

Sivusi muodostavan koodin lataaminen vie selaimilta aikaa. Sen on ladattava HTML, tyylisivut, skriptit ja kuvat. Kaikkien tietojen lataaminen voi viedä hetken.

Kun verkkokäyttäjät odottavat kiinnostavampaa sivustosuunnittelua, sivuston resurssitiedostojen koko kasvaa edelleen. Jokainen uusi ominaisuus vaatii uuden komentosarjan tai tyylitaulukon, joka painaa sivustosi vain vähän enemmän.

Kuinka varmistat sivustosi nopeuden?

Tämän analysoimiseksi on hienoja resursseja. Googlen PageSpeed ​​Insights, HubSpot: n verkkosivutja GTMetrix ovat joitain suosituimmista. Molemmat palvelut analysoivat sivustosi ja kertovat, mihin jäätte jälkeen.

Pieni varoitus: tulokset voivat olla joskus pelottavia, mutta useimmat korjaukset ovat suhteellisen nopeita ja helppoja. Et ehkä korjaa kaikkea nopeuspalvelun suosittelemaa, mutta sinun pitäisi korjata tarpeeksi, jotta sivustokokemus paranee kävijöillesi.

Otetaan oppia nopeuttamaan asioita.

Vaikka muutama nykyaikainen sisällönhallintajärjestelmä, kuten HubSpot ota nopeuden parantamisvaihtoehdot käyttöön laatikosta, yleisemmät järjestelmät, kuten WordPress ja Joomla, vaativat vähän käsityötä nopeuden saavuttamiseksi.

Katsotaan nyt joitain välttämättömiä nopeusratkaisuja, jotka jokaisen verkkovastaavan tulisi harkita.

1. Pienennä kuvia.

Kuvat ovat yksi verkon yleisimmistä kaistanleveyshaitoista. Ensimmäinen tapa optimoida kuvat on skaalata ne asianmukaisesti, jotta ne eivät vaikuta sivun latausaikaan yhtä paljon.

Monet verkkovastaavat käyttävät valtavia kuvia ja pienentävät niitä sitten CSS: n avulla. He eivät tiedä, että selaimesi lataa ne silti täysikokoisena. Jos sinulla on esimerkiksi kuva, jonka koko on 1000 x 1000 pikseliä, mutta olet pienentänyt sen arvoon 100 x 100 pikseliä, selaimesi on ladattava kymmenen kertaa enemmän kuin tarvitaan.

Tarkastele kokoeroja, kun pienennämme yhtä kuvaa:

Kuinka suureen tiedostokokoon vaikuttaa skaalausPelkästään kuvani mittoja vaihtamalla 598 x 398:sta 600 x 232:een tiedoston koko pieneni valtavasti. Jos optimoit kuvat ennen niiden lataamista, et unohda sitä, kun laitat ne sivullesi.

Joskus kuvien skaalaus tekee valokuvat epäselväksi. Selkeys voi kadota ja kuva vääristyy. Jos niin yleensä tapahtuu sinulle, siirry toiseen vaihtoehtoon: pakkaaminen.

Kuvien pakkaaminen pienentää kuvan kokoa huomattavasti menettämättä laatua. Kuvien pakkaamiseen on olemassa useita ilmaisia ​​online-työkaluja, kuten tinypng.com, joka voi pienentää kuvasi kokoa. Voit nähdä koon pienentymisen kaikkialla 25%: sta 80%: iin.

Esimerkiksi otin ensimmäisen kuvan, 133 kt, ja pakatin sen ilmaisella verkkosivusovelluksella nimeltään Squoosh. Kun kuva valmistui, se oli 87 % pienempi eikä menettänyt yhtään alkuperäisestä laadustaan.

2. Välimuisti tallentaa selaimesi.

Miksi kävijät lataavat samat asiat joka kerta, kun he lataavat sivun? Selaimen välimuistin käyttöönotto sallii väliaikaisesti tallentaa tietoja vierailijoiden tietokoneelle, joten heidän ei tarvitse odottaa sen lataamista joka kerta, kun he vierailevat sivullasi.

Tietojen tallennusaika riippuu niiden selaimen määrityksistä ja palvelinpuolen välimuistin asetuksista. Voit määrittää selaimen välimuistin palvelimellesi tarkistamalla alla olevat resurssit tai ottamalla yhteyttä hosting-yritykseesi:

3. Vähennä CSS: n latausaikaa.

CSS latautuu ennen kuin ihmiset näkevät sivustosi. Mitä kauemmin heidän CSS-tiedoston lataaminen vie, sitä kauemmin he odottavat. Optimoitu CSS tarkoittaa, että tiedostosi latautuvat nopeammin, mikä antaa kävijöillesi nopeamman pääsyn sivuillesi.

Aloita kysymällä itseltäsi: "Käytänkö kaikkea CSS:täni?" Jos ei, poista tiedostojesi tarpeeton koodi. Jokainen hukkaan heitetty data voi kasvaa, kunnes verkkosivustosi etananopeus pelottaa vierailijasi pois.

Seuraavaksi sinun tulee minimoida CSS-tiedostosi. Ylimääräiset välilyönnit tyylitaulukoissa lisäävät tiedoston kokoa. CSS-minimointi poistaa ylimääräiset välilyönnit koodistasi varmistaaksesi, että tiedosto on pienimmässä koossa.

CSS-tiedoston pakkaamisen vaikutukset

Katso, minimoi CMS jo CSS -si vai onko siihen jokin vaihtoehto. Esimerkiksi HubSpot minimoi CSS: n oletusarvoisesti, kun taas WordPress-sivustot vaativat lisälaajennuksen, kuten WP Kolibri näiden tiedostojen optimoimiseksi.

Jos CMS: lläsi ei ole pienennä CSS-vaihtoehtoa, voit käyttää ilmaista verkkopalvelua, kuten CSS-pienennin. Liitä vain CSS-tiedostoosi ja paina “Pakkaa” nähdäksesi vasta pienennetyn tyylitaulukon.

Resurssitiedostojen minimointi on loistava tapa koputtaa tiedostoja jonkin verran. Luota minuun - nuo pienet tilat kasvavat nopeasti.

4. Pidä skriptit taitoksen alla.

Javascript-tiedostot voidaan ladata loput sivusi jälkeen, mutta jos laitat ne kaikki ennen sisältöäsi - kuten monet yritykset tekevät -, ne ladataan ennen kuin sisältösi tekee.

Tämä tarkoittaa sitä, että kävijöiden on odotettava Javascript-tiedostojesi latautumista, ennen kuin he näkevät sivusi. Yksinkertaisin ratkaisu on sijoittaa ulkoiset Javascript-tiedostot sivusi alaosaan, juuri ennen vartalon tunnisteen sulkemista. Nyt enemmän sivustosi voi latautua ennen skriptejäsi.

Toinen menetelmä, joka mahdollistaa entistä paremman hallinnan, on lykätä or async määritteet sijoitettaessa ulkoisia .js-tiedostoja sivustoosi. Sekä lykkäys että async ovat erittäin hyödyllisiä, mutta varmista, että ymmärrät eron, ennen kuin käytät niitä.

Async-tunnisteet lataavat skriptit, kun muu sivu latautuu, mutta skriptit voidaan ladata epäkunnossa. Pohjimmiltaan kevyemmät tiedostot ladataan ensin. Tämä saattaa olla hieno joillekin skripteille, mutta voi olla tuhoisa joillekin.

Oletetaan esimerkiksi, että yhdellä sivullasi on video sivun yläosassa, teksti sen alla ja pari kuvaa alareunassa. Jos käytät async-tageja tällä sivulla, teksti latautuu ensin, sitten kuvat ja video viimeisenä.

Suurin tiedosto – videotiedosto – on myös se, jonka kanssa käyttäjien oletetaan olevan vuorovaikutuksessa ensin. Kun se latautuu viimeksi, sillä ei ole samaa vaikutusta. Käytä siis async-tageja, jos sivullasi on paljon samoja elementtejä, joiden latautuminen ei vie kauan, kuten tekstiä tai kuvakarusellia.

Lykkäysominaisuus lataa skriptit, kun sisältösi on ladattu. Se myös suorittaa skriptit järjestyksessä. Kuvittele, ajattele kotisivusi. Kaikki elementit, mukaan lukien kuvakentät, tekstikentät ja asettelu, näkyvät järjestyksessä, loput ladataan jälkeen.

Varmista vain, että skriptisi toimivat rikkomatta sivustoasi. Sinun tarvitsee vain lisätä yksinkertainen sana omaan tags. For example, you can take your original script:

Ja lisää pieni koodi varmistaaksesi, että se latautuu milloin haluat:

Skriptien tärkeys määrittää, saavatko ne attribuutin ja minkä määritteen lisäät. Tärkeimmillä skripteillä pitäisi todennäköisesti olla async-ominaisuus, jotta ne voivat latautua nopeasti pidättämättä loput sisällöstäsi. Ei-välttämättömien tulee kuitenkin odottaa loppuun asti, jotta kävijät näkevät sivusi nopeammin.

Muista kuitenkin aina testata jokainen skripti varmistaaksesi, että ominaisuus ei riko sivustoasi.

5. Lisää asynkroniset sivut.

Useimmat verkkosivut lataavat sisältöä vähitellen eri lähteistä. Esimerkiksi selain lataa verkkosivun rungon. Pää saadaan kuitenkin ulkoisista lähteistä, kuten tyylitaulukosta ja komentosarjasta, jota käytetään tekstin ja kuvien lataamiseen.

Selain, joka lataa sivun alusta loppuun, päästä varteen, kestää hetken, mutta paljon sivuja näytetään tällä synkronisella latauksella. Jos yksi sivun osa tarvitsee tietyn toiminnon lataamista varten, mutta kyseinen komponentti on jo latamassa toista sivun osaa, alkuperäisen latauksen on oltava päättynyt ennen seuraavan tehtävän aloittamista.

Sillä välin vierailija odottaa web-sivun ilmestymistä iät ajat. Taustalla niin paljon tietokoneen prosessoria hyödynnetään, että näyttää siltä, ​​​​että kaikki vain pysähtyy.

Sen sijaan asynkroninen lataus tunnistaa komentosarjat, jotka voidaan ladata samanaikaisesti, ohittaen synkroniset ominaisuudet. Kun tietyt sivut ladataan samanaikaisesti, jolloin aiemmin käsitelty toimintokomentoketju poistetaan, sivun muut osat, kuten sivun otsikko, voidaan ladata rinnakkain.

Asynkroniset sivut voidaan toteuttaa vain lisäämällä muutama rivi koodia sivusi CSS:ään. Lue kuinka ne suunnitellaan tässä viestissä.

6. Minimoi uudelleenohjaukset.

Kuinka monta uudelleenohjausta on verkkosivustollasi? Jos olet äskettäin siirtänyt verkkosivustoja tai hankkinut aliverkkotunnuksia, sinulla on todennäköisesti HTTP-pyyntö tai kaksi. Näiden uudelleenohjausten ansiosta sivujen latautuminen kestää jonkin aikaa.

Uudelleenohjaukset, kuten "Virhe: 404 ei löydy", tulevat näkyviin, kun käyttäjät kirjoittavat väärän verkko-osoitteen tai heidät ohjataan verkkosivuston rikkinäiselle sivulle. Kun sivu uudelleenohjataan, toinen sivu tulee tilalle tai tyhjä sivu, jossa on virheilmoitus, korvaa näytön.

Vierailijoiden on istuttava HTTP-näytön läpi, kun heidät uudelleenohjataan, mikä pidentää sivun lataamiseen kuluvaa aikaa. Oletetaan, että Tietoja-sivusi on siirretty eri aliverkkotunnukseen.

Kun vierailijat kirjoittavat verkkosivustolle, esimerkiksi mywebsite.com/about, heidät pitäisi ohjata välittömästi kyseiselle sivulle. Sen sijaan mywebsite.com/about johtaa HTTP-sivulle ja vie vierailijan osoitteeseen mywebsite.com > mywebsite.com/about. Tämä on lisäsivu, jonka käyttäjien on käytävä läpi päästäkseen aiottuun määränpäähän.

Poista sen sijaan, että ylläpitäisit useita uudelleenohjauksia. Tässä viestissä, opit löytämään kaikki uudelleenohjaussivusi, vaihtoehdot ja mikä tärkeintä, kuinka ne poistetaan.

Koska verkkokäyttäjät vaativat rikkaampaa verkkokokemusta, sivujemme koko kasvaa edelleen. Verkkosivumme punnitsemiseen sisältyy Flashier Javascript, lisää CSS-temppuja ja enemmän kolmansien osapuolien analytiikkaa.

Pieni huomio menee pitkälle - muista, vain sekunnin viive on kaikki, mikä tarvitaan lyijyn menettämiseen.

lähde