Skip to content

Kaikki WordPressistä, web-kehityksestä — ja paljon muuta

🚀 Kuinka nopeuttaa Elementor-sivusto ja saada 100 pistettä GTmetrixissä

🚀 Kuinka nopeuttaa Elementor-sivusto ja saada 100 pistettä GTmetrixissä

Ajat GTmetrixin läpi Elementor-sivustosi ja näet tulokseksi 45. Tai 52. Tai rehellisen 60, mutta punaisella TTFB:llä ja kilometrin mittaisella "korjattavaa"-listalla. Yksi kysymys pyörii mielessäsi: eikö Elementorin pitänyt olla nopea?

Se on oikeasti nopea. Ongelma ei ole sivunrakentajassa, vaan siinä, mitä pinnan alla on: palvelin, joka tukehtuu PHP 7.4:ään, kolme tusinaa lisäosaa päällekkäisine skripteineen, fontit ulkoisesta CDN:stä ja tietokanta, jota ei ole siivottu julkaisupäivän jälkeen. Elementor tuottaa puhdasta HTML:ää ja CSS:ää, mutta palvelimen on koottava ja toimitettava tuo HTML sekunnin murto-osassa.

Alta löydät vaiheittaisen oppaan, jossa ei ole turhaa täytettä ja jossa on oikeita kuvakaappauksia. Lopuksi sivustosi nousee 45 pisteestä 95-100 pisteeseen. Aikaa kuluu puoli päivää. Mikään vaihe ei vaadi kehittäjää: kaikki tehdään hallintapaneelista tai hosting-palvelun hallintapaneelista.

💡 Nopea yleiskatsaus:

  • Päivitä PHP versioon 8.3 tai 8.4 ja aseta memory_limit arvoon 256 MB. Tämä on perusta, jota ilman välimuistitus ja minifiointi eivät saavuta juuri mitään.
  • Asenna WP Rocket, yhdistä Cloudflare CDN ja määritä automaattinen tietokannan siivous. Nämä kolme toimenpidettä yhdessä tuovat suurimman nopeushyödyn.
  • Käy läpi lisäosasi: poista skriptejä ja tyylejä valikoivasti sieltä, missä niitä ei käytetä, Perfmattersin tai Asset CleanUpin avulla. Vähennä HTTP-pyynnöt noin viiteentoista sivua kohden.
  • Isännöi fontit paikallisesti, kokoa kuvat oikein ja korvaa ulkoiset pyynnöt paikallisilla vaihtoehdoilla. Nämä ovat viimeiset kohdat, jotka erottavat "hyvän" "erinomaisesta".
  • Avaa GTmetrix, siirry Waterfall-välilehdelle ja käy pullonkaulat järjestelmällisesti läpi. Jokainen punainen kohta on tietty lisäosa, skripti tai mediatiedosto, jonka voit korjata.

1. Palvelinympäristö: hosting, PHP ja muisti

Virallinen WordPressin optimointiopas alkaa palvelinympäristöstä. Jos palvelin vastaa 800 millisekunnissa, mikään välimuisti ei pelasta sinua, kävijä on jo mennyt.

Päivitä PHP versioon 8.3 tai 8.4

PHP 7.4:n tietoturvapäivitykset loppuivat marraskuussa 2022. Tuoreiden Kinstan vertailutestien mukaan päivitys versiosta 7.4 versioon 8.2 tuo 2-3-kertaisen parannuksen pyyntöjen käsittelynopeuteen. Versiot 8.3 ja 8.4 säilyttävät saman suorituskykytason, mutta paremmalla tietoturvalla ja modernilla syntaksituella. Elementor suosittelee vähintään versiota 8.0, mutta käytännössä 8.3 on järkevä minimi tänä päivänä.

Tarkista nykyinen versiosi: Elementor → Järjestelmätiedot.

Elementorin PHP-versio järjestelmätiedoissa

Siirry hosting-palvelusi hallintapaneeliin, etsi PHP-versioiden hallinta ja vaihda versioon 8.3 tai 8.4. Tee tätä ennen varmuuskopio.

PHP-versioiden hallinta hosting-hallintapaneelissa

Päivityksen jälkeen selaa sivustoasi: varmista, että kaikki sivut latautuvat ja lisäosat eivät heitä virheitä. Lisäosa, jota ei ole päivitetty kolmeen vuoteen ja joka hajoaa PHP 8.4:llä, ei ole menetys, vaan syy etsiä elävä korvaaja.

