Aloittelijan opas verkkosivustotiedostojen optimointiin (70% nopeampi lataus)

Nopeuttaaksesi verkkosivustoasi ja säästääksesi kaistanleveyttä, pakkaus on yksi tehokkaimmista (ja helpoimmista) tavoista saavuttaa tämä.


… Mutta monet verkkosivustojen omistajat eivät edelleenkään optimoi tiedostojaan vuonna 2020 joko siksi, että he eivät tiedä kuinka tärkeätä se on tai he eivät tiedä miten.

Jotta pitkä tarina olisi lyhyt, yksi tärkeimmistä tavoista nopeuttaa sivusi latausnopeutta on saada JavaScript (JS) -tiedostot lataamaan nopeammin … Ja voit nopeuttaa JavaScriptiäsi käyttämällä GZIP-pakkausta.

Nyt tämä on ihanteellinen vain nykyaikaisille selaimille, mutta suurin osa Internetin käyttäjistä käyttää viimeisintä laitetta ja selainta. Sekä Yahoo että Google käyttävät GZIP-pakkausta.

Mutta ensin luodaan vähän konteksti.

Vaihe # 1: Mikä on sisältökoodaus?

Jotta pystyt optimoimaan verkkosivustosi tiedostot, on tärkeää ymmärtää nimitys, joka tunnetaan nimellä sisällön koodaus.

Yksinkertaisesti sanottuna, sitä käytetään asiakirjan pakkaamiseen ilman riskiä menettää taustalla oleva mediatyyppinen identiteetti. Selaimesi puhuu verkkopalvelimen kanssa, kun pyydät tiedostoa.

HTTP-pyyntö

Pohjimmiltaan selain kertoo palvelimelle mitä haluaa. Palvelin etsii sitä ja löytää sen. Selain lataa sen sitten. Mitä suurempi tiedosto, sitä kauemmin selain lataa sen.

Joten mitä teet, kun tiedosto on liian suuri?

Pakkaat sen. Kun lähetät ZIP-tiedoston selaimeen, säästät sekä latausaikaa että kaistanleveyttä.

Palvelimeen ja selaimeen liittyy kaksi elementtiä, koska tiedämme, että ZIP-tiedoston lähettäminen on hienoa:

  • Selain ilmoittaa palvelimelle, että on hienoa lähettää pakattu sisältö lähettämällä otsikko
  • Jos sisältö on pakattu, palvelin lähettää vastauksen

Jos tiedostoa ei pakata, palvelin ei lähetä sisältökoodausvastausotsikkoa. Hyväksy-koodausotsikko ei ole vaatimus, vaan vain selaimen esittämä pyyntö.

Selaimen on käsiteltävä tavallista raskasta versiota, jos palvelin ei lähetä pakattua sisältöä.

Palvelimen asennus

Sinulla ei ole hallintaa selaimesta. Se joko lähettää otsikon tai ei lähetä sitä. Voit kuitenkin määrittää käyttämäsi palvelimen varmistaaksesi vetoketjusisällön palauttamisen niin kauan kuin selain pystyy käsittelemään sitä. Tämä johtaa merkittäviin kaistanleveyden säästöihin.

web-suorituskyky pakkaamisen jälkeen

Ota tämä käyttöön yksinkertaisesti ottamalla IIS-pakkausasetukset käyttöön. Jos käytät Apachea, on suhteellisen yksinkertaista sallia tulostuksen pakkaus. Käytä vain .htaccess-tiedostoasi ja lisää oikea koodi.

Apache-sovelluksessa voidaan valita kaksi pakkausvaihtoehtoa:

  • mod_deflate on vakio, ja sen asettaminen on helpompaa
  • mod_gzip antaa sinun esipakata sisältöä ja se näyttää tehokkaammalta

helppo apache tyhjentää

Valitsemastasi vaihtoehdosta riippumatta Apache tarkistaa, onko selain lähettänyt otsikon hyväksyntäkoodausta varten, ja palauttaa sitten tiedoston sen normaaliversiona tai pakatun versiona.

Jos vanhempi selain aiheuttaa ongelmia, voit korjata sen lisäämällä tiettyjä erityisdirektiivejä.

Pakatun sisällön palauttamiseksi voit käyttää PHP: tä, jos et pysty muuttamaan .htaccess-tiedostoasi. PHP: ssä:

<?php if (substr_count ($ _ SERVER [‘HTTP_ACCEPT_ENCODING’], ‘gzip’)) ob_start (‘ob_gzhandler’); else ob_start (); ?>

