...
✅ WEB- ja WordPress -uutiset, -teemat, -laajennukset. Täällä jaamme vinkkejä ja parhaita verkkosivustoratkaisuja.

Kuinka optimoida WordPress-sivustosi WP Rocketilla

12

Muistatko Space Jamin?

Disney on itse asiassa pitänyt alkuperäistä Space Jam -verkkosivustoa verkossa vuodesta 1996 lähtien.

Katso:

Kuinka optimoida WordPress-sivustosi WP Rocketilla

Ällöttävä!

Tällaiset verkkosivustot tehtiin aiemmin kokonaan HTML:llä ja muutamalla kuvalla. Kuten voit kertoa, verkkosivustot ovat nyt maailman kaukana siitä.

Mikä on ongelma?

Usein, kun vierailen jollakin teemakäyttäjäni verkkosivustolla, näen, että jokaiselle sivulle ladataan yli 100 tiedostoa. Sitä vastoin Space Jam -verkkosivusto lataa vain 7 tiedostoa ja tämä sivusto on tehty menestysfilmiä varten!

Joten mitä täällä tapahtuu?

No, nykyaikaiset verkkosivustot lataavat CSS-tiedostoja muotoilua varten, niillä on Javascript-tiedostoja käyttäjän vuorovaikutuksen ja analytiikan skriptien lisäämiseksi, ja niillä on yleensä paljon enemmän kuvia.

Ja tiedätkö mikä pahentaa sitä? Plugins.

Sinulla voi olla viisi laajennusta, joista jokainen lataa omat tyylisivunsa. Tämä tarkoittaa viittä ylimääräistä CSS-tiedostoa, jotka lähetetään jokaiselle sivustollesi saapuvalle vierailijalle.

En sano, että laajennukset ovat huonoja, mutta WordPress-sivustot lataavat yleensä paljon tiedostoja, koska jokainen laajennus lataa tiedostoja muista riippumatta.

WordPress tai ei, on epärealistista luoda nykyaikainen sivusto, joka lataa vain seitsemän tiedostoa, mutta jos optimoimme sivustomme oikein, voimme tehdä paljon paremmin kuin 100 tiedostoa.

Mikä on ratkaisu?

WP Rocket voi auttaa ratkaisemaan näitä ongelmia erittäin tehokkaasti, ja se on osa suorituskyvyn optimointia täällä Compete Themesissa.

Aion kattaa kolme aluetta, joilla näet suurimman suorituskyvyn tämän laajennuksen avulla. Jaan myös kuvakaappauksia kaikista valikoista postauksen lopussa, jotta voit tarkistaa kaikki käytettävissä olevat asetukset.

Aloitetaan tärkeimmästä ominaisuudesta, välimuistista.

Päivitys: Tein vaiheittaisen video-opetusohjelman, joka opastaa sinua WP Rocketin määrittämisessä verkkosivustollasi.

Tilaa Compete Themes Youtubessa

1 Välimuisti

Kun olet ladannut ja asentanut WP Rocketin, pääset sen kauniiseen kojelautaan, jossa voit aloittaa optimoinnin.

Kuinka optimoida WordPress-sivustosi WP Rocketilla

WP Rocket ottaa välimuistin käyttöön heti, kun aktivoit sen. Voit kirjaimellisesti aktivoida laajennuksen ja kirjautua ulos sivustostasi ikuisesti, ja se latautuisi silti nopeammin.

Miten välimuisti auttaa?

On vaikea arvostaa automaattista välimuistia, jos et ole varma, miten se vaikuttaa sivustoosi.

Ajattele välimuistiin tallentamista näin:

Kuvittele, että tarvitset asiakirjan, jotta löydät sen arkistokaapistasi ja palautat sen kaappiin, kun olet valmis. Seuraavan kerran, kun tarvitset asiakirjan, sinun on haettava se uudelleen arkistokaapista.