Aseta muistirajaksi 256 MB

Elementorin, WordPressin ja WooCommercen dokumentaatioissa ollaan yhtä mieltä 256 megatavusta. Tarkista nykyinen rajasi samasta paikasta: Elementor → Järjestelmätiedot.

Elementorin PHP-muistiraja järjestelmätiedoissa

Useimmilla hosting-palveluntarjoajilla voit muuttaa rajaa suoraan hallintapaneelista:

PHP-muistirajan asetus hosting-hallintapaneelissa

Jos tämä vaihtoehto ei ole käytettävissä, lisää seuraava rivi wp-config.php-tiedostoon:

1define( 'WP_MEMORY_LIMIT', '256M' );

Siirry jaetulta hostingilta pilveen

Jaettu hosting toimii hyvin niin kauan kuin sivustollasi on vähän liikennettä eikä WooCommercea. Sen jälkeen palvelimen vasteaika (TTFB) nousee yli 200 ms:n, ja GTmetrix korostaa sen punaisella.

Pilvihosting (DigitalOcean Cloudwaysin kautta, Vultr, Linode) puolittaa latausajan verrattuna laadukkaisiin jaettuihin paketteihin. Sivut, joilla on satoja kuvia ja satoja kommentteja, latautuvat alle 2 sekunnissa.

DigitalOcean-pilvipalvelupakettien vertailu Cloudwaysissa

Ero keskeisissä mittareissa näkyy paljaalla silmällä:

Hosting-palvelun suorituskykyvertailu: latausaika ja pyyntöjen määrä

Lopputulos: jaettu hosting on hyvä alkuun pääsemiseksi. Projektille, jossa on liikennettä, verkkokauppa tai tusina lisäosaa, pilvi on ainoa vaihtoehto. Hintaero maksaa itsensä takaisin nopeutena.

2. Välimuisti, tietokanta ja CDN

Palvelinympäristön jälkeen nämä kolme komponenttia tuovat huomattavimmat parannukset. Kokemukseni mukaan välimuistin hallinta, tietokannan siivous ja CDN ratkaisevat useimmat nopeusongelmat keskivertosivustolla.

WP Rocket: yksi lisäosa viiden sijaan

WP Rocket päihittää johdonmukaisesti WP Fastest Cachen ja W3 Total Cachen suorissa GTmetrix-vertailuissa. Syy ei ole taikuutta vaan arkkitehtuuri: se yhdistää toiminnot, jotka yleensä vaativat 5-6 erillistä lisäosaa. Sivuvälimuisti, tietokannan siivous, Google Analyticsin paikallinen hostaus, Google Fontsien yhdistäminen, kuvien ja videoiden laiska lataus, Cloudflare-integraatio, WebP-välimuisti, DNS-esihaku, selainvälimuisti Facebook Pixelille. Kaikki suoraan paketista.

Pointti on yksinkertainen: mitä vähemmän lisäosia sivustollasi on, sitä vähemmän HTTP-pyyntöjä. Ja GTmetrix laskee pyynnöt.

Säännöllinen tietokannan siivous

Elementor ja WordPress keräävät artikkelien versiohistoriaa, poistettujen lisäosien jättämiä tauluja, transientteja ja roskakommentteja. WP Rocket ja WP-Optimize siivoavat tämän sotkun parilla klikkauksella.

WP Rocket -lisäosan tietokannan siivousnäkymä

Tee varmuuskopio ennen siivousta. Ja tarkista poistettavien kohteiden lista: siellä on joskus luonnoksia, joita et halua menettää.

Cloudflare CDN: ilmainen taso

Cloudflare on yli 200 datakeskuksen verkko, jota WordPress itse suosittelee. Ilmainen taso kattaa 95 prosentin sivustojen tarpeet.

Cloudflaren hallintapaneeli nopeus- ja CDN-asetuksineen

Jotkin palveluntarjoajat (SiteGround) aktivoivat Cloudflaren omasta hallintapaneelistaan. Kaikille muille: rekisteröidy ilmaiselle tasolle, vaihda verkkotunnuksesi nimipalvelimet ja määritä kolme asetusta:

  • Nopeus: ota käyttöön Brotli ja Rocket Loader.
  • Scrape Shield: ota käyttöön hotlink-suojaus.
  • Page Rules: pakolliset Cloudflare-säännöt nopeutta, tietoturvaa ja hallintapaneelin yhteensopivuutta varten.

