Kuinka vähentää HTTP / S-pyyntöjä WordPressissä

Kuinka vähentää HTTP / S-pyyntöjä WordPressissä

Tässä on tarina, jota rakastat, jos haluat nopeuttaa WordPress-sivustoasi.


Toisena päivänä rakensin kiiltävän verkkosivuston. Menin kaikki ulos ja lisäsin WooCommerce, Google Tag Manager, OneSignal, helpdesk, Yoast, suora radio (oi kyllä ​​minä tein), Cookie Notice, sosiaalisen median ja joukon muita laajennuksia.

Aivan kuten sinäkin, olin taipunut vaikuttamaan kävijöihini, tai ajattelin niin. Mutta sitten asiat tulivat sietämättömästi hitaiksi. Paljon ahdistuksen jälkeen ammusin GTMetrix tyhjentää asia.

Hämmästyttääkseni näin:

gtmetrix-nopeustestitulokset

Olin vaikuttunut? Helvetti NAW: lle! Halusin pisteyttää täydellisen A: n ja vähentää sivun latausajan alle kahteen sekuntiin.

Joten osuin uudelleentestauspainikkeeseen, mutta arvaa mitä? Silti sama surullinen tulos. Olin kauhistunut, jopa vihainen. Mutta en luopu helposti, koska sellaista asiaa ei voida hyväksyä.

Tiedätkö mitä tein seuraavaksi? Testasin verkkosivustoa Pingdom koska GTMetrix voi imeä sen. Mutta alla on jälleen synkkä tulos:

pingdom-työkalujen nopeustesti

Olin innostunut. Sananlaskelmainen piikki lihassani oli virheellisiä HTTP-pyyntöjä, koska pystyin korjaamaan monet muut ongelmat nopeasti.

Asioiden pahentamiseksi käytin verkkokaupan WordPress-teemaa, joka latasi miljardi elementit kotisivun rakentamiseen. Puolustuksessani se näytti uskomattomalta. Jotkut käyttäjät olivat yhtä mieltä siitä, että malli oli myös kohtalainen, joten ya, en langennut temppuun yksin ��

Mutta loistava visuaalinen suunnittelu ja hitaat nopeudet eivät kulje käsi kädessä. Tarvitsin nopean ratkaisun.

Kuinka voin vähentää HTTP-pyyntöjä WordPress-sivustolla?

Aina kun vierailet WordPress-verkkosivustossa, paljon tietoja siirtyy selaimesi ja verkkosivuston palvelimien välillä. Toisin sanoen WordPress tekee HTTP-pyyntöjä eri palvelimille rakentaaksesi sen, mitä käyttäjät näkevät lataamalla sivustosi.

Jos WordPress-sivustosi vaatii paljon elementtejä lataamista varten, sinulla on enemmän HTTP-pyyntöjä ja päinvastoin. Lisää HTTP-pyyntöjä tarkoittaa hidasta verkkosivustoa, heikkoa käyttökokemusta (UX), huonoja SEO-pisteitä ja alhaisia ​​muuntokursseja.

WordPress-sivustot ovat yleensä dynaamisia, mikä tarkoittaa, että verkkosivustosi tekeminen selaimeen vie paljon eri osia. Hyvä uutinen on, että voit vähentää HTTP-pyyntöjä ja nopeuttaa sivustosi huomattavasti.

Ja tämänpäiväisessä viestissä opit tarkalleen kuinka!

GTMetrixin ja Pingdomin raportit osoittavat yleensä, missä ongelma on. Testaa sivustosi molempien työkalujen avulla selvittääksesi alueet, joita sinun on parannettava. Kun raporttisi ovat valmiita, tässä on ohjeet vähentää HTTP / S-pyyntöjä ja nopeuttaa WordPress-sivustosi käyttöä.

Vaihe 1: Declutter

Kaverit, jos sinulla on paljon tavaraa WordPress-verkkosivustollasi, sinulla on liian monta HTTP-pyyntöä. Se ei ole brainer. Ensimmäinen askel HTTP-pyyntöjen vähentämisessä on purkaminen.

Tarkoitan tällä päästä eroon kaikista tarvikkeista, joita et tarvitse. WordPress-laajennuksissa on runsaasti tiedostoja, olivatpa ne sitten PHP, CSS tai JavaScript (JS). Jokainen tiedosto, jonka jokainen laajennus laukaisee, luo HTTP-pyynnön.

Jos sinulla on tonni laajennuksia, sinulla on ehdottomasti enemmän HTTP-pyyntöjä. Mitä vähemmän laajennuksia, sitä vähemmän pyyntöjä. Se on täysin yksinkertaista.