Tiedoston gps-versio palautetaan, kun tarkistat hyväksyntäkoodausotsikon. Tämä muistuttaa web-palvelimen luomista itse. Pakkaa tulostasi, Apache helpottaa sitä.

Tärkeä huomautus: useimmat verkkosivustojen rakennusohjelmistot eivät salli kooditason muokkausta (joitain poikkeuksia lukuun ottamatta). Kanadan hosting-palveluksessa puolustamme voimakkaasti sivuston itsenäistä ylläpitoa, mutta ymmärrämme, että se ei ole kaikille. Kun käytät verkkosivustojen rakentajia, kuten Squarespace, Wix tai Weebly, tällainen palvelintason tasoitus on todennäköisesti ulottumattomissa.

Varmista pakkauksesi

On tärkeää varmistaa, että toimitat pakattua sisältöä palvelimen määrittämisen jälkeen. Voit selvittää, onko sivusi pakattu verkossa, käyttämällä online-GZIP-testiä.

Selaimessa kehittäjätyökalut voivat auttaa sinua tässä. Haluat siirtyä verkkovälilehdelle, päivittää sivun ja napsauttaa sitten tietyn sivun verkkolinjaa.

Jos sisältö lähetettiin pakatulla tavalla, näet ”content-encoding: GZIP” -otsikon.

google chrome gzip -otsikko

Saat lisätietoja napsauttamalla kuvaketta “käytä suuria rivejä”. Tämä tarjoaa myös tietoa todellisesta sisällön koosta ja pakatusta siirtokoosta.

Huomioitavat huomautukset

Pakkaus tarjoaa runsaasti etuja, mutta kaikessa on myös haittoja. Haluat olla tietoinen seuraavista:

  • Pakkaussuhteen kuvaajaSisältö, joka on jo pakattu: Suurin osa musiikista, videoista ja kuvista on jo pakattu. Jos yrität pakata niitä uudelleen, tämä on suurelta osin vain ajanhukkaa. Useimmissa tapauksissa sinun on huolehdittava vain CSS: n, HTML: n ja JavaScriptin pakkaamisesta.
  • Vanhemmat selaimet: Pakattu sisältö ei ole yhteensopiva kaikkien selainten kanssa. Tämä pätee erityisesti vanhempiin selaimiin. Voit esimerkiksi välttää HTTP-pakkaamista, jos sinun on työskenneltävä Windows 95: n tai Netscape 1.0: n kanssa. On joitain sääntöjä ja ohjeita, joilla vältetään pakkaaminen vanhemmille selaimille, joissa on Apache mod-deflate.
  • CPU-kuormitus: Säästä kaistanleveyttä ja käytä CPU-aikaa, kun pakkaat sisältöä lennossa. Kun otetaan huomioon pakkauksen nopeus, vaihtoa pidetään tyypillisesti oikeudenmukaisena. Pakattujen versioiden lähettämistä ja staattisen sisällön esipakkaamista varten on olemassa tapoja. Tämä vaatii yleensä lisää määrityksiä. Muista, että Internetin ihmisillä on lyhyt huomioväli, joten nopeuden lisääminen paremman käyttökokemuksen aikaansaamiseksi suorittimen jaksoilla on yleensä hyvä idea.

Miksi sinun pitäisi käyttää GZIP-pakkausta?

http-pakkauskonsoliGZIP-pakkaus tarjoaa runsaasti etuja. On tärkeää tietää, mitä nämä ovat, jotta tiedät täysin, miksi sinun pitäisi alkaa käyttää sitä.

Keskimäärin, GZIP: n käyttäminen CSS- ja HTML-tiedostojen pakkaamiseen säästää 50–70 prosenttia tiedoston kokonaisesta. Tämä huomattava tiedostokoon säästö johtaa paljon parempaan ja tehokkaampaan käyttökokemukseen verkkosivustollasi.

Tällä tekniikalla on myös tärkeä rooli verkkosivustosi yleisessä SEO-järjestelmässä. Hakukoneet käyttävät monimutkaisia ​​algoritmeja määrittääkseen mihin sivustoihin ja verkkosivuihin kuuluu hakutuloksia.

Yksi elementti, josta tulee tärkeämpi jokaisella algoritmin päivityksellä, on verkkosivun latausaika. Hakukoneet käyttävät näitä tietoja verkkosivuston yleisen optimoinnin määrittämiseen.

gzip-puristusnopeustestiKun verkkosivut latautuvat nopeasti, sivustoa käyvien ei tarvitse odottaa pääsevänsä etsimään sisältöön. Muista, että Internetin käyttäjillä on lyhyt huomioväli.

