Sivustosi latautuu 4 sekuntia, ja kävijä poistuu. Kuulostaako tutulta?

Googlen vuoden 2023 tutkimuksen mukaan välittömän poistumisen todennäköisyys kasvaa 32%, kun latausaika pitenee yhdestä kolmeen sekuntiin. Yksi usein huomiotta jäävä hidastelun pääsyy on liialliset HTTP-pyynnöt. Ne eivät erotu joukosta kuten raskaat kuvat tai heikko hosting, mutta niitä kertyy kymmenittäin ja ne syövät yhdessä sekunteja.

Käydään läpi, mitä nämä pyynnöt ovat, miten ne löydetään vesiputousanalyysillä GTmetrixissä ja ennen kaikkea, miten niiden määrää vähennetään vahingoittamatta sivustosi toiminnallisuutta.

💡 Nopea yleiskatsaus:

• Avaa GTmetrix, liitä sivustosi URL ja siirry Waterfall-välilehdelle nähdäksesi jokaisen pyynnön koon ja latausajan
• Suodata pyyntöjä plugins- ja themes-kansioiden mukaan löytääksesi lisäosat, jotka lataavat skriptejä kaikilla sivuilla turhaan
• Käy läpi 5 tarkistuspistettä: turhat kuvat, yhdistelemättömät CSS/JS-tiedostot, lisäosat, joissa on globaali lataus, raskaat lisäosat ja puuttuva lazy loading
• Tehtyäsi muutoksia aja testi uudelleen ja vertaa pyyntöjen määrää ennen ja jälkeen

Mitä HTTP-pyynnöt ovat ja miksi ne hidastavat sivustoasi

Kun selain avaa sivun, se ei vastaanota valmista kuvaa kerralla. Se tarvitsee HTML-rungon, tyylitiedostot, jokaisen skriptin, fontit, kuvat, ja jokaista elementtiä varten selain lähettää erillisen HTTP-pyynnön palvelimelle.

Osa pyynnöistä menee omalle palvelimellesi (sisäiset: kuvat mediakirjastosta, teema, lisäosat). Toiset menevät ulkoisiin palveluihin (Google Analytics, YouTube-upotukset, mainosskriptit). Selain asettaa ne jonoon ja lataa ne.

Yhteys on yksinkertainen: enemmän pyyntöjä tarkoittaa pidempiä latausaikoja. Mutta kaikki pyynnöt eivät ole samanarvoisia. Pieni seurantaskripti latautuu 20 ms:ssa, kun taas optimoimaton 500 kt:n kuva voi roikkua puoli sekuntia. Tavoitteena ei siis ole vain "vähentää määrää", vaan poistaa tarpeettomat ja keventää jäljelle jääviä.

Käytännössä ero on huomattava: portfoliosivusto puhtaalla teemalla tekee 18 pyyntöä ja avautuu heti. Suuri uutisportaali, kuten New York Times, tekee yli 200 pyyntöä, joista puolet on mainos- ja seurantaskriptejä. Sinun sivustosi on jossain siltä väliltä, ja sitä määrää voidaan vähentää.

Miten analysoida HTTP-pyyntöjä: vesiputous GTmetrixissä

Selkein tapa nähdä HTTP-pyynnöt on vesiputouskaavio (cascade). Se näyttää jokaisen pyynnön omana rivinään: mistä se tulee, kuinka paljon se painaa, milloin se alkoi latautua ja kuinka kauan se kesti.

Työkaluja, jotka näyttävät vesiputouksia:

• Sisäänrakennettu Chrome DevTools (Network-välilehti), ilmainen mutta vain omalle selaimesi
• GTmetrix, ilmainen taso, testaus eri sijainneista, selkeä käyttöliittymä
• Pingdom Tools, samankaltainen kuin GTmetrix, eri testauspisteet
• WebPageTest, maksimaalinen yksityiskohtaisuus mutta monimutkaisempi aloittaa

Katsotaan esimerkkinä GTmetrixiä. Liitä URL, aja testi. Tuloksista löydät Waterfall-välilehden, joka on vesiputous:

Itse kaavio näyttää tältä:

Mitä sarakkeet tarkoittavat:

• URL, tiedoston polku. Tästä näet, mikä lisäosa tai teema lisäsi pyynnön
• Domain, oma palvelimesi vai ulkoinen. Näet heti, kuinka paljon ladataan ulkopuolelta
• Size, tiedoston paino. Raskaat pyynnöt iskevät nopeuteen kovemmin
• Timeline, milloin pyyntö alkoi ja kuinka kauan se kesti. Koko ei ole ainoa merkitsevä asia: ketjun alussa oleva tiedosto blokkaa kaiken, mikä tulee sen jälkeen