Mitä tehdä?

Suorita tarkistus plugineistasi. Mitä lisäosia sinun täytyy käyttää verkkosivustosi käyttämiseen? Onko olemassa laajennuksia, joita et tarvitse? Onko sinulla laajennuksia, jotka hyödyntävät kolmansien osapuolien palvelimia? Voitko tehdä ilman näitä laajennuksia?

Voit vähentää HTTP-pyyntöjä poistamalla kaikki tarvitsemasi laajennukset. Jos tarvitset laajennusta satunnaisesti, asenna se vain tarvittaessa. Poista sen jälkeen laajennus.

Sama koskee WordPress-teemoja ja sisältöä, jota et käytä. Puhdista kaikki tavarat pois. Poista kaikki tarvitsemasi; se on hyvä verkkosivustosi nopeudelle ja turvallisuudelle.

Voit kulkea ylimääräisen mailin ja ladata laajennuksia valikoivasti. Jos esimerkiksi tarvitset vain yhteyslomakkeen 7 lataamiseksi yhteystietosivulle, voit estää muiden laajennusten lataamisen kyseiselle sivulle..

Se olisi mahtavaa, etkö ole samaa mieltä? Ja ajatella tarvitset vain Asset CleanUp WordPress -laajennus.

WP Asset CleanUp WordPress -laajennus

Plugin on helppo käyttää ja melko tehokas. Tai kuten kehittäjä sanoo:

”Asset CleanUp” skannaa sivusi ja tunnistaa kaikki ladatut varat. Sinun tarvitsee vain muokata sivua / viestiä vain valita CSS / JS, joita ei tarvita lataamiseen, mikä vähentää paisumista.

Siivoa asennus jo pommi; päästä eroon roskapostista – kommentoi roskapostia. Ai niin, poista rikkoutuneet linkit ja optimoi tietokanta samalla myös siinä. Nämä ovat merkittäviä alueita, jotka on otettava huomioon sivuston nopeuden lisäämisessä, mutta pohdin.

Palataan takaisin HTTP-pyyntöjen vähentämiseen.

Vaihe 2: Optimoi kuvat

Verkkosivusto ilman kuvia on hyvin raju. He sanovat, että kuva puhuu tuhat sanaa, ja se on hienoa. Mutta jokainen kuva muodostaa HTTP-pyynnön. Suolan lisäämiseksi vammoihin kuvat ovat tärkeimmät elementit, joiden lataaminen vie kauan.

Emme voi silti sivuuttaa sitä tosiasiaa, että useimmat WordPress-teemat (luetut sivustot) tukeutuvat kuviin ja monia kuvia tässä suhteessa. Joten tämän perusteella miten voit vähentää HTTP-pyyntöjä optimoimalla kuviasi?

Ensinnäkin, päästä eroon kaikista käyttämättömistä kuvista. Ole armoton; päästä eroon kaikesta siitä paisumista – et tarvitse sitä. Tämän jälkeen pakkaa ja optimoi kuvat poistaaksesi tarpeettomat tiedostotiedot.

WP Compress -laajennus

Tiedot ja lataaNäytä esittely

Vaikka valittavissa on useita laajennuksia, pidämme todella WP Compressista. Vaikka se on premium-palvelu, tehokas kuvien automaattinen optimointi, häviöttömä pakkaaminen, pilvien käsittely prosessorikuormituksen vähentämiseksi, WebP-kuvantuki, automaattinen koon muuttaminen ja paljon muuta tekevät sijoituksesta sen arvoisen (katso lisätietoja tarkistuksesta). Lisäksi voit saada ilmoituksen 100 kuvalla ilmaiseksi – joten voit ainakin kokeilla sitä.

Kuvien optimointi ei vähennä HTTP-pyyntöjä sinänsä, mutta se pienentää kuvatiedostojesi kokoa, mikä tarkoittaa parempaa sivunopeutta rivillä.

Vaihtoehtoisesti voit vähentää HTTP-pyyntöjä hyödyntämällä CSS-kuva sprites. Aloittamattomalle sprite on kokoelma kuvia, jotka on laitettu yhteen kuvatiedostoon.

Sitten CSS-temppujen avulla voit valita, mitä kuvan osaa näytetään. Mutta kuinka tämä vähentää HTTP-pyyntöjä? Tässä on analogia.

Oletetaan, että tarvitsit viisi kuvaa etusivullesi. Voit ladata sivustosi WordPress-asennuksellasi viisi matkaa palvelimelle kuvien saamiseksi. Jos nyt laitat kaikki viisi kuvaa yhteen kuvatiedostoon (sprite), WordPress-asennus tekee vain yhden matkan.