Välimuistiin tallentaminen on kuin säilyttäisit asiakirjan työpöydällä, kun löydät sen, jotta voit käyttää sitä välittömästi uudelleen. Aivan kuten asiakirjan hakeminen työpöydältäsi on nopeampaa kuin sen saaminen tiedostokaapista, välimuisti estää tarpeettomat matkat tietokantaan.

Asia on siinä, että riippumatta siitä, kuinka monta tiedostoa sivustosi lataa tai kuinka suuria ne ovat, ne kaikki latautuvat paljon nopeammin, kun välimuisti on käytössä.

Määritä välimuisti

Kuten mainittiin, sinun ei tarvitse muuttaa asetuksia saadaksesi välimuistin toimimaan. Voit kuitenkin haluta tehdä muutamia muutoksia välimuistin perusasetusvalikossa.

Kuinka optimoida WordPress-sivustosi WP Rocketilla

Klikkaa nähdäksesi täysikokoisen kuvan

Asetukset tässä ovat lähinnä säätämällä välimuistia toimimaan parhaiten sivustollesi. Jos sinulla on esimerkiksi täysin erilainen mobiilisuunnittelu kuin WPTouchin kaltaisen laajennuksen käyttäminen, WP Rocket voi tallentaa nämä tiedostot välimuistiin erikseen.