Jos verkkosivun lataaminen vie liian kauan, käyttäjä napsauttaa todennäköisesti pois ja löytää nopeamman sivuston, jolla on samanlaisia ​​tietoja. Hakukoneet haluavat palkita nopeammin ladattavat verkkosivustot, joten he antavat heille korkeamman hakutulossijoittelun.

Nopeampi verkkosivusto lisää myös tuloksia. Tämä tarkoittaa, että jos sinulla on verkkokauppasivusto, sitä nopeammin se latautuu, sitä suurempi on myynti. Itse asiassa noin 51 prosenttia amerikkalaisista sanoo, että tärkein syy, jonka vuoksi he luopuvat ostosta, on hidas verkkosivusto.

Tapaustutkimukset osoittavat, että voit parantaa tulosprosenttiasi yli 15 prosenttia vähentämällä verkkosivustosi latausaikaa vain 2,2 sekunnilla.

GZIP-pakkaamiseen liittyvien ongelmien vianetsintä

Kuten kaikki teknologiaelementit, GZIP-pakkaus voi epäonnistua pienimmistä syistä. Hyvä uutinen on, että suurin osa epäonnistumisen syistä on korjattavissa.

Ensimmäinen tutkittava asia on, tukeeko Web-isäntä GZIP-pakkausta. Vaikka suurin osa tukee sitä sen merkityksen vuoksi sivun lataamiselle, on muutamia, jotka eivät ole vaivautuneet varmistamaan yhteensopivuutta. Voit ottaa yhteyttä verkko-isäntäänsi selvittääksesi, onko GZIP-yhteensopivuus ongelma.

Seuraava tutkittava elementti on koodisi. Jopa yksi väärä merkki voi aiheuttaa ongelmia. Etsi kadonnut merkki, syntaksivirhe tai mikä tahansa virheellinen koodi. Kaikkien koodaustesi on toimittava arkkitehtuurisi kanssa, jotta pakkaus onnistuu.

Voit tarkistaa syöttämäsi koodisi PHP: llä tai .htaccess-tiedostolla (tästä keskusteltiin yllä). Jos et löydä ongelmaa, mutta uskot, että koodi on syyllinen, harkitse vain vaihtamalla se kokonaan toisella koodilla, joka todennäköisemmin toimii.

Joissain tapauksissa Web-isäntälläsi on pääsy oikeisiin tiedostoihin GZIP-pakkaamisen sallimiseksi, mutta et. Soita tällöin vain isäntällesi ja pyydä heitä ottamaan ne käyttöön.

Opit aiemmin tässä artikkelissa GZIP-pakkauksen tarkistamisesta. Tämä on nopea ja helppo vaihtoehto vianetsintään. Yleensä suositellaan, että teet tämän ensin. Jos jokin on edelleen vialla, tarkista verkko-isäntältäsi ja arvioi käyttämäsi koodi.

Jos selaimesi on vanhentunut, tämäkin voi aiheuttaa ongelmia GZIP-pakkaamisessa. Tämä on erityisen yleistä vanhoissa Internet Explorer -versioissa. Jos monet sivustosi vierailijat käyttävät vanhaa selainta, tämä on ongelma, joka saatat joutua ratkaisemaan.

Jos sivustosi tiedostot ovat erittäin suuria, tämäkin voi aiheuttaa ongelmia GZIP-pakkaamisessa. Jos käytät vanhaa GZIP-versiota, tiedostokoon rajoitukset voivat olla suhteellisen pienet, kuten kaksi gigatavua tai vähemmän. Tämän takia haluat selvittää, mitkä GZIP-version rajoitukset ovat.

Yksi parhaista tavoista parantaa verkkosivustosi suorituskykyä ja nopeutta mahdollistamalla pakkaaminen. Nyt kun osaat tehdä sen, voit alkaa hyödyntää kaikkia etuja.

Ole tietoinen varoituksista ja ota ne huomioon työskennellessäsi. Seuraava vaihe on asentaa se, jotta kävijät voivat hyötyä siitä.

Usein sivuutettu verkkosivuston nopeuskerroin liittyy valitsemasi web-hosting-yrityksen kanssa. Kyllä, sillä on valintasi ero, sillä jotkut toimivat yksinkertaisesti paremmin, kun ryhdyt tietojen puristamiseen.

Katso lisätietoja oppaastani verkkosivustosi nopeuden parantamiseksi.

Viitteet ja kuvapisteet:

  • BetterExplained.com
  • OpenSourceVarsity.com
  • Geekeasier.com
  • WebPerformance.com
Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me

About the author

Adblock
detector