3. Skriptit ja lisäosat: valikoiva poistaminen käytöstä

Tämä osio tuo johdonmukaisesti 10-15 GTmetrix-pistettä lisää. Mekaniikka on yksinkertainen: jokainen sivulla oleva skripti on erillinen HTTP-pyyntö, ja jokainen pyyntö lisää millisekunteja kokonaislatausaikaan.

Mitkä lisäosat hidastavat sivustoasi

Pahimmat hidastajat: analytiikka, varmuuskopiolisäosat, joissa on taustaskannaus, laskureilla varustetut some-widgetit, live-chatit, raskaat yhteydenottolomakkeet, sliderit, JetPack. Yhteinen nimittäjä on, että lisäosa on koko ajan käynnissä, vaikka sen toiminnallisuutta ei tarvittaisi kyseisellä sivulla.

Lähestymistapa: joko poista tällainen lisäosa ja etsi kevyt korvaaja, tai lataa se vain siellä, missä sitä oikeasti tarvitaan.

Asset CleanUp ja Perfmatters

Molemmat työkalut ratkaisevat saman ongelman: skriptien ja tyylien valikoivan poistamisen käytöstä yksittäisen sivun tasolla. Perfmatters on maksullinen ratkaisu, jossa on kätevä käyttöliittymä. Asset CleanUp on ilmainen vaihtoehto, jonka toiminnallisuus kattaa useimmat tilanteet.

Asset CleanUp -lisäosa skriptien valikoivaan poistamiseen WordPressissä

Toimi näin:

  • Asenna Asset CleanUp (ilmainen repositoriosta) tai Perfmatters.
  • Avaa sivu muokattavaksi ja vieritä alas. Näet kaiken, mitä sivulla latautuu.
  • Poista valinnat lisäosista, skripteistä ja tyyleistä, joita ei käytetä tällä sivulla.
Luettelo skripteistä ja tyyleistä valikoivaa poistamista varten Asset CleanUpissa

Voit poistaa käytöstä sisältötyypeittäin (artikkelit, sivut, tuotteet) tai käyttää RegExiä maksullisissa versioissa. Klassinen esimerkki: yhteydenottolomakelisäosa latautuu vain osoitteessa /contacts/, ei koko sivustolla.

WooCommerce: poista ylimääräinen

WooCommercen skriptit ja ostoskorifragmentit näkyvät oletuksena jokaisella sivulla. Perfmatters voi poistaa ne yhdellä napsautuksella.

WooCommerce-skriptien poistoasetukset Perfmatters-lisäosassa

Skriptien ja ostoskorifragmenttien poistaminen käytöstä kaikilta sivuilta paitsi kaupasta ja ostoskorista leikkaa jopa kymmenen turhaa pyyntöä:

Yhden klikkauksen vaihtoehto WooCommerce-skriptien ja -tyylien poistamiseksi

Elementor-editorin lataaja

Jos itse editori on hidas tai aiheuttaa ristiriitoja palvelimen kanssa, vaihda lataustapaa. Elementorin dokumentaatio kuvaa tätä asetusta ensisijaisena keinona editorin suorituskykyongelmiin.

Elementor → Asetukset → Lisäasetukset → Editor Loader.

Editorin lataustavan valinta Elementorin asetuksissa

4. Fontit, mediatiedostot ja ulkoiset pyynnöt

Media ja ulkoiset resurssit ovat yleisin syy keltaisiin ja punaisiin varoituksiin GTmetrixissä. Hosting ja välimuistitus ovat jo nostaneet sivuston yli 80 pisteeseen, ja tässä vaiheessa keräät loput pisteet.

Isännöi fontit paikallisesti

Google Fontsit luovat ulkoisia pyyntöjä Googlen palvelimille. GTmetrix näkee ne pullonkaulana ja korostaa niitä aivan aiheesta: sivustosi odottaa vastausta jonkun toisen palvelimelta.

Jos sinulla on Elementor Pro, käytä mukautettuja fontteja asetuksissa:

Mukautetut fonttiasetukset Elementor Prossa

Ilman Pro-versiota tässä on toimivaksi todettu viisivaiheinen prosessi:

Vaihe 1. Varmista, että fontit todella ovat ongelma. Avaa Waterfall-välilehti GTmetrixissä:

GTmetrix-raportti: ulkoiset Google Fonts -pyynnöt hidastavat latautumista

Vaihe 2. Lataa tarvittavat fontit Google Fontsista. Ota vain ne leikkaukset, joita oikeasti käytät: jokainen ylimääräinen lisää pyynnön.

Vaihe 3. Muunna ladatut fontit web-muotoihin Transfonterilla:

Transfonter-verkkotyökalu fonttien muuntamiseen web-formaatteihin

Vaihe 4. Siirrä tiedostot WordPressiin ja viittaa niihin CSS:ssäsi.

Vaihe 5. Testaa näkymä ja lisää varafontit siltä varalta, että lataus epäonnistuu.

Yksityiskohtainen opas paikallisiin fontteihin löytyy erillisestä artikkelistamme.

Optimoi kolmannen osapuolen pyynnöt

Google Fontsit on vain yksi esimerkki. AdSense, Analytics, Google Maps, Tag Manager, upotetut videot, Gravatarit ja some-liitännäiset luovat kaikki ulkoisia pyyntöjä, joita GTmetrix ei voi välimuistittaa tai optimoida.

GTmetrix-raportti: luettelo sivustoa hidastavista kolmannen osapuolen pyynnöistä

Mitä niille voi tehdä:

  • WP Rocket voi isännöidä Google Analyticsin paikallisesti ja lisätä selainvälimuistituksen Facebook Pixelille ("Lisäosat"-välilehti).
  • Videot: WP Rocket korvaa iframen esikatselukuvalla sen sijaan, että lataisi soittimen heti ("Media"-välilehti).
  • Some-widgetit: käytä kuvakaappausta ja linkkiä upotetun julkaisun sijaan. Säästää jopa kymmenen pyyntöä.
  • Disqus: määritä ehdollinen lataus (kommentit latautuvat vasta, kun lukija vierittää alas).
  • Siirrä JavaScriptin suoritusta välimuistilisäosan asetuksissa.
Kolmannen osapuolen pyyntöjen asetusvälilehti WP Rocket -lisäosassa

Google AdSense on erikoistapaus. Asynkroninen lataus on katto: et voi optimoida sitä täysin. Gravatarit on helpompi poistaa kokonaan käytöstä; mikään gravatar-välimuistilisäosa ei tuottanut käytännössä havaittavia tuloksia. Google Tag Manager on järkevä vain suurissa projekteissa, joissa on kymmeniä ulkoisia skriptejä; pienellä sivustolla se lisää enemmän kuormaa kuin säästää.

Skaalaa kuvat oikein

Elementor (ja GTmetrix) edellyttävät, että kuvat on skaalattu näyttöalueen todellisiin mittoihin. "Serve scaled images" -virhe on yksi yleisimmistä.

GTmetrix-varoitus kuvien skaalauksen tarpeesta

Vinkki: tee muistilista sivustosi tyypillisten elementtien koosta (artikkelikuva, slider, sisällön kuva, logo). Ennen uuden kuvan lataamista muuta sen koko vaadittuihin mittoihin. GTmetrix itse ehdottaa oikeat koot jokaiselle ongelmalliselle tiedostolle.

5. Teema ja loppudiagnostiikka

Tässä vaiheessa sivustosi on jo 85-90 pisteessä. Jäljellä on enää viimeisten prosenttien puristaminen: teema ja kohdennettu siivous GTmetrixin raportin perusteella.

Kevyt teema perustana

Teema, jossa on oma visuaalinen rakentaja Elementorin päällä, on tupla-isku nopeudelle. Valitse minimaalinen, puhdas teema ja lisää toiminnallisuus lisäosien kautta. Astra ja GeneratePress ovat kaksi toimivaksi todettua vaihtoehtoa: ne eivät ole ristiriidassa Elementorin kanssa, lisäävät vain vähän omaa koodiaan eivätkä luo ylimääräisiä pyyntöjä. Teeman vaihtaminen on vaikeampaa kuin tarpeettoman lisäosan poistaminen, joten on parempi valita oikein alusta alkaen.

Kolme tarkistuspistettä GTmetrixissä

Yleispätevää reseptiä ei ole: jokainen sivusto on ainutlaatuinen lisäosien ja sisällön yhdistelmä. Mutta GTmetrix näyttää, mikä juuri sinun sivustoasi hidastaa. Kolme mittaria, joihin kannattaa keskittyä:

Time to first byte (TTFB).

Time to First Byte (TTFB) -mittari GTmetrix-raportissa

Yli 200 ms:n TTFB viittaa palvelinpuolen ongelmaan. Palaa vaiheeseen 1: hosting, PHP, välimuistitus.

Optimoimattomat kuvat.

Luettelo optimoimattomista kuvista GTmetrix-raportissa

Kun käyt tämän listan läpi ylhäältä alas, kokoa muuttamalla ja pakkaamalla, saat puolessa tunnissa 5-8 pistettä.

Hitaat lisäosat.

Hitaiden lisäosien diagnosointi latausajan perusteella GTmetrix-raportissa

Järjestä latausajan mukaan ja poista armotta tai korvaa kaikki listan kärjessä olevat.

Tässä on käytännön video-opastus Elementorin optimointiin GTmetrixiä varten:

⁉️🤔 Usein kysytyt kysymykset

Onko Elementor lähtökohtaisesti hidas?

Ei. Elementor tuottaa ulostulona puhdasta HTML:ää ja CSS:ää. Ongelma on aina palvelinympäristön, lisäosien ja optimoimattomien mediatiedostojen yhdistelmässä. Oikein konfiguroidulla palvelimella, WP Rocketin ja Cloudflaren kanssa, Elementor-sivusto saavuttaa johdonmukaisesti maksimipisteet GTmetrixissä.

Riittääkö ilmainen välimuistilisäosa WP Rocketin sijaan?

Ilmaiset ratkaisut (WP Fastest Cache, W3 Total Cache) kattavat perusvälimuistitilanteet. Mutta WP Rocket yhdistää välimuistituksen, tietokannan siivouksen, paikallisen analytiikan, laiskan latauksen, Cloudflare-integraation ja fonttien optimoinnin yhteen lisäosaan. Jokainen näistä erikseen tarkoittaa uutta lisäosaa ja lisää HTTP-pyyntöjä. Sivustolla, jossa on yli 20 lisäosaa, 5-6 erillisen korvaaminen yhdellä WP Rocketilla tekee huomattavan eron.

Mikä hosting Elementorille vuonna 2026?

Aloitukseen ja pieniin projekteihin SiteGround. Mutta heti kun lisäät WooCommercen, AdSensen tai liikenne ylittää 10-20 tuhatta käyntiä kuukaudessa, siirry pilveen. Cloudways DigitalOceanilla tai Vultrilla tarjoaa parhaan hinta-laatusuhteen. TTFB on pilvessä tyypillisesti 2-3 kertaa matalampi kuin laadukkaassa jaetussa hostingissa.

Onko Cloudflare tarpeellinen, jos minulla on jo WP Rocket?

Nämä ovat eri optimoinnin tasoja. WP Rocket välimuistittaa palvelintasolla, kun taas Cloudflare tarjoaa staattista sisältöä yli 200 datakeskuksen verkon kautta. Yhdessä ne toimivat kaksitasoisena välimuistina: ensimmäinen pyyntö menee palvelimelle, kaikki seuraavat tulevat käyttäjää lähimmästä datakeskuksesta.

Kuinka kauan täysi optimointi kestää?

Perusasetukset (PHP, WP Rocket, Cloudflare, tarpeettomien lisäosien poistaminen) vievät 2-3 tuntia. Täysi kierros, sisältäen fontit, kuvat ja hienosäädön GTmetrixiä varten, vie 4-6 tuntia sivuston koosta riippuen.

Mitä tehdä juuri nyt: puolen päivän tarkistuslista

Aloita perustasta, se tuo suurimmat hyödyt:

  • Päivitä PHP versioon 8.3+ ja aseta memory_limit arvoon 256M.
  • Asenna WP Rocket ja konfiguroi välimuistitus.
  • Yhdistä Cloudflare ilmaisella tasolla.

Loppu saavutetaan kohdennetuilla säädöillä: poista käyttämättömät skriptit Perfmattersin tai Asset CleanUpin avulla, isännöi fontit paikallisesti, kokoa kuvat oikein ja käy GTmetrixin pullonkaulalista läpi ylhäältä alas.

Elementorilla tehty sivusto voi ja sen pitää latautua alle 2 sekunnissa. Siihen tarvitaan vain oikea palvelinympäristö ja kurinalaisuutta lisäosien kanssa.