Syyt ja Semalt-ratkaisut hitaille verkkosivustoille


Sisällysluettelo

1. Johdanto
2. Hitaiden verkkosivustojen syyt ja ratkaisut
  • Liian monta HTTP-pyyntöä
  • Suuret mediatiedostot
  • Liian monta laajennusta
  • JavaScript-ongelmat
  • Et käytä välimuistitekniikoita
  • Et käytä CDN: ää
  • Optimoimaton CSS
  • Siisti kotisivu
  • Saastainen koodaus
3. Johtopäätös

1. Esittely

Et voi olla todella menestyvä verkkosivuston omistajana, jos sinulla on sivuja, joiden lataaminen kestää ikuisesti. Menneet ovat päivät, jolloin käyttäjien täytyi kestää turhauttavaa kokemusta hitaasta verkkosivustosta. Viimeaikaiset tutkimukset ovat paljastaneet, että useimmat käyttäjät hylkäävät sivuston, jos lataaminen kestää yli kolme sekuntia. Merkitys on yksinkertainen; tällä 2000-luvulla nopeus on pelin nimi.

Sivunopeus vaikuttaa siihen, miten hakukoneet sijoittavat sivustosi. Se vaikuttaa myös sivustosi näkyvyyteen ja uskottavuuteen. Hidas verkkosivusto voi johtaa tulojen laskuun, koska 40% käyttäjistä hylkää sivustosi, jos lataaminen kestää yli 2–3 sekuntia. Annat myös sivuston kävijöille negatiivisen kokemuksen, mikä vähentää heidän todennäköisyyttä palata sivustoosi.

Hitaista verkkosivustoista on monia tekijöitä. Lue edelleen, mitkä nämä tekijät ovat ja kuinka korjata ne.

2. Hitaiden verkkosivustojen syyt ja ratkaisut

  • Liian monta HTTP-pyyntöä
Tämä on yleinen syy hitaille verkkosivustoille. Kun sinulla on niin paljon JavaScript-kuvia ja CSS: ää, se voi hidastaa verkkosivustosi latausaikaa, koska selain pyytää lataamaan nämä tiedostot aina, kun joku vierailee sivustollasi. 80% verkkosivustosi latausaikasta liittyy näiden elementtien lataamiseen.
Voit ratkaista tämän ongelman minimoimalla HTTP-pyynnöt. Jos käytät Chrome-selainta, selvitä kehittäjätyökalun asetuksistasi, kuinka monta hakua verkkosivustosi tekee jokaiselle haulle, ja vähennä sitten sitä mahdollisimman paljon.

Voit myös yrittää yhdistää joitain niistä. Voit pienentää ja yhdistää HTML-, CSS- ja JavaScript-tiedostoja, koska nämä tiedostot lisäävät sivustosi pyyntöjen määrää jokaisella käynnillä. Voit myös poistaa tarpeettomat uudelleenohjaukset, koska ne vaikuttavat hitaaseen latausaikaan tai käyttöön Semaltin verkkosivun analysaattori suorittaa diagnostiikkaa ja tarjota ratkaisuja.

  • Suuret mediatiedostot
Tämä on yksi hitaan verkkosivuston yleisimmistä syyllisistä. Liian monta optimoimattomaa kuvaa tai videota vähentää verkkosivustosi latausnopeutta, koska kuvat käyttävät paljon kaistanleveyttä lataamisen aikana. Jos lataat usein suuria tiedostoja ennen kuin yrität pakata niitä, kasvatat tarpeettomasti verkkosivustosi kokoa, mikä vaikuttaa verkkosivustosi nopeuteen.
Voit ratkaista tämän ongelman optimoimalla mediatiedostosi pakkaamalla ne ennen lataamista verkkosivustollesi. Kuviesi tulee olla enintään 100 kt. On olemassa useita online-työkaluja, joita voit käyttää kuviesi optimointiin. Voit pienentää kuvan kokoa ennen lataamista käyttämällä ilmaista kuvien pakkaustyökalua nimeltä TinyJPG. Jos sinulla on WordPress-sivusto, voit käyttää WP Smushia.
Sinun tulisi myös kiinnittää huomiota kuvamuotoon, koska PNG- tai GIF-kuvamuodot ovat paljon suurempia kuin JPG-muodot, joten JPG-kuvamuodon käyttäminen voi auttaa sivustoasi latautumaan paljon nopeammin. Voit valita graafisen muokkaussovelluksen, kuten Photoshop, haluamasi kuvamuodon. Photoshopissa on vaihtoehto nimeltä "Tallenna verkkoon ja laitteisiin", jonka avulla voit heikentää kuvan laatua ennen kuin lataat sen sivustolle.
  • Liian monta laajennusta
