Nykyinen verkkokehitys on karannut täysin käsistä. Se on sairasta. Viimeisimmässä teknisessä auditissamme perkasimme asiakkaan React-pohjaista verkkokauppaa, jonka pelkkä node_modules-kansio painoi enemmän kuin puhdas Windows 95 -asennus. Kehittäjät lataavat sokeasti tuhansia NPM-paketteja ratkaisemaan ongelmia, joita ei edes ollut olemassa ennen JavaScript-kehysten aikakautta. Tämä riippuvuuksien suo kerryttää koodiin megatavukaupalla turhaa kuonaa, joka hidastaa sivuston latausaikoja ja syö hakukoneiden ryömintäbudjetin.

Emme enää rakenna verkkosivuja. Kokoamme purkkaviritelmiä. Selaimet joutuvat tulkitsemaan loputtomia koodihärdellejä vain piirtääkseen ruudulle yksinkertaisen ostoskoripainikkeen. Tämä ei ole kehitystä. Se on teknologista masokismia.

Jokainen uusi kirjasto myydään meille ratkaisuna nopeusongelmiin, mutta todellisuudessa ne ovat juuri se pullonkaula. Analysoimme kymmenien kilpailijoiden ydinverkkotiedot (Core Web Vitals), emmekä löytäneet yhtäkään raskaalla frameworkilla rakennettua sivustoa, joka olisi selvinnyt Googlen tiukoista kriteereistä ilman kalliiden palvelimien ja monimutkaisten välimuistien taakse piiloutumista. Kehittäjät pelkäävät koskea ydinongelmaan. Koodia rakastetaan liikaa.

Todellinen tekninen hakukoneoptimointi ei ole uusien lisäosien asentamista. Se on raakaa, armotonta koodin tuhoamista. Jos haluat dominoida hakutuloksia, aloita poistaminen. Omissa testeissämme huomasimme, että aggressiivinen DOM-puun karsiminen ja turhien tyylien hävittäminen paransi sijoituksia merkittävämmin kuin mikään perinteinen sisältöoptimointi. Raivaa koodi paljaaksi. Hakukonerobotit vihaavat ylimääräistä työtä. Kun pakotat Googlen botin suorittamaan megatavun verran renderöintilogiikkaa, häviät pelin välittömästi. Asiakkaidemme tulokset puhuvat puolestaan: tyhjä rivi on usein paras koodirivi.

2 MB raja ja ryömintäbudjetin varastavat AI-botit

Googlebot ei rämmi roskassa. Uusimpien dokumentaatioiden mukaan Googlebot käsittelee HTML-dokumentista vain ensimmäiset kaksi megatavua pakkaamatonta koodia. Moni luulee, että Brotli-pakkaus pelastaa heidät, mutta he ovat väärässä. Google purkaa gzip- ja Brotli-tiedostot ensin, ja jos paljastuva raaka-HTML ylittää 2 megatavua, lukeminen yksinkertaisesti katkaistaan. Sivun pohjalla oleva arvokas Schema-markup ja sisäiset linkit jäävät täysin indeksoimatta.

Kaiken lisäksi tekoäly-yhtiöiden raapijabotit (kuten GPTBot ja ClaudeBot) varastavat Googlelta elintärkeää kapasiteettia. Nämä botit spämmäävät palvelintasi tuhansilla pyynnöillä. Kun palvelin hidastuu, Googlebotin algoritmi päättelee sivuston olevan ylikuormitettu ja kuristaa automaattisesti omaa ryömintätaajuuttaan (Crawl Rate Limiting). Ratkaisemme tämän pystyttämällä Cloudflaren WAF-palomuuriin räätälöidyt säännöt, jotka pudottavat AI-botit armotta reitiltä. Estämällä roskaliikenteen maksimoimme palvelimen TTFB:n (Time to First Byte) nimenomaan Googlebotille.

DOM-aikakatkaisut ja Layout Thrashing

