3 tapaa ottaa GZip-pakkaus käyttöön WordPressissä (nopea verkkosivusto)

Ota WordPress gzip -pakkaus käyttöön

Yksi asioista, jotka sinun on tehtävä verkkosivustosi nopeuttamiseksi, on ottaa käyttöön WordPress Gzip -pakkaus. Se on ratkaiseva näkökohta, koska yksinkertaisesti sanottuna, jos haluat verkkosivusto Jotta kävijät olisivat nopeammat, kävijöillesi palveltavien sivujen koon on oltava pienempi.

Tällöin Enable Gzip Compression -varoitus näyttää GTMetrixiltä:

gtmetrix-varoitus

Pohjimmiltaan tämä on tämä:

se pyytää palvelinta pakkaamaan kaikki tiedostot ennen niiden lähettämistä käyttäjälle. Koska tiedostot ovat pienempiä, ne vievät paljon less toimitusaika käyttäjälle, mikä nopeuttaa käyttäjän kokemusta.

Tämä on melko korkea suositus Google Page Speed ​​Insights ja sitä ehdotetaan verkkosivustojen optimointisivustoille, kuten GTMetrix.

Sivunopeuden oivallusraportti ehdottaa tiedostojen pakkaamista

Tarkastellaan läpi koko prosessi, jolla tarkistetaan, onko Gzip-pakkaustoiminnon ottaminen käyttöön sivustollasi. Näytämme sitten 3 tapaa ottaa se käyttöön tai poistaa se käytöstä tarpeen mukaan. 

  1. Ota WordPress Gzip -pakkaus käyttöön .htaccess-tiedostojen kautta
  2. Sen käyttöönotto WordPress Gzip -pakkauslaajennuksen avulla
  3. Tiedostojen pakkaaminen verkkosivustoillesi isännöinnin CPanel-asetusten avulla.

Tarkista Ota GZip-pakkaus käyttöön

Ennen kuin menet todellakin tekemään muutoksia, haluat todennäköisesti tarkistaa, onko sivustosi Gzip-pakkausominaisuus käytössä jo WordPress-sivustollasi. 

On olemassa melko paljon muita sivustoja, jotka voivat tarkista, oletko ottanut sen käyttöön tällä työkalulla or HTTP-pakkaustesti.

Tee verkkosivustostasi nopeampi

Suorita sivustosi testin läpi.

Tarkista, että WordPress gzip -pakkaus on käytössä

Jos se on jo käytössä, sinun ei tarvitse tehdä mitään. Saat mukavan tuloksen, kuten alla, joka osoittaa, että verkkosivustosi. Jos ei, lue lisää.

 Onnistunut tulos

 

Voit myös tarkistaa GZIP-pakkauksen laajennuksella samoilta ihmisiltä, ​​jotka ovat luoneet työkalun yllä. Löydät laajennuksen tätä

Vaihtoehtoisesti, jos käytät Chrome-selainta, voit tarkistaa, onko GZIP-sisällön koodauksen otsikko sivustollasi.

Voit tarkistaa tämän Dev-työkaluilla valitsemalla Näytä> Kehittäjä> Kehittäjän työkalut ja siirtymällä Verkko-välilehdelle. Jos pääset ensimmäiseen pyyntöön ja vierität alas HTTP-otsikoihin, näet jotain alla olevaa, jos Ota Gzip-pakkaus käyttöön on jo käytössä.

Chrome-kehitystyökalut hyväksyvät koodauksen

Nyt kun olet määrittänyt, miten se tarkistetaan, näytämme sinulle useita tapoja ottaa se käyttöön.

Kuinka GZip-pakkaus otetaan käyttöön

Tiedostojen pakkaus on erittäin helppoa ottaa käyttöön verkkopalvelimesi sisäänrakennettujen ominaisuuksien avulla - tyypillisesti sinun on tiedettävä vain oikea syntakse, jotta toiminnot voidaan ottaa käyttöön.