Liian monta laajennusta voi olla toinen syy, miksi verkkosivustosi on hidas. Jos sinulla on useita laajennuksia, jotka hallitsevat sivustosi eri ominaisuuksia, se voi painaa sivustoasi ja saada sen latautumaan hitaammin. Tämä johtuu siitä, että laajennukset lisäävät työtä, jonka sivustosi on tehtävä lataamisen aikana. Laajennukset voivat myös häiritä sivustosi sivujen hakemista, mikä vähentää sivustosi sivunopeutta.
Älä unohda tuhansia laajennuksia, jotka tarjoavat hämmästyttäviä asioita sivustollesi ja ylikuormittavat sivustoasi liian monilla laajennuksilla. Sen sijaan sinulla on all in one -laajennus, joka voi tehdä työn tehokkaasti. Yksi laajennus, jota voit käyttää tähän tarkoitukseen, on MalCare. Sen avulla voit hallita WordPress-sivustoasi ja suojata sivustoasi hakkereilta ja haittaohjelmilta.
  • JavaScript-ongelmat
JavaScript on tärkeä työkalu, joka tekee sivustostasi toimivan ja interaktiivisemman käyttäjille. Se helpottaa dynaamisen datan lataamista AJAX: n kautta ja lisää myös erikoistehosteita sivullesi. Jos sitä ei kuitenkaan hoideta hyvin, JavaScript voi olla ongelma verkkosivustollesi.

Se voi estää sivujesi latautumisen niin nopeasti kuin pitäisi, koska selaimen on ladattava kaikki JavaScript-tiedostot kokonaan ennen kuin ne voivat näyttää verkkosivua. Optimoimaton JavaScript voi johtaa ns. Renderointia estävään JavaScriptiin tai JavaScriptiin, joka viivästyttää sivujasi, kun käyttäjät yrittävät avata niitä selaimissaan.
Tämän ongelman ratkaisemiseksi sinun tulee:
  • Käytä sisäistä JavaScriptiä ulkoisten JavaScript-tiedostojen sijaan.
  • Tarkasta JavaScript-tiedostosi nähdäksesi, onko olemassa ketään, joka ei ole niin tärkeä, jotta voit päästä eroon niistä.
  • JavaScriptin pakkaaminen auttaa myös, asenna YUI-kompressori ja käytä sitä tiedostojen murskaamiseen.
  • Käytä asynkronista latausta JavaScript-tiedostoihisi.
  • Lykkää JavaScriptin lataamista; Jos estät JavaScriptiä latautumasta vasta kun muut elementit ovat latautuneet, kasvatat sivusi nopeutta.

  • Et käytä välimuistitekniikoita
Kun otat selaimen välimuistin käyttöön, selaimesi voi tallentaa staattisia kopioita verkkosivustosi tiedostoista kiintolevylle tai välimuistiin. Tällä tavoin se voi näyttää välimuistissa olevat tiedot sen sijaan, että lähettäisi uuden HTTP-pyynnön palvelimelle aina, kun käyttäjä vierailee sivustollasi.

Voit ottaa välimuistin käyttöön helposti laajennuksilla, kuten W3 Total Cache. Tämä toimii parhaiten, jos käytät WordPress-sivustoa. W3 Total Cache sanoo, että sen käyttäjien sivunopeus on kymmenen kertaa parempi kuin ennen laajennuksen käyttöä.
Jos haluat tallentaa sivustosi välimuistiversion käyttäjän selaimeen ja siirry yleisiin asetuksiin. Valitse selaimen välimuisti, napsauta ruutua "Ota käyttöön". Huomaa, että voit määrittää, kuinka kauan haluat, että tiedosto tallennetaan kävijän välimuistiin. Sinun tarvitsee vain lisätä rivi, joka kertoo selaimelle, kuinka kauan haluat tiedoston pysyvän vierailijan välimuistissa.
  • Et käytä CDN: ää
