WordPress latausnopeuden parantaminen

Haluatko parantaa WordPress kotisivusi latausnopeutta? Lue tästä oppaamme ja optimoi WordPress sivusto nopeammaksi. WordPress latausnopeuden parantamiseksi tarvitaan muutamia ilmaisia lisäosia joiden avulla onnistut, ensiksi kannattaa tehdä testit GTmetrix.com ja Googlen PageSpeed Insights jotta tiedetään mitä pitää korjata sivustolla. GTmetrix osiosta kannattaa tarkastella "waterfall" osiota, tämä kertoo mitkä resurssit ladataan ja missä järjestyksessä, huomaat myös mikä resurssi hidastaa sivustosi latautumista (erottuu riviltä).

WordPress palvelimen valinta

WordPress palvelimen valintaa varten kannattaa laskea oma budjetti, kuinka paljon haluat maksaa palvelimesta vuodessa? On myös olemassa erilaisia "WordPress webhotelleja" jotka ovat melkein aina uusinimi perinteiselle Webhotelli palvelulle joten sellaista ei kannata ostaa omalle sivustolle. WordPress toimii parhaiten openlitespeedillä tai Litespeedillä, Nginx tulee seuraavaksi ja hitain palvelimen ohjelmisto on Apache. WordPress saadaan latautumaan nopeasti litespeed + LSCachen avulla, voit ottaa itsellesi käyttöön hetzneriltä pilvipalvelimen ja asentaa siihen CentOS 7 johon tulee hallinta työkaluksi Cyber Panel, kun asennat cyber paneelin valitse siihen avoimen lähdekoodin openlitespeed, cyber paneelin kautta saat sähköpostit ja muut toimimaan helposti ja mikä parasta nopeasti kun verrataan esimerkiksi c-panelia, pleskiä tai directadminia. Cyber Panel on avoimen lähdekoodin ohjelmisto ja täysin turvallinen käyttää, tämäkin sivusto ladataan hetznerin palvelimelta käyttäen Cyber Panel hallintaa. Hetzneriltä voit valita yhdelle WordPress sivustolle CX11 pilvipalvelimen joka riittää WordPress sivuston pyörittämiseksi hyvin, tarpeen mukaan voit tilata isompaa palvelinta. Hetznerin pilvi palvelimet ovat maailman nopeimpia ja edullisia (alkaen 2,95€/kk) hetznerin palvelimia käytetään myös näissä WordPress Webhotelli tuotteissa jolloin sinulle myydään 10x kuukausi hinnalla sama tuote, toki automaattiset päivitykset tulevat tähän webhotelliin (wordpress 5.5 version jälkeen on automaattiset päivitykset saanut laitettua klikkaamalla päälle).

WordPress kuvien optimointi

WordPressin kuvien optimointi voidaan suorittaa reSmush.it lisäosan avulla täysin ilmaiseksi, ei kannata maksaa turhista lisäosista jos saman tuotteen saa ilmaiseksi. Toki moni blogaaja ja neuvoja esimerkiksi facebook ryhmissä saattaa neuvoa että osta tämä lisäosa ja salakalavasti laittaa siihen affiliate linkin jolloin sinä annat rahaa "neuvojalle" jos neuvoja antaa vinkkejä rahan vuoksi onko neuvo välttämättä laadukas? Ei ole koska rahan vuoksi neuvominen on oman edun tavoittelua. reSmush.it lisäosa pakkaa automaattisesti jokaisen ladattavan kuvan, mutta jos sivustollasi oli jo aikaisemmin kuvia sinun tulee mennä lisäosan sivulle ja pakata kaikki kuvat. Lisäosan sivulla oikealla puolella voidaan määrittää kuvan laatu, voit tästä määrittää kuinka pieneksi kuvat optimoidaan. Laatua ei kannata pudottaa alle 80% koska se alkaa ottamaan kuvasta pois pikseleitä jolloin kuvan laatu kärsii vahvasti.

Onko WordPress sivustosi palvelimella nginx tai litespeed? jos on hyppää alla olevan ohi, se ei koske sinua.