Näetkö minne menen tämän kanssa? Mitä vähemmän matkoja, sitä vähemmän HTTP-pyyntöjä. Parasta on, että sinun ei tarvitse hikoilla luoda ja toteuttaa CSS-kuvan spritistejä. Voit käyttää työkalua, kuten CSS Sprite -generaattori. CSS-kuvajulkaisujen käyttöönotto on helppoa, jos tiedät tietäsi CSS: n ympärillä.

Pro-vinkki: Voit unohtaa kaiken CSS-kuvapisteistä, jos verkkosivustosi käyttää HTTP / 2: ta, joka tukee kuvien ja komentosarjojen asynkronista lataamista. GTMetrix ei ota HTTP / 2: ta huomioon suorituskykyä pistettäessä, joten älä huolestu, jos näyttää siltä, ​​että kuvasi tuottavat paljon HTTP-pyyntöjä.

Mutta sanon: Jos CSS-kuvapiirit voivat vähentää HTTP-pyyntöjä huomattavasti sivustollasi ja tiedät kuinka toteuttaa sama, käy se ja poista nämä ylimääräiset sekunnit sivun latausajasta. Onko sinulla HTTP / 2.

Loppujen lopuksi yksi kuvatiedosto vaatii yhden HTTP-pyynnön. Kymmenen erillistä kuvaa tarvitsee 10 HTTP-pyyntöä ja niin edelleen. Tiedän, että saat ajattelun.

Vaihe 3: Yhdistä ja pienennä HTML, CSS ja JavaScript

Suurin syy moniin HTTP-pyyntöihin WordPress-verkkosivustollani oli ulkoinen CSS- ja JavaScript-tiedosto. Jep, kilpailin 43 JS-skriptillä ja 22 CSS-tiedostolla. Se on mahtava 66 HTTP-pyyntöä.

Noin 130 HTTP-pyynnöstä ulkoisen CSS- ja JavaScript-pyynnön osuus oli noin 51% ongelmasta! Se on vain naurettavaa. Kiitos, GTMetrix, lyö nyrkkini.

Yhdistämällä ja pienentämällä näitä 44 JS- ja 22 CSS-tiedostoa voin vähentää HTTP-pyyntöjäni, verkkosivuston kokoa ja lataamiseen kuluvaa aikaa huomattavasti. Mutta mistä tässä liiketoiminnan “yhdistämisessä” ja “minimoimisessa” on kyse?

Mukaan Raelene Morey of Words by Birds (olen valtava fani ��), minimointi on prosessi, jolla “… poistetaan tarpeettomat merkit, kuten kommentit, muotoilu, välilyönti ja uudet rivit HTML-, CSS- ja JavaScript-tiedostoista, jotka eivät ole välttämättömiä suoritettava koodi. ”

Pienentäminen pienentää tiedoston kokoa poistamalla kaikki muut merkit ja jättämällä vain koodi. Mutta jos sinulla on yli 66 ulkoista skriptiä, minitointi ei tee paljon HTTP-pyyntöjen minimoimiseksi. Sitä varten sinun on yhdistettävä CSS- ja JavaScript-tiedostosi.

Jälleen Raelene sanoo:

Tiedostojen yhdistäminen on samalla kun se kuulostaa. Jos esimerkiksi verkkosivusi lataa viisi ulkoista CSS-tiedostoa ja 5 ulkoista JavaScript-tiedostoa, CSS: n ja JavaScriptin yhdistäminen yhdeksi erilliseksi tiedostoksi johtaisi vain 2 pyyntöön 10: n sijasta..

Ymmärrätkö? Toivon todellakin niin. Tiedostojen yhdistäminen vähentää HTTP-pyyntöjä. Minimointi puolestaan ​​pienentää tiedoston kokoa. Yhdistä nämä kaksi ja tappaa kaksi lintua samalla kivillä.

Onko liitännäisiä? Tottakai!

WP Rocket WordPress -välimuistin laajennus

Tiedot ja lataaNäytä esittely

Tiedostojen yhdistämiseen ja pienentämiseen on runsaasti WordPress-laajennuksia. Hyvä esimerkki on WP Rocket -laajennus. Se on pohjimmiltaan yksi parhaista välimuistin laajennuksista, joka tarjoaa ominaisuuksia tiedostojen yhdistämiseen ja pienentämiseen muutamalla napsautuksella.

Toinen suosittu (ja vapaa) -vaihtoehto on Autoptimize kytkeä.

