Miten nopeuttaa sivustosi latausajat
Haluatko, että sivustosi latautuu nopeasti? Tämä artikkeli opettaa sinulle, miten verkkosivustoasi ladataan nopeammin kuin koskaan luulit mahdollista.
Jotta ymmärtäisit, miksi nopea verkkosivusto on tärkeä, tarkista nämä tilastot: keskimääräinen älypuhelimen käyttäjä jättää verkkosivuston, jos se ei lataudu kolmen sekunnin kuluessa; Google nyt pitää sivunopeutta tärkeänä näkökulmana hakukoneiden rankingissa; 75% internet-käyttäjistä sopi, että he eivät palaisi verkkosivustoon, jos se ei ladannut 4 sekunnissa.
Nopea verkkosivusto on erittäin tärkeä pysyäksesi elossa nykyaikaisessa web-suunnittelussa. Nyt ei enää ole tilaa hitaille verkkosivuille.
Sivuston latausaikojen ymmärtäminen
Verkkosivuston latausaika on suoraan korreloitu palvelimen kysyntään sivuston lataamiseksi. Mitä enemmän palvelimelle tehtyjä HTTP-pyyntöjä ja pidempiä elementtejä tehdään, sitä hitaammin verkkosivusto tulee olemaan.
Esimerkkejä HTTP-pyynnöistä ovat:
- ladataan CSS tyyliarkit;
- latauskoodit;
- kuvien lataaminen;
- lataa HTML.
Toinen tekijä, joka toistaa verkkosivujen latausaikana, on yksittäisten tiedostojen ja kuvien koko. Suuret, korkean resoluution kuvat saattavat kestää 10 kertaa niin kauan kuin tavalliset kuvat latautuvat, ja tarpeettoman suuret tiedostot voivat jyrkästi hidastaa sivun renderointia.
Tavoitteena tehdä verkkosivuilla nopeasti on tehdä sivustosta tehokkaampi. Voimme tehdä tämän tekemällä useita mukautuksia verkkosivujen koodaukseen, kuvia ja ulkoasuun.
Sivun nopeuden seuranta
Voimme seurata sivumme nopeuspisteitä läpi Googlen sivun nopeusnäkymät haku ja Yahoo YSlow . Googleilla on myös sivunopeusohjelma, joka toimii hyvin Firefoxin kanssa pyromaani on asennettu.
Näyte verkkosivusto
Otetaan verkkosivu, joka on kehitteillä ja käytä sitä esimerkkinä tästä opetusohjelmasta. Googlen ensimmäisen sivunopeuden pisteytys on 48 out of 100. Se toimii OS Commerce -alustalla.
Aloitusnopeuden pisteet: 48 out of 100
Vaihe 1: pakkaa kuvia
Vaihe yksi on pakata kaikki kuvat web-pohjaiseen laatuun. Voimme tehdä tämän käyttämällä Googlen Sivunopeus-laajennuksen sisäänrakennettua oletuskuvakompressoria. Tallenna kompressoitu versio tietokoneesi paikalliseen kansioon ja lataa kuva uudelleen pakkaamattoman kuvan sijasta.
Päivitetty pisteet: 61 out of 100
Vaihe 2: skaalautuvat kuvat
Kuvien puristamisen jälkeen meidän on sitten muokattava kuvia niin, että ne skaalataan oikein verkkosivustolle. Tämä välttää palvelinviiveen, joka tarvitaan koon muuttamiseen. Voit skaalata kuvia Photoshopissa sopeuttamalla ne samaan pikseliulottuvuuteen kuin ne näkyvät HTML-koodissasi.
Päivitetty pisteet: 72/100
Vaihe 3: käytä selaimen välimuistia
Selaimen välimuisti tallentaa välimuistiin tallennetut staattisten resurssien versiot. Tämä nopeuttaa sivunopeutta valtavasti ja vähentää palvelimen viivettä. Jos haluat välimuistitoiminnon käyttöön, haluat lisätä seuraavan koodin .htaccess-tiedostoosi:
# BEGIN Expire headersExpiresActive OnExpiresDefault "access plus 1 seconds"ExpiresByType image/jpeg "access plus 2592000 seconds"ExpiresByType image/png "access plus 2592000 seconds"ExpiresByType image/gif "access plus 2592000 seconds"ExpiresByType text/css "access plus 604800 seconds"ExpiresByType text/javascript "access plus 604800 seconds"ExpiresByType application/javascript "access plus 604800 seconds"ExpiresByType text/html "access plus 2592000 seconds"# END Expire headersPäivitetty pisteet: 78 out of 100
Vaihe 4: yhdistää kuvat CSS-spritteihin
Kuvat voidaan yhdistää CSS-spritteihin leikkaamaan tiettyyn sivulle ladattujen kuvien määrää. CSS-spritit ovat pohjimmiltaan yksi suuri kuva, joka koostuu useista pienistä kuvista. Yhdistämällä 5 kuvaa yhdeksi CSS-sprite on nopea tapa nopeuttaa verkkosivustoa sallii selaimen ladata yhden kuvan kuvien sijasta.
Helpoin tapa luoda CSS-spritsejä on käyttää Spriteme .
Muista tehdä oikeat muutokset CSS: ään, kun olet luonut kuvan sprite. Kiinnittäkää myös verkkosivuston asennusohjeita. Tätä ohjelmaa käytetään kirjautumalla selaimesi kautta.
Päivitetty pisteet: 82/100
Vaihe 5: lykätä JavaScriptin jäsentämistä
HTML-dokumentin yläosassa oleva Javascript voi estää sivun renderoinnin, mikä hidastaa sivua valtavasti. Javascriptin jäsentämisen lykkäämiseksi on parasta kutsua nämä skriptit HTML-dokumentin lopuksi pikemminkin kuin alussa.
Voit myös lykätä Javascriptin jäsentämistä käyttämällä defer attribuuttia. Viivästysominaisuutta käytetään HTML-koodissa lykätä javascriptin jäsentämistä, kunnes sivu ladataan. Esimerkiksi:
Päivitetty pisteet: 86 out of 100
Vaihe 6: minimoida HTML, CSS ja JavaScript
HTML, CSS ja JavaScript voidaan kaikki "minimoida" tai pakata nopeuttamaan niiden latausaikaa. Verkossa on useita resursseja, jotka minimoivat tällaisia tiedostoja, minifier on erinomainen esimerkki.
Päivitetty pisteet: 90 out of 100
Muut oikaisut ja näkökohdat
CDN n
Voit myös tarkastella staattisten resurssien lataamista verkkosivustollesi CDN- tai "Content Delivery Network" -palveluun. CDN on toinen tapa vähentää huomattavasti palvelimen viivettä tallentamalla staattisia resursseja nopean latauspalvelimen verkkoon. Merkittäviä CDN: n käyttäjiä ovat ESPN ja NBA.com.
JavaScript- ja CSS-tiedostojen yhdistäminen
Useiden JavaScript- ja CSS-tiedostojen lataaminen voi tukahduttaa sivuston latausaika. Mukautetut CMS-pohjaiset verkkosivustot, joissa käytetään laajennuksia ja teemakuvia, voivat usein sisältää 15 tai useampia JavaScript-tiedostoja ja yhtä monta Cascading-tyyppistä arkkia. Nämä komentosarjat ja tyyliarkit voidaan yhdistää yhdeksi suureksi tiedostoksi. Tehdä tämä nopeuttaa huomattavasti sivun latausaikaa ja tekee verkkosivustosi kävijöistä jännittävän sivustosi nopeilla latausaikoilla.
Mobile verkkosivujen kehittäminen
Kun kehität älypuhelinsovelluksia älypuhelinten käyttäjille, on tärkeää noudattaa Googlen verkkovastaavien ohjeita älypuhelinsovelluksissa. Vaikka mobiilisivustot ja sovellusten indeksointi ovat edelleen Googlen käynnissä, on tärkeää kiinnittää huomiota Googlen älypuhelinten kehittämistarpeisiin. Odottavat suuria muutoksia seuraavien viiden vuoden aikana siitä, miten Google indeksoi mobiilisivustoja ja mobiilisovelluksia. Älä yllätä, jos sivunopeus on tärkeä näkökohta Googlen mobiilisovellusten hakemistossa.
johtopäätös
Tehdimme useita muutoksia nopeuttamaan verkkosivustoamme, lähes puolitimme verkkosivujen latausaikasi! Tämä voi kirjaimellisesti olla eroja Google-sivun tai viidennen sivun ensimmäisen sivun sijoituksen välillä. Se voi myös olla eron 200 asiakkaan laskeutumisen ja 75% asiakkaidesi menettämisestä pysyvästi hidas sivukuormitusajankohdan vuoksi.
Nopea verkkosivusto on pakollinen menestykseen verkossa. Yleisesti ottaen kannattaa ylläpitää sivunopeuspistettä 80 tai enemmän kaikilla verkkosivujen sivuilla.
Kuinka kauan vietät verkkosivujen nopeuden parantamiseen? Mitä vinkkejä jaatko? Kerro meille kommentit.