Oletko kuullut termin "Next gen images" eli uudensukupolven kuvat? Jos et niin kerrotaan hieman tässä, JPG kuva muoto on iso jos verrataan esimerkiksi webP:hen, webP on jopa 80% pienempi kuin pakattu JPG/PNG tiedosto. Nyt kun vihdoin ja viimein applekin otti webP tuen käyttöönsä voidaan käyttää webP kuvia myös WordPress sivustoissa (webP julkaistiin 2010). Silti edelleen on olemassa selaimia jotka eivät tue webP formaattia jolloin sinun tulee asettaa vaihtoehtoinen kuva webP kuvan tilalle, onneksi tätä hommaa helpottamaan on tehty ilmainen lisäosa nimeltään webP express joka muuntaa kuvat webP muotoon ja näyttää webP kuvia selaimissa jotka tukevat webP formaattia ja muissa selaimissa perinteisiä JPG/PNG kuvia. webP expressin asetuksissa pitää kiinnittää huomiota Alter HTML osioon joka pitää olla aktiivinen, valitse "replace <img> tags with <picture> tags" joka siis vaihtaa kuvan automaattisesti webP tai PNG/JPG välillä (picturefill.js tiedostolla vanhemmissa selaimissa, johon tulee myös laittaa täppä).

Kuvien lataaminen "Lazy Load"

Lazy load lataa sivustosi sisältöä aina kun käyttäjän selain osuu kohdalle, tämä nopeuttaa sivustosi latautumista huomattavasti. Lazy load toimintoa varten voit käyttää joko "A3 lazy load" lisäosaa tai sitten vaihtaa yllämainitun resmushit lisäosan SMUSH optimointi lisäosaan joka optimoi kuvat ja tekee lazy load efektin kuville. A3 lazy load lataa myös iframe sisällön eli upotetut elementit vasta sitten kun käyttäjän selain osuu kohdalle, joten se on siinä mielessä parempi lisäosa wordpressin latausnopeuden optimointiin.

WordPress CSS/JS/HTML pienennys

WordPressissä html/css/js tiedostojen pienentämiseksi voidaan käyttää erilaisia lisäosia, jos sinulla on käytössä litespeed tai openlitespeed ota käyttöön "all in one" työkalua = LSCache jonka kautta saat optimoitua kaiken ilmaiseksi juuri sinun palvelin ohjelmistolle suunnitelulla lisäosalla. Jos käytössäsi on Apache tai Nginx niin silloin voit käyttää kahta erilaista lisäosaa CSS/JS/HTML pakkaamiseksi: Speed Booster Pack ja Autoptimize optimointi lisäosia ei kannata olla kahta samaan aikaan käytössä koska ne saattavat rikkoa sivustosi, kokeile jompaa kumpaa edellä mainituista lisäosista siten että otat aina yhden asetuksen käyttöön (tyhjennä välimuisti (clera cache)) ja katso hajoaako sivusto ja nopeutuu se edellä mainituissa testeissä, tällä tavalla löydät asetukset mitkä nopeuttavat sivustoasi ja samalla tiedät mitkä asetukset rikkovat sivustosi, jokainen wordpress sivusto on erilainen optimoida joten yhtä ja samaa opasta en voi kirjoittaa sinulle wordpressin CSS/JS/HTML tiedostojen optimoinnista.

CSS ja JS tiedostojen yhdistäminen ei ole enään tärkeää kunhan palvelimellasi on käytössä HTTP/2 protokolla tai uudempi HTTP/3 protokolla minkä avulla selain pystyy lataamaan useamman resurssin samanaikaisesti! Lisäsin linkit testeihin minkä avulla voit testata onko palvelimellasi käytössä joko HTTP/2 tai HTTP/3 protokolla, jos palvelimellasi ei ole kumpaakaan käytössä vaihda hosting palvelun tarjoajaa nopeasti! Ilman HTTP/2 tai HTTP/3 protokollaa sivustoa ei voi saada latautumaan nopeasti. Cyber Panel käyttää openlitespeediä mikä mahdollistaa HTTP/3 protokolla QUIC protokollaa joka on erittäin turvallinen ja mikä parasta NOPEA! Tässä tämän sivuston HTTP/3 testi.

Javascript tiedostot voidaan ladata joko DEFER tai sitten ASYNC menetelmällä, eli defer tagilla scripti ei estä sivuston renderöintiä jolloin scripti tiedostot voivat olla missä tahansa sisällössä. Async tagilla scriptit ladataan vasta sitten kun muu sisältö on ladattu, jos on useampia async scriptejä ne ladataan taustalla ja otetaan käyttöön latautumisjärjestyksessä. Async on yleisesti käytössä kolmannen osapuolen scripteissä kuten mainoksissa ja analytiikka scripteissä. Muutoin javascript ja renderöinnille tarpeettomat CSS tiedostot tulisi ladata aina footerissa kaiken muun sisällön jälkeen ennen </body> tagia, tällöin sisältö ladataan ensin ja sitten vasta tyylit ja scriptit.

WordPress fonttien optimointi