Voit myös käyttää välimuistia sisäänkirjautuneille vierailijoille, jos sinulla on jäsensivusto, ja ottaa käyttöön SSL-välimuistin (tarvitaan, jos sivustosi käyttää https://).

Jälleen kerran, täällä ei todellakaan ole paljon tekemistä laajennuksen aktivoimisen lisäksi.

2 Tiedoston optimointi

Tiedostojen optimointiosiossa voit vähentää sivustosi lataamien tiedostojen määrää ja tiedostojen kokoa.

Kuinka optimoida WordPress-sivustosi WP Rocketilla

Klikkaa nähdäksesi täysikokoisen kuvan

Perus asetukset

Ensimmäisen vaihtoehdon avulla voit "pienentää" sivustosi HTML-koodia, joten mitä se tarkoittaa?

Pienennys

Kehittäjät kirjoittavat koodin, jossa on paljon välilyöntejä, muotoilua ja kommentteja, jotta se on helppo lukea. Kun lataamme nämä tiedostot sivustoillemme, niiden ei tarvitse olla helppolukuisia. Pienennys poistaa kaiken merkkien välisen tilan ja poistaa myös kaiken kommenttitekstin. Tämä itse asiassa pienentää tiedoston kokoa, joten se latautuu nopeammin.

Jos tarkastelet minkä tahansa sivun lähdekoodia täällä Compete Themes -sivustolla, näet kuinka WP Rocketin minimointi on vaikuttanut HTML:ään:

Kuinka optimoida WordPress-sivustosi WP Rocketilla

Pienentäminen on mahtavaa, koska saat nopean ja helpon suorituskyvyn parannuksen, ja sillä on harvoin vaikutusta sivustosi toimintaan.

Oletko valmis oppimaan seuraavan tekniikan termi?

Yhdistäminen

Toinen hieno ominaisuus perusasetuksissa on mahdollisuus yhdistää Google Fonts -tiedostoja. Useimmat WordPress-teemat käyttävät Google-fontteja, joten todennäköisesti lataat yhden tai kaksi kirjasinta sieltä. Tätä tiedostojen yhdistämisprosessia kutsutaan "ketjuttamiseksi".

Yleensä on nopeampaa ladata yksi tiedosto kahden sijaan, koska olet vähentänyt HTTP-pyyntöjen määrää, eikä meidän tarvitse tehdä sen teknisempiä ?

Tarkastelun vuoksi pienentäminen pienentää tiedostojen kokoa ja ketjutus yhdistää ne. Pienemmillä tiedostoilla verkkosivustosi latautuu nopeammin. Nämä kaksi prosessia ovat mahtavia suorituskyvyn suhteen, eikä mikään laajennus käsittele niitä paremmin kuin WP Rocket.

CSS-tiedostot

Muistatko esimerkkini viidestä laajennuksesta, jotka kukin lataavat oman tyylisivunsa? Näin korjaat sen.

Kuinka optimoida WordPress-sivustosi WP Rocketilla

Voit pienentää kaikki CSS-tiedostot, mikä parantaa suorituskykyä ja ottaa sitten käyttöön yhdistämisvaihtoehdon ketjuttaaksesi ne mahdollisimman harvoiksi tiedostoiksi. Vaikka sivustossasi voi päätyä näyttöongelmiin tätä vaihtoehtoa käytettäessä, se ei yleensä ole ongelma.

Optimointi CSS Toimitus voi myös auttaa sivustosi kuormitus visuaalisesti nopeammin kuin ilman sitä.

JavaScript-tiedostot

Täsmälleen samat pienennys- ja ketjutusvaihtoehdot ovat saatavilla myös Javascript-tiedostoille.

Kuinka optimoida WordPress-sivustosi WP Rocketilla

En halua pelotella sinua, mutta nämä vaihtoehdot voivat joskus rikkoa osia sivustostasi (käyttöliittymässä, ei hallintapaneelissasi). Tärkeää on, että kokeilet näitä asetuksia ja jos jokin lakkaa toimimasta, voit yksinkertaisesti sammuttaa ne. Kaikki on käännettävää.

Optimoi ilman virheitä

JS-tiedostojen pienentäminen ei yleensä ole ongelma, mutta kun yhdistät ne, saatat joskus rikkoa sivustosi toimintoja. Tässä on mitä tehdä…

Aktivoi pienennys- ja ketjutusvaihtoehdot ja tyhjennä sitten sivustosi välimuisti WP Rocketin avulla. Vieraile sitten sivustollasi ja tee kaikki. Kokeile sosiaalisen median jakamispainikkeita, vieraile viesteissä ja sivuilla, testaa mobiilivalikkoa jne. Jos kaikki toimii hyvin, voit aloittaa.

On myös mahdollisuus "lykätä" Javascript-tiedostoja. Näin sivustosi näkyy visuaalisesti näytöllä ennen kuin Javascript-tiedostot latautuvat. Jos otat tämän vaihtoehdon käyttöön, muista testata kaikkia sivustosi ominaisuuksia uudelleen tarkistaaksesi virheet.

Lopuksi Javascript-tiedostojen lykkääminen mahdollistaa jQueryn vikasietotilan. Sen valinnan poistaminen parantaa suorituskykyä, mutta voin melkein taata, että se rikkoo jotain, joten suosittelen pitämään sen valittuna.

WP Rocketilla on muutamia siistejä vaihtoehtoja median optimoimiseksi sivustollasi, mukaan lukien laiska lataus, joka voi olla erittäin tehokas.

Kuinka optimoida WordPress-sivustosi WP Rocketilla

Klikkaa nähdäksesi täysikokoisen kuvan

Mitä on laiska lataus?

Kuvittele, että sinulla on blogi ja kotisivulla on 10 viestiä, joista jokaisessa on kuva. Kun vierailija saapuu, vain ensimmäinen viesti näkyy näytöllä. Tässä on kysymys:

Miksi ladata kaikki 10 viestikuvaa, jos vierailija näkee vain yhden? Lisäksi miksi lataat kaikki kymmenen, kun useimmat vierailijat saattavat vierittää tiensä vain kolmanteen tai neljänteen viestiin ennen kuin napsauttavat yhtä?

Kun laiska lataus on käytössä, WP Rocket seuraa kuinka pitkälle sivua vierailijat ovat vierineet, eikä se lataa kuvia ennen kuin vierailijat ovat lähellä niitä.

Kuvien laiska lataaminen WordPressissä (vain 1 vaihe)

Etuna on, että sivustosi latautuu välittömästi nopeammin, koska lataat niin paljon vähemmän kuvia. Tämä vähentää myös sivustosi käyttämää kaistanleveyttä.

Videot ja iframe-kehykset

Voit myös ottaa käyttöön laiskalatauksen videoille ja iframe-kehyksille (iframeja käytetään sisällön upottamiseen muista sivustoista).

Kuinka optimoida WordPress-sivustosi WP Rocketilla

Siellä on myös mahtava ominaisuus, jonka avulla voit näyttää Youtube-videon pikkukuvan, kunnes se on latautunut.

Laiskan lataamisen haitat

Laiska lataus toimii hyvin Pinterestin kaltaisilla sivustoilla, joissa on paljon pieniä kuvia, mutta se ei aina toimi hyvin, jos sinulla on suuria kuvia. Ongelmana on, että kuva ei lataudu ennen kuin vierailijat vierittävät sen kohdalle, ja jos se on iso kuva, he saattavat joutua odottamaan hetken, kun se on latautunut. Tämä voi ärsyttää, jos se tapahtuu jokaiselle sivulla olevalle kuvalle.

Itse asiassa ainoa syy, miksi tämä vaihtoehto ei ole käytössä kilpailevien teemojen kohdalla, on se, että vierailijat haluavat vierittää joitakin viestejä erittäin nopeasti alaspäin ja kuvat eivät ole valmiita, kun he pääsevät niihin.

Emojit ja upotukset

WP Rocketilla on myös käteviä vaihtoehtoja emoji-tuen ja WordPressin upotustekniikan poistamiseen käytöstä. Kukin näistä ominaisuuksista lataa yhden pienen JS-tiedoston, joten niiden poistaminen käytöstä poistaa kaksi tiedostoa lisää sivustoltasi.

Kuinka optimoida WordPress-sivustosi WP Rocketilla

Kuten olet saattanut arvata, pidän hymiöistä, joten pidän ne käytössä?

Suosittelen kuitenkin poistamaan upotukset käytöstä, koska ne ovat enemmän ärsyttäviä kuin hyödyllisiä. Jos olet joskus syöttänyt URL-osoitteen tekstieditoriin ja WordPress muuttaa sen upotetun twiitin kaltaiseksi laatikoksi – tämä on upotus, jonka poistat käytöstä. Tämä vaihtoehto ei vaikuta Youtube- tai Vimeo-upotuksiin.

Mitä muuta voit tehdä WP Rocketilla?

Nämä ovat tärkeimmät vaiheet sivustosi optimoimiseksi WP Rocketilla.

Loput asetukset ovat säätämistä ja mahdollisten virheiden korjaamista varten, vaikka suorituskyvyssä on vielä joitain parannuksia.

Kuten luvattiin, tässä on kuvakaappauksia kaikista jäljellä olevista WP Rocketin valikoista:

Nopeuta sivustoasi

Käytän WP Rocketia täällä Compete Themesissa ja se on yksi ensimmäisistä laajennuksista, jotka asensen jokaiselle rakentamaani sivustolle.

Jos olet valmis optimoimaan sivustosi, hanki kopio WP Rocketista ja nopeuta sivustoasi.

Napsauta tätä tarkistaaksesi WP Rocketin nyt

Ja jos et ole harkinnut isäntien vaihtamista, suosittelen tutustumaan tähän WP Enginen arvosteluun. Nopeampi isäntä voi vaikuttaa valtavasti ja välittömästi sivustosi latausaikoihin.

Napsauta tätä löytääksesi muita tapoja nopeuttaa sivustoasi

Tämä verkkosivusto käyttää evästeitä parantaakseen käyttökokemustasi. Oletamme, että olet kunnossa, mutta voit halutessasi kieltäytyä. Hyväksyä Lisätietoja