Klikkaa kaavion yläpuolella olevaa hakukenttää ja kirjoita wp-content/plugins nähdäksesi vain lisäosien pyynnöt. Alla olevassa esimerkissä Lightweight Social Fonts -lisäosa lisää fonttipyynnön fontello.woff, kooltaan 22,9 kt:

Jos suodatat themes-hakusanalla, näet teemojen pyynnöt. GeneratePress esimerkiksi tuottaa vain 4 pyyntöä, mikä on hyvä merkki kevyestä teemasta:

Käy lista läpi ja kysy itseltäsi: "Pitääkö tämän lisäosan todella latautua jokaisella sivulla?" Usein vastaus on ei. Käsittelemme seuraavaksi, mitä asialle voi tehdä.

5 Tapaa vähentää HTTP-pyyntöjä WordPressissä

Vesiputousanalyysin jälkeen sinulla on lista pyynnöistä käsissäsi. Nyt käymme läpi konkreettiset toimenpiteet niiden vähentämiseksi.

1. Poista tarpeettomat ja valmistelemattomat kuvat

Jokainen kuva = yksi HTTP-pyyntö. Jos sivulla on 15 kuvaa ja niistä 5 on koristeellisia tai tuplakappaleita, voit poistaa 5 pyyntöä menettämättä mitään olennaista. Välttämättömien kuvien kohdalla sääntö on eri: pakkaa ja skaalaa ne vastaamaan näyttökokoa. 2500 pikselin levyinen kuva 700 pikselin levyiseen lohkoon upotettuna lataa 5 kertaa enemmän dataa kuin on tarpeen.

Käytännössä yhdistelmä auttaa: manuaalinen karsinta (poista tarpeeton) + pakkauslisäosa. Tämän hetken vaihtoehtoja ovat ShortPixel, Imagify, Smush. Ne pakkaavat kuvat medialataukseen siirrettäessä ja voivat pakata uudelleen jo olemassa olevat kuvat.

2. Yhdistä CSS ja JavaScript

Teema ja jokainen lisäosa tuovat mukanaan omat tyyli- ja skriptitiedostonsa. Jos sinulla on aktiivinen teema, 10 lisäosaa ja pari ulkoista palvelua, voit helposti kerätä 30-40 erillistä CSS/JS-tiedostoa. Jokainen niistä vaatii oman HTTP-pyyntönsä.

Tekniikkaa kutsutaan yhdistämiseksi, ja siihen liittyy yleensä myös minifiointi (välilyöntien ja kommenttien poistaminen koodista). Useimmat suorituskykylisäosat tekevät molemmat:

• WP Rocket, maksullinen lisäosa, yhdistää ja minifioi CSS/JS:t muutamalla klikkauksella
• Autoptimize, ilmainen, pelkkä yhdistäminen ja minifiointi

Tärkeää: kun olet ottanut yhdistämisen käyttöön, käy läpi sivustosi pääsivut ja varmista, ettei ulkoasu ole hajonnut. Joskus skriptit aiheuttavat ristiriitoja yhdistettäessä, jolloin jätät kyseisen tiedoston yhdistämisen ulkopuolelle.

3. Estä lisäosia latautumasta siellä, missä niitä ei tarvita

Yhteydenottolomake on vain yhteystietosivulla. Mutta sen CSS ja JS latautuvat usein koko sivustolla, mikä tarkoittaa 2-3 ylimääräistä pyyntöä jokaisella sivulla, jolla lomaketta ei ole. Esimerkiksi Contact Form 7 lataa skriptit maailmanlaajuisesti oletuksena.

Jos lisäosa sallii sen, on kaksi reittiä:

• Korvaa se optimoidummalla vaihtoehdolla, joka ei lataa resursseja koko sivuston laajuisesti
• Pidä lisäosa, mutta hallitse skriptien lataamista Perfmattersin avulla, jossa on skriptien hallintatyökalu, jolla voit estää lisäosan CSS/JS-tiedostot kaikilta muilta sivuilta paitsi siellä, missä niitä oikeasti tarvitaan

Tulos: samat 2-3 pyyntöä, mutta vain yhteystietosivulla, ei koko sivustolla.

4. Korvaa raskaat lisäosat kevyemmillä vaihtoehdoilla

Kun suodatat vesiputouskaaviota hakusanalla plugins, näet, mitkä lisäosat tuottavat eniten pyyntöjä. Jos yksi lisäosa lisää 8 skriptiä ja tyylitiedostoa, kun taas sen vaihtoehto pärjää kahdella, vaihto leikkaa 6 HTTP-pyyntöä.

Esimerkkejä käytännön korvauksista:

• Revolution Slider (raskas) → teeman kevyt kansilohko tai MetaSlider
• Sivunrakentaja, jossa on kymmeniä skriptejä → natiivi Gutenberg-lohkoeditori
• Some-laajennus, jossa on ulkoisia API-kutsuja → staattiset linkki-ikonit

Käy läpi jokainen lisäosa vesiputouslistalta: onko se edes käytössä? Jos lisäosaa ei ole päivitetty yli vuoteen tai toiminnallisuutta ei tarvita, poista se kokonaan.

5. Ota käyttöön lazy loading

Lazy loading lykkää näkyvän ruutualueen alapuolella olevien kuvien ja iframe-elementtien lataamista. Vierailija avaa sivun, ja vain se, minkä hän näkee, latautuu. Loput hakeutuvat sitä mukaa, kun hän vierittää.

WordPressin versiosta 5.5 lähtien loading="lazy"-attribuutti lisätään kuviin automaattisesti. Tämä riittää perusskenaarioon. Jos tarvitset aggressiivisempaa lazy loadingia (iframeille, taustakuville, videoille), käytä Perfmattersia, WP Rocketia tai ilmaista LazyLoad by WP Rocketia.

Video: WordPressin HTTP-pyynnöt 5 minuutissa

Lyhyt video aiheesta, diagnoosista pyyntöjen vähentämiseen ilman lisäosia:

⁉️🤔 Usein kysytyt kysymykset

Mikä on normaali määrä HTTP-pyyntöjä WordPressille?

Yleispätevää lukua ei ole. Siisti sivusto kevyellä teemalla ja 5-7 lisäosalla mahtuu 25-40 pyyntöön. Sivusto, jossa on sivunrakentaja, mainoskoodeja ja tusina lisäosaa, saattaa tehdä 80-120 pyyntöä. Älä tuijota absoluuttista lukua vaan trendiä: jos pyyntöjä oli 90 ja niitä on nyt 55, se on hyvä tulos.

Vaikuttavatko ulkoiset pyynnöt (Google Fonts, Analytics) nopeuteen?

Kyllä vaikuttavat, mutta eri tavalla. Ulkoinen pyyntö Google Fontsiin lisää 1-2 pyyntöä, mutta ne kulkevat Googlen CDN:n kautta ja latautuvat nopeasti. Suurin ongelma on renderöinnin estyminen: kunnes fontti latautuu, selain ei välttämättä näytä tekstiä. Ratkaisu: esilataa fontit preload-määreellä tai hostaa fontit paikallisesti.

Onko kaikki CSS ja JS pakko yhdistää yhdeksi tiedostoksi?

Ei aina. Kaikkien skriptien yhdistäminen yhdeksi tiedostoksi antaa yhden pyynnön, mutta iso tiedosto latautuu hitaammin. Nykyaikainen HTTP/2 pystyy lataamaan useita tiedostoja rinnakkain, joten 3-4 tiedostoa, kukin 30 kt, saattaa latautua nopeammin kuin yksi 120 kt:n tiedosto. Optimaalisesti yhdistä kriittinen CSS (se, mitä tarvitaan ensimmäisen ruudun renderöintiin) ja jätä ei-kriittiset skriptit erilleen defer-määreen kanssa.

Entä jos ulkoasu hajoaa CSS:n yhdistämisen jälkeen?

Jätä ongelmallinen tiedosto yhdistämisen ulkopuolelle. WP Rocketissa ja Autoptimizessa voit lisätä skriptin tai tyylin URL-osoitteen poissulkulistalle. Suorita sen jälkeen testi uudelleen. Yhden tiedoston menettäminen 15 pyynnön joukosta on tuskin havaittavissa.

Voiko pyyntöjä vähentää ilman lisäosia?

Voi. Skriptien manuaalinen poistaminen käytöstä functions.php-tiedoston kautta antaa täyden hallinnan, mutta vaatii WordPressin hookien ymmärtämistä. Useimmille sivuston omistajille WP Rocket tai Perfmatters on yksinkertaisempi ja turvallisempi: ne eivät anna sinun poistaa käytöstä skriptiä, joka on kriittinen toiminnan kannalta.

Aika siivota pyyntösi

HTTP-pyyntöjä ei korjata kertaluonteisesti. Asenna uusi lisäosa, vaihda teema, lisää mainoskoodi, ja uusia pyyntöjä ilmestyy. Käy parin kuukauden välein GTmetrixissä, avaa Waterfall ja vertaa edelliseen kertaan.

Jos et tiedä juuri nyt, kuinka monta pyyntöä sivustosi tekee, avaa GTmetrix, liitä URL-osoite ja klikkaa "Start Test". Hetken kuluttua näet todellisen tilanteen. Seuraa sitten tämän artikkelin ohjeita. Jokainen poistettu pyyntö vie sivustoasi lähemmäs 1-2 sekunnin latausaikaa.