Muuten, vaikka olisit siinä, vähennä ulkoisten CSS-tiedostojen ja JS-komentosarjojen lukumäärää? Esimerkiksi, emmekä mainitse nimeä täällä, tarvitsetko todella kolmannen osapuolen kommenttiympäristöä? Tarvitsetko suoraa radiolaajennusta?

Ei ole väliä mitä sanon, poista kaikki ulkoiset skriptit ja tiedostot, joita et tarvitse.

Vaihe 4: Säädä CSD- ja JavaScript-tiedostoja Renderöitä estävät

Joissain tapauksissa tiedostojen yhdistäminen ei ehkä ole vaihtoehto, etenkin kolmansien osapuolien tiedostojen ja skriptien yhteydessä, jotka muuttuvat usein. Tällaisissa tapauksissa voit lykätä tällaisen omaisuuden lataamista. HTTP / 2 tukee tiedostojen asynkronista lataamista, mikä tarkoittaa kaikkien tiedostojen lataamista samanaikaisesti.

Jos sinulla ei jostain syystä ole käynnissä asynkronista lataamista (ehkä et käytä HTTP / 2 tai skriptit eivät ole asynkronisia), nämä tiedostot voivat hidastaa verkkosivustoasi huomattavasti.

Muista, että verkkosivusi latautuvat ylhäältä alas. Jos sivusi yläosassa on renderointia estävät CSS ja JS, selain lopettaa lataamisen, kunnes tiedostot on ladattu kokonaan. Sinänsä käyttäjät näkevät tyhjän sivun, kunnes skriptit latautuvat, mikä vie aikaa.

Miten? Siirrä kaikki renderointia estävät skriptit verkkosivun ylhäältä alas. Mutta ole varovainen täällä; sinun ei tarvitse siirtää kaikkia komentosarjoja alaosaan. Sanon tämän, koska sivusi saattaa tarvita CSS: ää ja JS: ää tarjotakseen perusteellisesti houkuttelevan kokemuksen.

Jos lykkäät joitain CSS- tai JavaScript-tiedostoja, käyttäjät saattavat nähdä verkkosivustosi vääristyneen version, kunnes sivu latautuu kokonaan, mikä on juuri päinvastainen kuin haluat saavuttaa.

Joten, lykätä vain skriptejä, joita ei tarvita sivun lataamiseen. Tällä tavalla käyttäjät eivät odota ikäsi sivusi lataamista. Miksi? Koska viestin toimittamiseen tarvitaan vähemmän HTTP-pyyntöjä.

Se ei vähennä HTTP-pyyntöjä sinänsä (koska kaikki skriptit ja tiedostot latautuvat lopulta), mutta se vähentää sivusi tekemiseen tarvittavien HTTP-pyyntöjen määrää.

Se on hyvin kuin laiskojen kuvien lataaminen; kuva ladataan vain, kun se on näkymässä, ei sivun loput (ja tärkeimmät osat) latautuessa.

Muuten, renderointia estävän CSS: n ja JS: n korjaus saattaa paljastaa tiedostot ja skriptit, joita sinun ei tarvitse rakentaa verkkosivulle.

Esimerkiksi, jos jonkin ulkoisen sosiaalisen jakamisen JS-skriptin lataus vie kauan, voit lykätä sitä. Lisäksi voit poistaa sen ja rakentaa sosiaalisen jakamisen teemaasi.

Voit poistaa HTTP-pyynnöt ja nopeuttaa sivustosi säilyttäen saman toiminnallisuuden. Ymmärrän, että ominaisuuksien koodaaminen teemaasi on pitkä tilaus useimmille aloittelijoille, joten kysy kokeneelta WP-käyttäjältä tai kehittäjältä.

Vaihtoehtoisesti voit käyttää WP Rocket -laajennusta renderöintiestojen parantamiseen, mutta ole varovainen. Lue heidän dokumentaatio, koska jos sekaisin asioita, voit rikkoa verkkosivustosi helposti.

Onko tarjolla ilmaisia ​​vaihtoehtoja? Tietysti! Työskentelemme WordPressin kanssa, muistatko? Voit käyttää Async JavaScript, muiden liitännäisten joukossa.

Vaihe 5: Käytä välimuisti & CDN

Tiesitkö välimuisti ja CDN-tiedostot vähentää HTTP-pyyntöjäsi? Se ei aluksi tunnu tosiasialta, mutta kun mietit, mitä kulissien takana tapahtuu, voit käyttää välimuistia ja CDN: ää eduksesi.