Tätä varten on useita tapoja, joten näytämme sinulle muutaman ja voit valita haluamasi tai parhaiten sopivan. Muista ennen kuin teet mitään dramaattisia muutoksia, on suositeltavaa, että otat a täysi WordPress-varmuuskopio

300x250 Oranssi

1. Ota WordPress Gzip -pakkaus käyttöön .htaccessin kautta

Yksinkertainen tapa ottaa WordPress Gzip -pakkaus käyttöön asettamalla muutama direktiivi .htaccess-tiedostoon.

Olemme jo nähneet tapoja optimoida sivuston nopeus hyödyntämällä selaimen välimuistia .htaccess-tiedostosi kautta, joten jos olet tyytyväinen sotkemaan .htaccess-tiedostosi kanssa, tämä on menetelmä sinulle.

Varmista, että olet tehnyt varmuuskopion tästä tiedostosta, koska kaikki pienet virheet tässä tiedostossa hajottavat sivustosi ja tekevät sen heti alas. Tee kopio nykyisestä työversiostasi ennen muutosten tekemistä, jotta voit palata siihen, jos jokin menee pieleen, kun otit gzip-pakkauksen käyttöön.

Alla (ja useimmat vaihtoehdoista, joita aiomme käyttää) käytetään mod_deflate joka on moduuli, joka on tyypillisesti käytössä Apache-verkkopalvelimen ylläpitämissä verkkopalvelimissa.

Lisää seuraava .htaccess-tiedostoon isäntäpalvelimesi CPanel / File Manager -sovelluksen kautta

# Pakata tekstin, html, javascript, css, xml: AddOutputFilterByType tyhjetä text / plain AddOutputFilterByType tyhjetä text / html AddOutputFilterByType tyhjetä text / xml AddOutputFilterByType tyhjetä text / css AddOutputFilterByType tyhjetä text / javascript AddOutputFilterByType tyhjetä application / xml AddOutputFilterByType tyhjetä application / xhtml + xml AddOutputFilterByType tyhjetä sovellus / rSS + xml AddOutputFilterByType tyhjetä hakemus / JavaScript AddOutputFilterByType tyhjetä sovellus / x-JavaScript AddOutputFilterByType tyhjetä application / vnd.ms-fontobject AddOutputFilterByType tyhjetä sovellus / x-fontti AddOutputFilterByType tyhjetä sovellus / x-fontti-OpenType AddOutputFilterByType tyhjetä sovellus / x-fontti -otf AddOutputFilterByType DEFLATE-sovellus / x-font-truetype AddOutputFilterByType DEFLATE-sovellus / x-font-ttf AddOutputFilterByType DEFLATE-fontti / opentype AddOutputFilterByType DEFLATE font / otf AddFy ml AddOutputFilterByType DEFLATE image / x-icon AddType x-font / otf .otf AddType x-font / ttf .ttf AddType x-font / eot .eot AddType x-font / woff .woff AddType image / x-icon .ico AddType image / png .png

Kun olet ottanut yllä mainitun käyttöön, suorita sivustosi uudelleen yllä olevan testin avulla.

Tietenkin, jos haluat poistaa toiminnon käytöstä, pudota yllä olevat rivit htaccess-tiedostosta. Jos haluat pakata muita tiedostoja, sinun on lisättävä myös nämä tiedostotyypit samalla tavalla kuin yllä. 

NGINX ja IIS:

Syntaksi GZip-pakkauksen ottamiseksi käyttöön Nginxissä on hieman erilainen kuin tekemällä se Apachelle .htaccessin avulla. Sinun on lisättävä seuraava teksti nginx.conf-tiedostoosi, joka vastaa NGINX: n .htaccess-tiedostoa.

gzip päällä; gzip_disable "MSIE [1-6] \. (?!. * SV1)"; gzip_vary päällä; gzip_types text / plain text / css text / javascript image / svg + xml image / x-icon application / javascript application / x-javascript;