Sisältötoimitusverkoston avulla voit tallentaa verkkosivustosi kopioita eri palvelimille, jotka on sijoitettu useisiin strategisiin paikkoihin, jotta sivusi latautuvat nopeasti, kun kaukana pääpalvelimestasi olevat käyttäjät yrittävät päästä sivustoosi. Sivustosi isännöinti vain yhdelle palvelimelle voi aiheuttaa hitaan sivunopeuden, koska kaikki sivustosi kävijät lähettävät pyyntöjä samalle palvelimelle, mikä voi luoda sivustollesi paljon liikennettä ja pidentää käyttäjien pyyntöjen käsittelyyn kuluvaa aikaa hidastaa latausaikaa.
Ongelman korjaamiseksi on parasta käyttää CDN: ää. CDN: n avulla voit kätevästi tallentaa tiedot välimuistiin eri palvelimille ja välttää pääpalvelimesi juuttumisen liian moniin pyyntöihin. Tämä tarkoittaa, että kun käyttäjä pyytää tiedostoa sivustoltasi, hänen selaimensa voi ladata sen lähinnä olevalta palvelimelta. Cloudflare ja MaxCDN ovat hyviä CDN-vaihtoehtoja, joita voit käyttää.
  • Optimoimaton CSS
CSS: llä on paljon tekemistä sivuston ulkoasun kanssa. Se antaa selaimelle ohjeet sivustosi fontin koosta, väristä, valikosta, otsikosta, alatunnisteesta ja muista verkkosivujen ulkonäön yksityiskohdista. CSS-tiedostot voivat olla hyvin pitkiä, ja niissä on niin monta koodiriviä. Tämä voi vähentää merkittävästi sivusi latausnopeutta.
Voit optimoida CSS: n yhdistämällä kaikki kuvat yhdeksi suureksi tiedostoksi Image Sprites -ohjelmalla. Toinen vinkki on pakata CSS-tiedosto uuteen, jossa on vähemmän tyhjiä tiloja. Voit tehdä tämän käyttämällä CSS-pienentäjiä, kuten CSS Nano. Tarkasta CSS-tiedostosi ja -koodisi ja päästä eroon tarpeettomista tiedostoista tai kaksoiskappaleista.
  • Siisti kotisivu
Jos verkkosivustosi latautuu hyvin hitaasti, se johtuu todennäköisesti siitä, että olet unohtanut kotisivullesi ja ehkä koko verkkosivustosi sivulle rakennetun sotkuisuuden määrän.

Monet web-kehittäjät täyttävät kotisivunsa erilaisilla upeilla kuvilla, widgeteillä ja sisällöllä yrittäessään saada vaikuttavan ensivaikutelman sivuston kävijöille. Vaikka houkutteleva etusivu on hyvä asia, yli laidan meneminen ja sen sekoittaminen erilaisella sisällöllä voi vaikuttaa negatiivisesti sivustosi latausaikaan.
Mitä enemmän elementtejä sinulla on kotisivulla, sitä enemmän aikaa kuluu lataamiseen. On aina parempi pitää se yksinkertaisena. Pidä kiinni perusasioista ja poista kaikki tarpeettomat elementit kotisivultasi, skannaa myös kaikki sivustosi sivut ja poista niistä sekaan, jotta sivustosi latautuu nopeammin.

  • Saastainen koodaus
Jos verkkosivustosi on täynnä ylimääräisiä tyhjiä välilyöntejä, upotetut tyylit tyhjentävät uusia rivejä ja tarpeettomia kommentteja, kyllä, koet hitaan verkkosivuston. Jokainen verkkosivusto on luotu paljon koodeja. Esimerkiksi Google on rakennettu 2 miljardiin koodiriviin. Jotkut web-kehittäjät tuottavat verkkosivustoja, joissa on liikaa koodirivejä, jotka eivät suorita mitään merkittäviä toimintoja. Nämä tiheät ja kattavat koodit voivat hidastaa verkkosivustosi latausnopeutta.

Ratkaisu tähän ongelmaan on poistaa kaikki tarpeettomat elementit koodeistasi, kuten ylimääräiset välilyönnit, tyhjät uudet rivit ja tarpeettomat kommentit. Koodien puhdistamiseen voi käyttää monia työkaluja. Mark-up on upea työkalu, jota voit käyttää tähän tarkoitukseen. Voit myös työskennellä kokeneen verkkokehittäjän, kuten Semalt varmistaa, että sivustosi on hyvin koodattu.

3. Päätelmä

Jokainen verkkosivusto on optimoitava mahdollisimman suurelle nopeudelle, mutta sitä ei voida tehdä ilman riittävää tietämystä verkkosivuston hitaasta lataamisesta johtuvista tekijöistä. Jos verkkosivustosi latautuu hyvin hitaasti, älä paniikkia. Käytä vain yllä lueteltuja tekijöitä ohjeena viivästymisen syyn ymmärtämiseen ja korjaa ne jokaisessa kohdassa mainittujen vinkkien avulla.