Monet suositut sivunrakentajat (kuten Elementor tai Divi) luottavat raskaaseen Flexbox-sisäkkäisyyteen. Tämä ”div-keitto” räjäyttää DOM-solmujen määrän. Google käyttää Web Rendering Service (WRS) -moottoriaan, eli päätöntä Chromiumia, sivustojen piirtämiseen. Jos DOM on liian syvä, WRS törmää V8-muistipiikkeihin ja prosessorin aikakatkaisuihin.

Koodaamme layoutit uusiksi CSS Subgrid -arkkitehtuurilla. Se litistää DOM-rakenteen yhdeksi ainoaksi tasoksi ilman keinotekoisia kääre-divejä. Samalla korjaamme surkean JavaScriptin aiheuttaman Layout Thrashing -ilmiön. Jos JS muuttaa DOMia ja lukee sen mittoja välittömästi perään (forced synchronous layout), Chromium joutuu piirtämään näkymän satoja kertoja sekunnissa. Tämä ajaa Googlen renderöintikoneen umpikujaan, jolloin se hylkää sivun täysin ja jättää dynaamisen sisällön indeksoimatta.

Edgen HTTP-otsakkeet: Hakkerointia ryömintäjonoon

Normaalisti Googlebot odottaa, että WordPress on suorittanut hitaat PHP-kyselynsä ennen kuin se alkaa purkaa HTML-koodia etsiäkseen kriittisiä CSS- tai kuvatiedostoja. Ohitamme tämän pullonkaulan Cloudflare Edge Workereilla. Injektoimme HTTP-vastauksen otsakkeisiin suoraan Link: <tyyli.css>; rel=preload -komennon. Koska Worker toimii ”edgellä”, Googlebot saa tiedon ladattavista resursseista millisekunteissa HTTP-otsakkeista, ennen kuin WordPress on edes herännyt. Tämä pakottaa Chromiumin ryömintäjonon lataamaan ydinresurssit reaaliajassa.

Chromiumin piirtomoottorin manipulointi (LCP)

Core Web Vitals -metriikoiden pyhä Graal on LCP (Largest Contentful Paint). Kun LCP-elementtinä on suuri pääkuva, manipuloimme Chromiumin piirtomoottoria yhdistämällä verkko- ja renderöintitason ohjeet:

  • fetchpriority=”high”: Pakotamme selaimen verkkotason siirtämään kuvan bittivirran jonon ohi.
  • decoding=”sync” tai ”async”: Asiantuntijat taistelevat tästä. async siirtää purkamisen taustasäikeelle (estää pääsäikeen jäätymisen), mutta kaikkein äärimmäisimmissä sekunnin murto-osan optimoinneissa pääkuvalle jätetään synkroninen purku. Näin selaimeen iskee pakollinen pysähdys, ja kuva piirtyy ruutuun heti ilman taustasäikeen viivettä.

Jos LCP on tekstiä, verkkoon ei ladata massiivisia Megatavun WOFF2-tiedostoja. Käytämme Python-pohjaista pyftsubset-työkalua. Reivimme fontista irti kaiken turhan ja jätämme vain sivulla aidosti käytettävät merkit. Pudotamme tiedostokoon 90 prosenttia. Kun teksti ilmestyy näkyviin nopeammin, LCP on pelastettu.

Tulevaisuus on prerenderöinti

Vaikka uusi HTTP/3-protokolla ja QUIC poistavat Head-of-Line -blokkauksen, totuus on, että Googlebot ei vielä edes ryömi HTTP/3:n yli. Käyttäjäkokemuksen kannalta otamme kuitenkin kaiken irti uudesta Speculation Rules API:sta. Injektoimme sivulle JSON-sääntöjä, jotka ohjeistavat selainta lataamaan ja renderöimään taustalla kokonaisia alasivuja jo silloin, kun käyttäjä vasta vie hiiren linkin päälle. Navigaatio muuttuu reaaliaikaiseksi, ohittaen Single Page Application -arkkitehtuurin asettamat taakat.

Puhdas koodi ei ole estetiikkaa. Se on puhdasta matematiikkaa ja armotonta resurssienhallintaa. Karsimme kaiken, ohitamme WordPressin kankeuden edgellä ja syötämme Googlelle vain puhtainta mahdollista dataa.