IIS: ssä eli Windows-koneilla toimivassa verkkopalvelimessa on parasta tehdä se IIS-käyttöliittymän kautta tämän Microsoftin oppaan avulla.

2. Pakkauksen ottaminen käyttöön WordPress GZip -laajennuksen avulla

Ottaen huomioon, että yrität tehdä verkkosivustostasi nopeamman ottamalla GZip-pakkauksen käyttöön, meillä on sinulle hyviä uutisia.

On yksi WP Rocket -laajennus - joka paitsi pakkaa tiedostot pienentämään tiedostoja, mutta tekee kymmeniä enemmän optimointeja verkkosivustosi nopeuttamiseksi. Muutamien asioiden joukossa, jotka se hoitaa sen hyvin:

  • Ota GZIP-pakkaus käyttöön (tietysti!)
  • Ota selaimen välimuisti käyttöön
  • Ota kuvan optimointi käyttöön (jotta kuviesi koko olisi pieni ja nopea)
  • Mahdollistaa laiskan lataamisen siten, että kuvat ja muut raskaat kuvat ladataan vain tarvittaessa (tarvittaessa)
  • Integroi CDN: n siten, että raskaita resursseja voidaan palvella tehokkaammin
  • Poistaa kaikki vanhat, kuolleet tai käyttämättömät laajennukset ja taulukot
  • Mahdollistaa tiedostojen ja tietokantojen välimuistin
  • ja paljon muita optimointeja

Vaikka käytössä oleva GZIP-pakkaus ei näy alla olevassa kuvakaappauksessa, se on oletusarvoisesti käytössä ja täysin läpinäkyvä WP Rocketissa. Tässä on joukko muita hallintapaneelin asetuksia, jotka löydät tältä työkalulta. 

WP Rocket

Laajennus ei ole ilmainen, mutta se on todella arvoinen investointi todellisuudessa, koska nopea verkkosivusto on hieno kokemus, ei vain sinulle, mutta varsinkin vierailijoille! Ennen kaikkea se otetaan käyttöön kirjaimellisesti muutamassa minuutissa ja muutamalla napsautuksella!

Mutta ennen kuin jatkat, meillä on nopea jaettava tarina. Muutama kuukausi sitten verkkosivustomme ei ollut niin nopea kuin halusimme sen olevan. Olimme lähettäneet uutta sisältöä hyvin usein, mutta sivusto oli hieman raskaalla puolella, joten lataaminen vie jonkin aikaa. Joskus lataaminen kestää 5-8 sekuntia tai enemmän.

Ja emme pystyneet saamaan sitä käymään nopeammin riippumatta siitä, mitä teimme.

Eräänä hienona päivänä törmäsimme WP Rocketiin. Olimme tuhlanneet niin paljon aikaa yrittääksemme tehdä sivustosta nopeasti, että purimme vain luodin ja saimme laajennuksen. BOOM - sivuston latausnopeus laskee alle 2 sekuntia!

(päivitys: Viimeisin Google-päivitys on lisännyt sivustollemme orgaanista liikennettä 30%: lla - uskomme, että suurin osa tästä on tullut nopeuden kasvusta, jonka sivustomme sai WP Rocketin ansiosta)

Käy WP Rocketissa

Etkö ole kiinnostunut tästä? Lue, on olemassa muita tapoja tehdä tietysti Gzip-pakkaus!

Jos haluat käyttää mahdollista tapaa less teknisesti voit käyttää WordPress Gzip -pakkauslaajennusta. Yksinkertaisesti sanottuna, sen sijaan, että joutuisit muuttamaan tiedostoja, jolloin saatat rikkoa sivustosi, jos teet virheen, laajennus helpottaa huomattavasti Gzip -pakkauksen käyttöönottoa.

Voit joko suorittaa Google-haun WordPress-pakkauslaajennus tai muuten mene yksinkertaiseen Gzip Ninja -nopeuspakkaus.