Välimuisti sisältää staattisten tiedostojen tallentamisen selaimeen, jotta käyttäjät eivät lataa tiedostoja seuraavissa käynteissä. Oletetaan, että sinulla on välimuistin laajennus, ja käyttäjä lataa välimuistissa olevan sisällön ensimmäisellä vierailullaan.

Seuraavissa käynteissä sivustosi ei tee pyyntöjä palvelimelle. Sen sijaan se palvelee välimuistissa olevia resursseja selaimesta, vähentää HTTP-pyyntöjä ja parantaa sivustosi nopeutta.

CDN (tai Content Delivery Network) on ympäri maailmaa sijaitsevien palvelimien verkko. CDN käyttää myös välimuistia, mutta entistä nopeammin CDN-palveluntarjoaja palvelee sinua välimuistissa sisältöä palvelimelta, joka on lähinnä vierailijaa.

Lyhyemmät etäisyydet tarkoittavat sisällön nopeampaa toimittamista, ja välimuistin tallentaminen tarkoittaa, että verkkosivustosi ei tarvitse ladata samaa sisältöä keskuspalvelimelta uudestaan. Onko sillä järkeä?

Cloudflare CDN -laajennus

Ja mikä parasta, on olemassa useita ilmaisia ​​CDN-vaihtoehtoja (tai ainakin ilmaisia ​​kokeiluversioita, jotta voit nähdä aivan kirjaimellisesti sen eron). WPExplorerissa käytämme ja suosittelemme erittäin hyvin CLoudflare-ohjelmaa, mutta valitse CDN, jonka mielestäsi toimit parhaiten sinulle.

Bonus: Varmista, että HTTP / 2: ta tuetaan

Saatat tehdä kaiken vähentääksesi HTTP-pyyntöjä, mutta Web-isäntäsi voi aiheuttaa häiriöitä. Älä ole yllättynyt; kysyä ja ajatella, kuka käyttää tässä ajassa ja iässä muuta kuin HTTP / 2?

Et todennäköisesti tiedä edes mitä HTTP / 2 on kyse. Ensinnäkin HTTP / 2 tukee muun muassa tiedostojen asynkronista lataamista. Sillä on muita etuja verrattuna HTTP 1.0: een, mutta se on oppitunti toiselle päivälle.

Jos käytät HTTP 1.0 tai uudempaa, huomaat huomattavan määrän HTTP-pyyntöjä.

Älä arvioi nopeasti; Olen nähnyt web-palveluntarjoajia, jotka käyttävät edelleen HTTP 1.0: ta ja vanhempia PHP-versioita. Kyllä, edes HTTP / 2: n ja PHP 7: n näennäisillä eduilla. En edes bluffaa; Jotkut heidän asiakkaistaan ​​tulevat luokseni, kun jotkut heidän laajennuksista eivät toimi, ja se on ärsyttävää!

Mutta todella, miksi? Se, että jotkut web-palveluntarjoajat eivät häiritse sitä, että PHP 5.6 on vanhentunut ja että sillä on tietoturva-aukkoja, on vain jotain muuta. Ja jos he eivät tue HTTP / 2: ta, se on kauppa rikkoa sinua todella.

KeyCDN HTTP / 2 -testi

Ota yhteyttä isäntään tai käytä KeyCDN: n työkalu tarkistaaksesi tukeeko palvelimesi HTTP / 2. Paras verkkoisäntä tukee HTTP / 2: ta ja PHP: n uusinta versiota. Jos isäntäsi on molemmissa tapauksissa jäljessä, pyydä heitä päivittämään tai valitsemaan parempi verkkoisäntä.

Viimeiset sanat

HTTP-pyyntöjen vähentäminen WordPress-sivustossasi tarkoittaa sellaisten asioiden poistamista, joita et tarvitse. Jos sinulla on paljon tavaraa WordPress-verkkosivustollasi, sinulla on paljon HTTP-pyyntöjä ja suhteellisen hidas sivunopeus.

Voit vähentää HTTP-pyyntöjä poistamalla sivustosi hakutoiminnot, optimoimalla kuvat, korjaamalla renderointia estävät skriptit, käyttämällä välimuistia ja varmistamalla, että isäntä tukee HTTP / 2: ta. Muuta kuin yritä luoda yksinkertaisia ​​ja puhtaita verkkosivustoja, joiden lataaminen ei vaadi tonnia omaisuutta.

Jos sinulla on kysyttävää, ota meihin yhteyttä alla olevassa kommenttiosassa. Kippis nopeampiin verkkosivustoihin ja upea tulevaisuus eteenpäin!

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map