Gekissimo.net - Opi ansaitsemaan rahaa webilläsi Internetissä!

Kuinka nopeuttaa verkkosivustoasi helposti! – Hitaat verkkosivustot tappavat konversioita!!!

Seuraava artikkeli auttaa sinua: Kuinka nopeuttaa verkkosivustoasi helposti! – Hitaat verkkosivustot tappavat konversioita!!!

Nopeus on tappaja.

Kaiken suunnittelun, kopioinnin, testauksen ja strategiakeskustelun keskellä on helppo unohtaa, että on olemassa mutteri- ja pultiongelma, joka voi heikentää tai häiritä sivustosi suorituskykyä. Puhun latausnopeudesta.

Latausnopeudella on paljon enemmän merkitystä kuin uskotkaan.

Se on sijoitustekijä:

Tältä latausnopeuden vaikutus näyttää hakutulosten sijoittelussa:

(Lähde: https://ahrefs.com/blog/on-page-seo/)

Hitaampi paikka = alempi asento. Ihanteellinen latausnopeus on niin lähellä nollaa kuin voit saada: 10 parasta SERP:tä latautuu alle sekunnissa.

Ja sillä on paljon merkitystä myös vierailijoille.

“Maailmanlaajuisesti hitaita latausaikoja pidetään nykyaikaisten mobiilikäyttäjien suurimmana turhautumisena”, Episerve sanoi vuoden 2015 raportissaan. Ja mobiilikäyttäjät muodostavat nyt suurimman osan verkkoliikenteestä.

Vaikutus konversioihin on vieläkin rajumpi kuin SERP:n havaitsema, ja paljon jyrkempi:

(Lähde: https://www.soasta.com/blog/mobile-web-performance-monitoring-conversion-rate/)

Muunnosnopeus on huipussaan 2,4 sekunnissa; lisää kaksi sekuntia ja se puolittuu. Lisää sekunti ja se laskee 27%.

Miksi tämä on edelleen ongelma? Koska nopeampi laajakaista on levinnyt laajemmin kuin koskaan ennen ja älypuhelimet ovat nopeutuneet ja tehokkaammat, miksi verkkosivut eivät ole pysyneet perässä?

Pääasiassa siksi, että käytämme tätä ylimääräistä kaistanleveyttä sivustojen täyttämiseen temppuja, seurantaevästeitä ja suuria kuvia.

(Lähde: https://www.cachefly.com/category/faster-websites/)

Kuvat ovat suurin syyllinen, ja ne ovat lisääntyneet 3x vuodesta 2011, mutta myös käsikirjoitukset ovat tehneet suuren hypyn. Jos sinulla olisi puhdas HTML-sivusto, se olisi nyt samankokoinen kuin vuonna 2011, jolloin keskimääräiset internetnopeudet Yhdysvalloissa olivat 3X hitaammat.

Mutta sen sijaan sivun latausnopeus ei ole vain huono.

Se pahenee.

Verkkokaupan tehokkuus hidastuu keskimäärin 23 % vuodessa vuoden 2014 tietojen mukaan: verkkokauppasivustojen ensisijaisen sisällön hahmontamiseen kului sitten 6,5 sekuntia – lähes kaksi kertaa enemmän kuin latautuminen täyteen.

Keskimääräinen huippuluokan verkkosivusto latautuu nyt noin 9 sekunnissa.

(Lähde: http://www.seochat.com/c/a/google-optimization-help/average-page-load-time-of-top-ranking-websites-in-google/)

(Nämä ovat kokonaisia ​​sivustoja, eivät yksittäisiä sivuja.)

Keneen tämä vaikuttaa?

Kaikki. Välitön poistuminen on melko korkea kaikilla toimialoilla, samoin kuin epäonnistuminen toimien, joita haluamme käyttäjien tekevän, eli konversion puute.

(Lähde: https://conversionxl.com/guides/bounce-rate/seo-impact/)

Erityisesti verkkokauppasivustot kärsivät suuresta pomppimisesta ja ostoskorin hylkäämisestä.

(Lähde: https://www.barilliance.com/measure-cart-abandonment/)

Kärryjen hylkääminen on laskenut vuoden 2012 huipusta, lähes 72 prosentista – mutta vain 69,23 prosenttiin, mikä on melko pieni pudotus. Suurin osa verkkokauppasivustojen vierailijoista hylkää.

Se on suoraan verrannollinen latausaikaan.

(Lähde: https://bluestout.com/blog/how-to-reduce-mobile-ecommerce-bounce-rate/)

Entä pomppiminen?

Verkkokaupan poistumisprosentti korreloi myös latausnopeuteen. Tämän verkkokauppasivuston käyttäjien palautusprosentti oli keskimäärin 44 %. Jaa ne kuormitusnopeuden mukaan, ja ero on selvä:

(Lähde: https://www.linkedin.com/pulse/how-load-time-affects-bounce-rate-across-devices-report-jack-maden)

Muista, että nopeat kuormaajat määriteltiin tässä “alle 4 sekunnin ajaksi”! Pöytäkoneissa on 24 %:n hyppy nopean ja hitaan kuormituksen ryhmien välillä.

Sisältösivustot kärsivät suuresta pomppimisesta, mikä liittyy latausnopeuteen.

Samoin palveluiden liidien luontisivustot.

Loppujen lopuksi pomppimisen ja latausnopeuden välinen suhde näyttää enemmän tai vähemmän tältä eri toimialoilla:

(Lähde: http://www.ironpaper.com/webintel/articles/web-design-statistics-2017/)

Vaikuttaako sinuun hitaat kuormausnopeudet?

Mistä tiedät, vaikuttaako hidas latausnopeus verkkosivustoosi? Aloita tarkistamalla peruslatausnopeus. Voit käyttää Googlen PageSpeed ​​Insights -työkalua selvittääksesi, kuinka hyvin sivustosi toimii.

(Lähde: https://developers.google.com/speed/pagespeed/insights/)

Suorita URL-osoitteesi Googlen työkalun kautta, niin saat tietoja siitä, kuinka nopeasti sivustosi latautuu, ja neuvoja siitä, mitä elementtejä voitaisiin parantaa sen nopeuttamiseksi.

Huomaa, että tulos voi olla huomattavasti erilainen pöytätietokoneiden ja mobiililaitteiden välillä:

Mutta vaikka Googlen työkalu ei ole huono yhden luukun palvelupiste perusasioiden kattamiseen, konepellin alla tapahtuu paljon, mitä se ei näytä sinulle.

🔥 Empfohlen:  Kuinka tehdä rahaa notaarina

Tässä on viisi hienoa työkalua, joiden avulla voit sukeltaa syvälle sivustosi tapahtumiin.

GTmetrix

Tarjoaa luettelon sivustosi ongelmista tärkeysjärjestyksessä.

Voit siirtää palvelintasi nähdäksesi, miltä sivustosi näyttää eri puolilla maailmaa, ja saada sekä yleiskatsauksen että toimintakelpoisen luettelon arvosanalla A:sta F.

Mietitkö, mihin puutuisit ensin? Aloita tästä.

2. Pingdom

Pingdom antaa myös arvosanoja. Se tarjoaa myös vesiputousanalyysin, jotta näet tarkalleen, mitä tapahtuu.

Se ei kuitenkaan ole ilmainen, toisin kuin useimmat tämän luettelon työkalut.

3: Dotcom-näyttö

Tarjoaa vesiputousanalyysin ja erilaisia ​​palvelimia, joiden avulla näet, kuinka nämä kaksi ovat vuorovaikutuksessa.

Palvelimen siirtämisen sijaan Dotcom-monitor käyttää useita palvelimia samanaikaisesti.

4: Kuorman vaikutus

Load Impact tarjoaa selausskenaarioita ja analysoi myös sisältöäsi.

Se on ilmainen, mutta sinun on luotava tili, ja verrattuna muihin tämän luettelon työkaluihin se on paljon monimutkaisempi.

5: Verkkosivutesti

Säästin parhaan viimeiseen asti. Webpagetest on se, mitä käytän enimmäkseen.

Käyttöliittymä on huonolla tavalla 1996, mutta toiminnallisuus on nopea, helppokäyttöinen ja antaa juuri oikean määrän yksityiskohtia.

Vesiputoukset, sisällön erittely ja pari muuta työkalua antavat sinun siirtyä kohdasta “sivustoni on liian hidas” ja nähdä visuaalisesti, mitkä elementit vievät latausaikaa.

Yllätys, yllätys: se on kuvat ja javascript.

Joten olemme nähneet joukon erilaisia ​​kuormitusnopeusmittareita. Kysymys kuuluu, mitkä niistä ovat todella tärkeitä?

Tärkeät kuormitusnopeusmittarit ovat asiakkaasi kannalta todella tärkeitä:

  • Aika, jolloin sivu tulee näkyviin
  • Aika löytää haluamansa
  • Aika saada tehdä mitä haluavat

Tämä on yksi syy siihen, miksi verkkokauppasivustot ovat niin herkkiä latausnopeudelle. Joukko kuvia ja painikkeita, jotka latautuvat hitaasti, ja niissä on häiriöitä ja hyppyjä, on paljon turhauttavampaa kuin yksi, huonosti harkittu superjättikuva, jonka lataaminen kestää liian kauan. Ja ihmiset tulevat verkkokauppasivustoille tekemään haluamiaan päätöksiä – kaikki kolme yllä olevaa valintalistaa tapahtuvat kerralla.

Kuinka korjaamme hitaasti latautuvan sivuston?

Kuinka nopeuttaa hidasta verkkosivustoa

1: Minimoi HTTP-pyynnöt

Joka kerta kun tiedosto latautuu verkkosivustollesi, selaimelta lähetetään HTTP-pyyntö palvelimellesi. Kun kaksi tietokonetta puhuvat, asiat hidastuvat. Yahoo sanoo, että tämä voi vastata jopa 80 % latausajasta.

Jos haluat nähdä pyyntöraportin Websitespeedtestissä, siirry kohtaan Testitulos> Tiedot ja vieritä alas. se on kolmas raportti.

(Tämä on hyvin yksinkertaistettu selitys: jos haluat saada enemmän konepellin alle, katso tämä Yoast’s Jimmy Comackin viesti.)

Mitä enemmän sivun ulkopuolisia resursseja, jotka on tallennettu muualle verkkosivusi on latautuva, sitä enemmän HTTP-pyyntöjä sen on lähetettävä ja sitä hitaammin se latautuu.

Tämä pahenee, koska HTTP oli alun perin määritetty aloittamaan uusi pyyntö vasta, kun vanha oli valmis. Asioiden nopeuttamiseksi on nyt mahdollista tehdä asynkronisia pyyntöjä (kaikki tapahtuvat päällekkäin.) Se on nopeampi – mutta vaarana on, että sivusi latautuu sotkuisella ja hämmentävällä tavalla. Muista, että emme tavoittele abstrakteja kuormitusnopeusmittareita. Haluamme vierailijoiden orientoituvan ja toimivan nopeasti ilman pomppimista.

Kuinka voimme vähentää HTTP-pyyntöjen määrää? Vähensimme ladattavien resurssien määrää.

Aloita kuvilla. Päästä eroon kaikista kuvista, jotka eivät suoraan tee jotain hyödyllistä sivulla. Kuvien runsaus on hyvä asia, mutta jos ne ovat olemassa vain sen vuoksi, harkitse niiden poistamista.

Video on seuraavana. Jotkin sivustot, joilla on laaja video, voivat lisätä yhden tai kaksi sekuntia sivuston latausaikaan: se on koko aika, jonka useimmat ihmiset ovat valmiita odottamaan yhden omaisuuden hankkimiseen. Onko se todella sen arvoista?

🔥 Empfohlen:  Kuinka luoda CSS-haamupainikkeita

Javascript on kuvien jälkeen toiseksi suurin pyyntöjen syyllinen. Javascriptin tulee olla asynkroninen, mikä tarkoittaa, että sen pitäisi ladata samaan aikaan kaiken muun. Muussa tapauksessa, kun selaimesi saa Javascriptin, se lopettaa kaiken muun lataamisen sivustolla, kunnes se on ladannut JS:n. Tee siitä asynkroninen tai poista se kokonaan. Jos et voi tehdä kumpaakaan, laita se sivun alareunaan, jotta se latautuu viimeisenä.

Lopuksi CSS. Jokainen CSS-tiedosto on oma erillinen pyyntönsä. Mutta yksi CSS-tiedosto voi yleensä täyttää kaikki CSS-tarpeesi, joten yhdistä ne yhdeksi pyyntöjen määrän vähentämiseksi.

2: Ota pakkaus käyttöön

Suuret sivut latautuvat pitkään. Mutta ne on mahdollista pakata avoimen lähdekoodin Gzip-työkalulla.

Useimmat verkkopalvelimet voivat pakata tiedostot .zip-tiedostoiksi Gzipin avulla ennen niiden lähettämistä. Sinulla saattaa olla sama määrä tiedostoja ladattavana (jos et ole vielä päässyt vähentämään pyyntöjesi määrää), mutta sinulla ei ole samaa määrää tietoa, joten sivusi latautuvat nopeammin.

Yahoo sanoo, että Gzip voi lyhentää latausaikaasi 70 %.

Ota Gzip käyttöön pudottamalla tämä koodi .htaccess-tiedostoosi:

# pakkaa tekstiä, html, javascriptiä, css, xml:
AddOutputFilterByType DEFLATE teksti/pelkkä
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE-sovellus/javascript
AddOutputFilterByType DEFLATE application/x-javascript

# Tai pakkaa tietyt tiedostotyypit tunnisteella:

SetOutputFilter DEFLATE

3: Ota selaimen välimuisti käyttöön

Selaimen välimuistin avulla vierailija voi tallentaa version verkkosivustostasi selaimeensa. Kun he palaavat sivustollesi, heidän tarvitsee vain avata suurin osa sivustosi muodostavista tiedostoista, ei ladata niitä.

Kuulostaa hyvältä, eikö?

Tutustu Google Analyticsin yleiskatsaus -raporttiisi palaavien ja uusien vierailijoiden vertailuun.

Uusilla vierailijoilla on tyhjät välimuistit. Et voi nopeuttaa heidän käyttökokemustaan ​​sivustostasi selaimen välimuistilla. Mutta palaavat vierailijat ovat toinen tarina: voit vähentää suurimman osan sivuston latausajasta näille vierailijoille.

Jos sinulla on suuri osuus palaavista vierailijoista tai jos haluat saada sivustosi välimuistiin, tässä on hyvä resurssi.

4: Pienennä resursseja

Monet “verkkosivustojen rakentajat”, jotka eivät luota kaupan kehittäjien taitoihin – tai eivät ollenkaan – voivat luoda upeita verkkosivustoja. Mutta snoop konepellin alle, ja koodi ei näytä niin hyvältä. Paisunut ja huolimaton, tämä voi hidastaa sivustosi toimintaa.

Mitä tehdä?

Voit korjata koodin itse. Tarpeettomien rivinvaihtojen, sisennysten ja välilyöntien poistaminen koodista voi nopeuttaa sitä.

Mutta sen vähentäminen on vielä tehokkaampaa.

Tältä se näyttää:

(Lähde: https://www.wpmyweb.com/how-to/minify-html-css-javascript-autoptimize.html)

Tässä esimerkissä yksinkertainen HTML-osio on automaattisesti kutistettu pienimmäksi ja ohuimmiksi, ja se toimii edelleen. Prosessin aikana 11 % koodista on poistettu.

Pienennä tehokkaasti priorisoimalla: aloita koodista, joka aiheuttaa eniten ongelmia. Siirry Googlen PageSpeed ​​Insights -sivustolle ja testaa sivustosi URL-osoite. Mahdolliset optimoinnit -kohdassa näet vaihtoehdot CSS:n, HTML:n ja Javascriptin minimoimiseksi.

Pelkästään näiden CSS-elementtien vähentäminen voi säästää merkittäviä tietoja.

Voit käyttää työkaluja, kuten Minifycode.com, pienentääksesi koodia ja korvata loukkaavan koodin HTML-, CSS- tai Java-tiedostossasi pienennetyllä versiolla.

Jos käytät WordPressiä, siellä on Auto-optimize-laajennus, joka pienentää kaiken koodisi, vaikka se vaatiikin hieman käyttöönottoa.

5: Optimoi kuvat

Kuvat ovat eniten kaistanleveyttä imeviä elementtejä useimmilla verkkosivustoilla. Tyypillisiä virheitä ovat kuvien jättäminen kaistanleveyttä vaativiin muotoihin tai valtaviin kokoihin. Tarkista kuinka kauan näiden kuvien latautuminen kesti:

Purppurat viivat ovat kuvia. Suurin kesti 2,09 sekuntia. Iso ongelma.

Kolme asiaa, joihin sinun on keskityttävä kuvien optimoinnissa, ovat koko, muoto ja src-attribuutti.

🔥 Empfohlen:  Kuinka lisätä monikulmio MetaMaskiin vuonna 2023

Kuvan koko

Suuret kuvat imevät kaistanleveyttä. Jos sivusi on 500 pikseliä leveä, miksi kuvasi ovat 2 500 pikseliä leveitä?

Tämä ylimääräinen koko on tarpeeton taakka sivustosi latausaikaan.

Toki kuvan kokoa muutetaan sivustolla, kun se renderöidään – mutta koko massiivinen tiedosto ladataan myös joka kerta. Älä muuta kuvien kokoa: rajaa ne sivustosi maksimimittojen mukaisiksi kuvankäsittelytyökalulla.

(Jos sinulla ei ole Photoshopia, kokeile Pixlriä – selainpohjaista ja ilmaista.)

Kuvan muoto

Paras kuvamuoto on .jpg, .png toinen. (Kaikki selaimet eivät renderöi .png-kuvia.) BMP-, TIFF- ja GIF-tiedostot imevät kaistanleveyttä aivan hulluna.

src-attribuutti

Attribuutti src kertoo selaimelle, mistä kuvaa etsiä. HTML:ssä se näyttää tältä:

Sinulla ei ole tältä näyttäviä:

Tämä tarkoittaa, että kuvalle ei ole määritelty lähdettä. Kun näin tapahtuu, selain alkaa etsiä sitä lähettämällä pyyntöjä itse sivulle, mikä lisää sivun lataamisen tietotaakkaa – ja lisäksi kuvasi ei lataudu.

6: Optimoi CSS-toimitus

CSS kertoo selaimille, miltä jokaisen sivusi elementin pitäisi näyttää. Voit tehdä sen kahdella tavalla, ulkoisesti tai sisäisesti.

Ulkoinen CSS löytyy sivusi otsikosta, ja se näyttää tältä:

Kaikki sivusi hahmontamiseen tarvittavat tiedot (tässä tapauksessa Hubspotin sivu) ovat CSS-tyylitaulukossa.

Tämä on paljon parempi kuin tehdä se upotetulla CSS:llä, jossa pudotat CSS:n HTML-koodin väliin. Tyylitaulukon käyttö pienentää koodin kokoa, kun taas vain yhden tyylitaulukon käyttö vähentää pyyntöjen määrää ja siten lyhentää latausaikaa.

Selvittääksesi kuinka monta ulkoista CSS-arkkia sivusi käyttää, käytä työkalua, kuten Varvy’s CSS Delivery Tool tai GiftofSpeed.

GiftofSpeed ​​auttaa sinua optimoimaan CSS-toimituksen, mutta jos haluat tehdä sen itse, Varvylla on ohjeet.

Viimeinen ajatus:

Entä AMP?

AMP:n on tarkoitus tehdä kaikesta erittäin nopeaa. Ja tekee. Mutta se toimii pakottamalla sinut käyttämään poistettua CSS-, HTML- ja Java-versiota, jossa ei ole paljon valinnanvaraa. Se pakottaa sinut luottamaan Googlen sisällönjakeluverkostoon, joka on salamannopea, mutta joka muuttaa kaikki URL-osoitteesi Googlen omiin URL-osoitteisiin. Ja sinun on oltava melko hakkeroitu saadaksesi jopa yksinkertaisia ​​asioita, kuten lomakkeita, AMP-sivulle.

Jos julkaiset säännöllisesti uutisia, tämä voi olla hyvä valinta, ja jotkut ihmiset suosittelevat sen käyttöä aloitussivuille. Mutta tapa nopeuttaa ydinverkkosivustoasi, se on väärä työkalu työhön.

Johtopäätös

Verkkosivuston hidas latausnopeus voi murskata hakukoneoptimoinnin ja konversiosi. Ratkaisu löytyy verkkosivustosi peruskoodin leikkaamisesta ja siistimisestä, ja monet korjaukset eivät ole edes niin monimutkaisia. Kun sekunnin murto-osia voidaan mitata suuremmassa välittömässä nousussa, pienemmässä myynnissä ja liideissä ja jopa vaikuttaa SERP:iin, on järkevää käsitellä niitä nyt.

Jos jätin pois suosikkilatausnopeuskorjauksesi tai haluat lisätä jotain, ota yhteyttä kommenteissa!

Seuraavat kaksi välilehteä muuttavat sisältöä alla.

Nimeni on Jamie Spencer ja olen viettänyt viimeiset 10 vuotta rakentaen rahaa tienaavia blogeja. Väsyttyäni 9-5-päiviin, työmatkaan enkä koskaan nähnyt perhettäni, päätin, että haluan tehdä joitain muutoksia, ja julkaisin ensimmäisen blogini. Sen jälkeen olen julkaissut monia menestyneitä niche-blogeja ja myytyäni selviytymisblogini päätin opettaa muita ihmisiä tekemään samoin.