Kuten kaikkien WP-laajennusten kohdalla, tämä on melko yksinkertainen toimenpide laajennuksen asentamiseksi ja aktivoimiseksi. Kun olet tehnyt sen, sivustollasi pitäisi nyt olla WordPress Gzip -pakkaus käytössä

WordPress gzip -pakkauslaajennus 

3. Ota GZIP-sivun pakkaus käyttöön CPanelin kautta

Sen lisäksi, että otat GZip-sivun pakkaamisen käyttöön WordPress-tasolla, voit tehdä tämän palvelintasolla - jos mahdollista. Tämä tarkoittaa, että kaikki palvelimellasi isännöidyt verkkosivustot ovat nyt täysin gzip-käytössä. 

Menettelyn tarkat vaiheet ovat seuraavat:

  1. Kirjaudu verkkosivustosi isännöinnin CPaneliin
  2. Napsauta "Optimoi" -sivustokuvaketta
  3. Valitse Pakkaa kaikki sisältö -vaihtoehto
  4. Napsauta Päivitä asetukset
  5. Testaa puristus ja olet valmis!

Katsotaanpa koko menettely yksityiskohtaisemmin ja kuvakaappausten avulla.

Etsi Optimoi verkkosivusto -kuvake Cpanelista ja napsauta sitä.

Gzip-pakkauspalvelintaso - Optimoi verkkosivustokuvake Cpanelissa

Kun olet Optimize-verkkosivustolla CPanelissä, voit valita "Pakkaa kaikki sisällöt". Palvelinta pyydetään pakkaamaan gzip sisältö ennen lähettämistä vierailijalle. Tietysti, jos WP-sivustoasi isännöidään täällä, voit olla varma, että sisältösi on myös pakattu WordPress-gzip-tiedostoon.

Gzip pakkaa kaiken sisällön

GZip-pakkauksen poistaminen käytöstä

Tämän ominaisuuden poistaminen käytöstä on paljon kysymys edellä mainittujen muutosten peruuttamisesta. Joten voit joko poistaa kaikki lisäkoodit, jotka lisäsimme määritystiedostoihimme, poistaa laajennuksen käytöstä tai poistaa käytöstä Optimoi verkkosivusto -ominaisuus on meidän CPanel.

Sitten sinun on suoritettava testit uudelleen tarkistaaksesi, onko tiedostojen pakkaus poistettu käytöstä.

Miksi otamme tämän käyttöön?

Aivan kuten vähän taustatietoa, katsotaanpa, mitä tapahtuu kulissien takana, kun kävijä tulee verkkosivustollesi ja selain alkaa puhua verkkosivuston palvelimelle.

Oletetaan, että tulet www.collectiveray.com/index.ghtml- selaimesi aloittaa "keskustelun" verkkopalvelimen kanssa käyttäen HTTP-protokollaa, joka käyttää pyyntöjä ja vastauksia.

HTTP-pyyntö

  1. Käyttäjän selain: Hei, voinko SAA tiedosto /index.html
  2. Verkkopalvelin: Ok, anna minun nähdä, onko index.html käytettävissä ...
  3. Verkkopalvelin: Kyllä tässä se on (200 OK) Olen aloittamassa noin 50 kt: n tiedoston lähettämistä.
  4. Käyttäjän selain: 50 kt? Ok, odotan sitä ... odotan, odotan ... hieno, se on ladattu.

Kuten voitte kuvitella, tämä on yksinkertainen näkymä tapahtumista, mutta jos haluat, voit käyttää yllä kuvailemiamme Chrome Dev -työkaluja seuraamaan tarkalleen mitä tapahtuu.

Se toimii, ja saat tiedostosi. Tämä prosessi tapahtuu yhä uudelleen, kunnes saat kaikki tiedostot, jotka muodostavat pyytämäsi URL-osoitteen.