WordPress saattaa käyttää ulkoisia fontti tiedostoja jotka olisi hyvä saada latautumaan nopeasti. OMGF | Host Google Fonts locally on lisäosa jonka avulla voit käyttää Google fontteja mutta fontit ladataan sinun palvelimellesi ja otetaan sitä kautta käyttöön sivustollasi jolloin fontti latautuu nopeammin. Fontteja voidaan optimoida myös aiemmin mainittujen "Speed booster pack" ja "Autoptimize" lisäosien kautta, muista määrittää fontin näkyminen kun sisältöä ladataan ettei teksti katoa kesken latautumisen esimerkki (display: swap). Jos käytät LS cache lisäosaa voit sieltä myös määrittää fonttien näkymisen tai estää kokonaan ulkoiset fontit jos et niitä siis käytä.

WordPress some feedien optimointi

Moni väittää että sosiaallisen median feedit tai upotetut videot hidastavat sivuston latautumista, tämä pitää paikkansa jos käyttää suoraan sosiaallisten medioiden upotus työkaluja onneksi tähän on ratkaisuna välimuistitettu some lisäosa joka siis lataa some julkaisut palvelimelle ja näyttää ne sitten nopeasti sivustollasi. Kurkkaa alta lista näistä lisäosista, lisäksi youtube videoiden upottamiseksi löytyy nopeuttava lisäosa.

Preconnect ja DNS-Prefetch headeriin

Välillä yhdistäminen sinun sivustoltasi ulkopuoliseen resurssiin saattaa kestää millisekuntteja, tätä aikaa voidaan onneksi pienentää kahdella koodilla johon molempiin syötetään ulkoisten resurssien URL osoitteet. Osa fonteista sattaa myös kadota lataamisen yhteydessä tähän voit taas käyttää "preload" komentoa joka ennakkolataa tietyn resurssin heti.

Esimerkki google fonttien lataamisen nopeuttamisesta, tämä syötetään sivuston head tagien väliin:

Preconnect, ottaa yhteyden URL osoitteeseen

<link href="https://fonts.googleapis.com" rel="preconnect">
<link href="https://fonts.gstatic.com" rel="preconnect">

DNS prefetch, ottaa yhteyden verkkotunnuskeen

<link href="fonts.googleapis.com" rel="dns-prefetch">
<link href="fonts.gstatic.com" rel="dns-prefetch">

Preload komennolla ladataan tietty resurssi heti (renderöinnin estävä resurssi)

<link rel="preload" href="/assets/webfonts/fa-solid-900.woff2" as="font" type="font/woff2" crossorigin="anonymous">

WordPress ja CDN palvelu

Haluatko tarjota sivustosi nopeasti missäpäin maailmaa tahansa? Kokeile CDN palvelua kuten Cloudflare jonka avulla sivustosi resurssit pystytään lataamaan ympäri maapalloa nopeasti! Cloudflaren ilmainenkin CDN palvelu on nopea joten siitä ei välttämättä tarvitse maksaa ellei sivustollasi ole hurjasti kävijöitä. Cloudflaren saa yhdistettyä helposti WordPressin kanssa jolloin saavutetaan paras mahdollinen wordpress latausnopeuden optimointi.

Miksi käyttöön Cyber Panel + Hetznerin palvelin?

WordPress webhotelli

Katso ylläoleva kuva, kyseessä helsingissä sijaitsevalla palvelimella (Hetzner cloud) oleva WordPress sivusto ilman minkäänlaista sisältöä ja optimointia itse sivustolla (Käytössä Cyber Panel + openlitespeed). Sivusto latautuu Helsingistä Lontooseen 289ms kokonaisuudessaan! Tähän ei "WordPress webhotelli" tai "WordPress optimoidut" hostingit pysty!

Latautuuko WordPress sivustosi nopeasti nykyisellä hostingilla?

Laita kommentti kenttään sivuston latausnopeudesta tulos (GTmetrix) ja jaa nopea WordPress hosting muidenkin kanssa! Me lisäämme nopeat WordPress hostingit tähän sivulle ja laitamme linkit heidän tuotteisiin, itse en löytänyt riittävän nopeaa joten kokeilin Apachen, Nginx, Litespeedin, Openlitespeedin ja useammat webhosting paneelit läpi ja löysin nopeimman ratkaisun tuon Cyber Paneelin kautta.

Nopeat WordPress hostingit:

Nopeassa palvelimessa on NVME levyt, uusimman teknologian prosessori ja keskusmuisti, lisäksi internet yhteyden tulee olla nopea ja mielellään isojen runkkoverkko kaapeleiden lähistöllä. Hetzner ja Upcloudin kautta voit ottaa pilvipalvelimen edullisella kuukausimaksulla ja asentaa siihen joko SlickStackin avulla WordPressin tai sitten Cyber Paneelin (Huomio: Cyber Panel toimii parhaiten CentOS 7:lla).