Kaikki alan oppaat kehottavat automatisoimaan välimuistin tyhjennyksen ja asentamaan kalliita lisäosia. Käytännön kokemus kymmenien raskaiden WordPress-sivustojen parissa osoitti toista. Omissa testeissämme huomasimme heti, ettei yksikään ”helppo” SEO-lisäosa tuonut luvattua lisäarvoa Core Web Vitals -metriikoihin. Ne vain paisuttivat DOM-puuta sadoilla ylimääräisillä elementeillä.

Google käyttää CrUX-kenttädataa armottomana ratkaisijana tilanteissa, joissa kahdella sivustolla on sama sisältö. Kun purimme asiakkaamme B2B-verkkokaupan lokitiedostoja viime tiistaina, totuus paljastui. Totuus ei löydy PageSpeed-tuloksista, vaan tietokannan syövereistä ja selaimen renderöintisäikeistä. Jos ostoskoriin lisääminen kestää yli 200 millisekuntia, asiakas tulkitsee hiljaisuuden teknisenä virheenä ja poistuu.

Tietokannan hiljainen TTFB-kuolema

Suurin yksittäinen TTFB-viiveen (Time to First Byte) aiheuttaja on jättimäinen wp_options -taulu. Huonosti koodatut lisäosat tallentavat megatavukaupalla dataa ja jättävät autoload='yes' -asetuksen päälle.

Välimuistilisäosat (WP Rocket, Redis) ovat tässä tilanteessa hyödyttömiä. Heti kun kirjautunut käyttäjä tai WooCommerce-asiakas lataa sivun, välimuisti ohitetaan. WordPress joutuu lukemaan koko massiivisen alloptions -dataklimpin muistiin jokaisella sivulatauksella. Etsimme raskaimmat taulut aina suoralla MySQL-kyselyllä:

SELECT option_name, LENGTH(option_value) FROM wp_options WHERE autoload = 'yes' ORDER BY LENGTH(option_value) DESC LIMIT 20;

Kun roskat on siivottu, TTFB putoaa välittömästi.

WooCommerce ja wc-ajax -tuho

WooCommercen perinteinen wc-ajax=get_refreshed_fragments -kysely on katastrofi INP-arvolle (Interaction to Next Paint). Jopa staattisesti välimuistitetuilla sivuilla se käynnistää taustalla raskaat PHP-sessiot varmistaakseen, onko ostoskorissa tuotteita.

Eliminoimme tämän täysin. Estämme kyselyn latautumisen PHP-tasolla evästetarkistuksella:

if ( ! isset( $_COOKIE['woocommerce_items_in_cart'] ) ) { 
    wp_dequeue_script( 'wc-cart-fragments' ); 
}

Jos asiakkaan kori on tyhjä, skriptiä ei ladata. Korvasimme hitaat AJAX-kutsut Edge Side Includes (ESI) -teknologialla, jolloin korin sisältö tarjoillaan suoraan Edge-palvelimelta PHP:tä herättämättä.

BFCache-reputus ja selaimen peruutus-painike

Yli 90 % WordPress-sivustoista reputtaa selaimen BFCache-testin (Back/Forward Cache). Kun asiakas selaa tuotesivulta takaisin kategoriaan, sivun pitäisi latautua nollassa millisekunnissa suoraan selaimen muistista.

Tämän estävät huolimattomasti koodatut lisäosat, jotka pakottavat koko sivustolle Cache-Control: no-store -otsakkeen. Pakotamme palvelimella käyttöön no-cache -otsakkeen, jolloin selain saa tallentaa sivun muistiin, mutta varmistaa sen tuoreuden taustalla. Kun käytettävyys nojaa välittömään palautteeseen, selaimen ”Takaisin”-painikkeen hitaus tappaa ostoputken.

Zaraz ja kolmannen osapuolen koodin tuho

Google Tag Managerin tai Facebook-pikselin lataaminen selaimessa on virhe. INP-arvo romahtaa heti, kun asiakas klikkaa sivua ja selain yrittää samaan aikaan jäsentää satoja kilotavuja markkinointiskriptejä.

Siirsimme kaiken seurannan Cloudflare Zaraz -alustalle. Se ei ainoastaan viivästytä Tag Manageria, vaan poistaa sen kokonaan selaimesta. Kaikki API-kutsut Googlelle ja Metalle käsitellään fyysisesti Cloudflaren V8 Edge-palvelimilla. Selaimen pääsäie vapautuu täysin.

DOM-puun armoton karsiminen

Massiiviset megavalikot räjäyttävät DOM-puun koon. Standardi WordPress tulostaa jokaista linkkiä kohden useita sisäkkäisiä div- ja ul-tageja. Kirjoitimme teemoihin kustomoidun Walker_Nav_Menu -luokan, joka repii irti kaikki turhat listat. Tuloksena on litteä HTML5-rakenne, jota hallitaan yksinomaan CSS Gridillä. 2000 elementin solmu putoaa kahteensataan.

Prioriteettien manipulointi verkkotasolla

Selausviiveet ohitetaan hyödyntämällä suoraan selaimeen rakennettua verkkolukkoa.

  • Fonttien manipulaatio: Lataamme ainoastaan karsitun Variable Font -tiedoston komennolla fetchpriority="high".
  • CSS:n alennus: Pakotamme ei-kriittiset tyylitiedostot alempaan tilaan fetchpriority="low" -attribuutilla.
  • CSS Paint API (Houdini): Siirrämme kaikki monimutkaiset skrollaus-efektit pois JavaScriptistä suoraan selaimen piirtosäikeelle.

Samaan aikaan kun koodataan tietoturvaa kuntoon, arkkitehtuurin on palveltava vain yhtä tarkoitusta: pääsäikeen on oltava vapaa. Kaikki muu on kompromissi.