Mutta vaikka järjestelmä toimii, 50 kt: n tekstin lähettäminen ei ole kovin tehokasta. Muista, että tämä prosessi tapahtuu useita kertoja, todennäköisesti satoja kertoja jokaiselle vierailemallesi sivulle. Ja vaikka 50 kt ei ehkä kuulosta kovin paljon, kaikkien eri tiedostojen lähettämisen kumulatiivinen vaikutus alkaa muodostua. (Huomaa, että protokollat, kuten HTTP / 2, ovat parantaneet tätä prosessia merkittävästi)

Lataa luettelo 101 WordPress-temppusta, jonka jokaisen bloggaajan tulisi tietää

101 WordPress-temppua

Napsauta tätä ja lataa nyt

Totta puhuen, useimmat verkkosivuston HTML-tiedostot, CSS- ja JS-tiedostot ovat luonteeltaan tehottomia, koska ne ovat luettavissa ihmisille ja tehty kulutettaviksi sekä ihmisille että koneille - mutta ne eivät ole lainkaan laihoja tai tehokkaita raakana muodossa.

Joten mitä voimme tehdä tämän prosessin parantamiseksi? Vetoketju tietysti! Zip-pakkaus on lähinnä tiedoston koodausprosessi siten, että se tekee tekstistä lähettävän pienemmäksi menettämättä mitään sen sisältämää tietoa.

Ja lähettämällä pakattu versio tiedostoista, jotka meidän on lähetettävä, säästämme sekä kaistanleveyttä että latausaikaa. Selain purkaa tai purkaa tiedoston ja näyttää sen käyttäjälle, joka on onnellisempi, koska sivu latautuu nopeasti.

Katsotaanpa, miltä uusi verkkopalvelimen välinen keskustelu näyttää:

HTTP-pyyntö pakattu 

  1. Käyttäjän selain: Hei, voinko SAA tiedosto index.html? Käytän mielelläni pakattua versiota, jos sinulla on sellainen
  2. Verkkopalvelin: Okei, anna minun nähdä, onko index.html käytettävissä .... Lähetän sinulle sitten pakatun version!
  3. Verkkopalvelin: Kyllä tässä se on (200 OK) Pakkan tiedoston, jonka koko on noin 5 kt. Valmis, alkamassa lähettää sitä. 
  4. Käyttäjän selain: Hienoa! Se on vain 15 kt. Pienennän sen ja näytän sen käyttäjälle.

Kuten olemme huomauttaneet useita kertoja ja useita artikkeleita, pieniä sivuja, jotka latautuvat nopeasti = onnellisia käyttäjiä!

Kaava on yksinkertainen: Pienempi tiedosto = nopeampi lataus = onnellinen käyttäjä.

Koodauksen yksityiskohdat

Tärkeä osa käyttäjän selaimen ja palvelimen välistä keskustelua tai keskustelua on ymmärtää, että on hyvä toimittaa pakattu tiedosto. Sopimuksessa on kaksi osaa

  • selain lähettää otsikon joka osoittaa verkkopalvelimelle, että selain hyväksyy pakatun sisällön (gzip ja deflate ovat kaksi yleisesti saatavilla olevaa pakkausmenetelmää): Accept-Encoding: gzip, deflate

  • - verkkopalvelin lähettää vastauksen jos se lähettää pakattua sisältöä: Content-Encoding: gzip

Palvelin ei välttämättä lähetä sisältöä koodaavaa vastauksen otsikkoa, mikä tarkoittaa, että tiedostoa ei ole pakattu (tämä on oletusarvo useimmissa palvelimissa). Hyväksy-koodaus-otsikko on vain selain, joka pyytää, että se hyväksyy pakatut tiedostot, ei vaatimusta. Jos palvelin ei ole ottanut tätä ominaisuutta käyttöön tai ei halua lähettää pakattua sisältöä, selain käyttää tavallista pakkaamatonta versiota.

Usein kysytyt kysymykset

Mikä on pakkaus?

Gzip- tai Broltli-pakkaus on prosessi, jolla koodataan tiedostot, jotka lähetetään verkkopalvelimelta kävijän selaimeen siten, että se on pienempi (ja siten nopeampi) toimitettavaksi loppukäyttäjälle. Aika, joka palvelimella kestää tämän sisällön pakkaamiseen, ja selain purkaa tämän sisällön on yleensä paljon pienempi kuin pienemmän koon ansiosta saavutettu aika. Tämä johtuu siitä, että Internet-yhteyksillä on paljon suurempi viive (suorituskyky), sitten sisällön pakkaamiseen / purkamiseen tarvittava suorittimen aika.

Pitäisikö minun ottaa GZIP-pakkaus käyttöön?

Kyllä, ota GZip-pakkaus käyttöön verkkosivustollasi. Tämä vaatii hyvin vähän toimenpiteitä tai muutoksia, on erittäin helppo toteuttaa, sillä ei ole juurikaan vaikutusta verkkosivustosi sisältöön, mutta se tarjoaa valtavan suorituskyvyn päivityksen verkkosivustosi nopeuteen.

Kuinka otan GZIP-pakkauksen käyttöön CPanelissa?

Ota GZip-pakkaus käyttöön CPanelissa etsimällä "Optimoi verkkosivusto" -ominaisuutta ja ottamalla käyttöön "Pakkaa kaikki sisältö".

Kuinka testaan ​​GZip-pakkauksen?

Testaa GZip-pakkaus yksinkertaisesti käymällä jollakin tässä artikkelissa käydyistä verkkosivustoista. Nämä tarkistavat, onko GZip käytössä verkkosivustollasi vai ei.

Käärimistä 

Tämä oli vain yksi monista WordPress -vinkkeistä CollectiveRay.

Voit helposti saavuttaa uskomattomia säästöjä ottamalla WordPressin gzip-pakkauksen käyttöön, kuten näet, että saavutimme jopa 81%: n säästöt tiedostojen koossa. Tämä on hieno tapa tehdä verkkosivustostasi paljon nopeampi. Jos haluat siirtyä helpommin, tiedostojen ja koodien kanssa sekoittamisen sijaan suosittelemme valitsemaan laajennuksen, kuten WP Rocket.

Opi, kuinka WP Rocket tekee verkkosivustostasi nopeamman

kirjailijasta
David Attard
Kirjoittaja: David AttardVerkkosivu: https://www.linkedin.com/in/dattard/
David on työskennellyt verkko- / digitaalialalla tai sen ympäristössä viimeiset 18 vuotta. Hänellä on laaja kokemus ohjelmisto- ja verkkosuunnitteluteollisuudesta WordPressin, Joomlan ja niitä ympäröivien markkinarakojen käytöstä. Digitaalisena konsulttina hän keskittyy auttamaan yrityksiä saamaan kilpailuetua käyttämällä verkkosivustonsa ja tänään saatavilla olevien digitaalisten alustojen yhdistelmää.

Yksi asia vielä... Tiesitkö, että ihmiset, jotka jakavat hyödyllisiä juttuja, kuten tämä viesti, näyttävät myös mahtavilta? ;-)
Ole hyvä Jätä hyödyllinen kommentoi ajatuksiasi ja jaa tämä sitten Facebook-ryhmissäsi (ryhmissä), jotka pitävät tätä hyödyllisenä, ja hyödynnetään yhdessä. Kiitos jakamisesta ja mukavuudesta!

Disclosure: Tämä sivu voi sisältää linkkejä ulkoisille sivustoille tuotteille, joita rakastamme ja kannatamme sydämestämme. Jos ostat suosittelemiamme tuotteita, saatamme ansaita viittausmaksun. Tällaiset maksut eivät vaikuta suosituksiimme, emmekä hyväksy maksuja positiivisista arvosteluista.

Kirjoittaja (t) esillä:  Inc-lehden logo   Sitepoint-logo   CSS Tricks -logo    webdesignerdepot-logo   WPMU DEV -logo   ja paljon muuta ...