Teit testin GTmetrixissä, ja siinä se on punaisella: "Add Expires Headers". Tutun näköistä. Sivusto on WordPress, hosting Apachella, ja nopeustesti vaatii, että määrität selaimen välimuistin jonkin .htaccessin kautta.

Virhe ei ole kriittinen, mutta se on ärsyttävä. Ilman Expires-otsikoita selain lataa kuvat, CSS:t ja skriptit palvelimelta uudelleen jokaisella käynnillä. Kerta toisensa jälkeen. Vaikka mikään ei olisi muuttunut. Nopeus laskee, käyttäjät odottavat, Google pudottaa sijoituksia.

Voit korjata tämän viidessä minuutissa. Kaksi tapaa: manuaalisesti koodilla.htaccessiin tai lisäosalla kahdella klikkauksella. Alla molemmat, valmiin koodin ja asetusten kera.

💡 Pikakatsaus:

• Ymmärrä, miten Expires- ja Cache-Control-otsikot hallitsevat selaimen välimuistia
• Lisää valmis koodi.htaccessiin: kopioi, liitä, tarkista
• Asenna AEH Speed Optimization -lisäosa minuutissa, jos et halua koskea koodiin
• Määritä optimaaliset välimuistijaksot kuville, CSS:lle, JS:lle ja fonteille

Miten Expires-otsikot toimivat

Kun kävijä saapuu sivustolle, selain lataa kymmeniä tiedostoja: HTML-sivun, CSS-tyylit, JavaScriptin, fontit, kuvakkeet, kuvat. Jokainen tiedosto on erillinen HTTP-pyyntö palvelimelle. Mitä enemmän pyyntöjä, sitä pidempi latausaika.

Expires-otsikko kertoo selaimelle: "tämä tiedosto ei muutu, tallenna se välimuistiin äläkä kysy uudelleen ennen tiettyä päivämäärää." Toistuvilla käynneillä selain hakee tiedostot paikallisesta välimuistista sen sijaan, että noutaisi ne palvelimelta uudelleen. Tulos: kymmeniä pyyntöjä vähemmän ja nopea lataus.

Moderni vastine on Cache-Control-otsikko max-age-direktiivillä. Se asettaa välimuistin eliniän sekunteina, ei tiettynä päivämääränä, ja sitä pidetään nyt ensisijaisena. Suosittelemme molempien otsikoiden määrittämistä samanaikaisesti: Expires vanhoille selaimille ja välityspalvelimille, Cache-Control kaikelle modernille. Molemmat kirjoitetaan samaan.htaccess-lohkoon.

Tapa 1: koodi.htaccessiin

Suorin reitti on lisätä välimuistisäännöt suoraan Apachen asetustiedostoon. .htaccess-tiedosto sijaitsee sivuston juuressa (samassa paikassa kuin wp-config.php). Jos et näe sitä, ota piilotettujen tiedostojen näyttö käyttöön FTP-ohjelmassasi tai hostingin tiedostonhallinnassa.

Ennen muokkausta lataa tiedostosta kopio tietokoneellesi. Syntaksivirhe.htaccessissa voi kaataa sivuston 500-virheellä, varmuuskopion avulla voit palauttaa tilanteen sekunnissa.

Avaa .htaccess editorissa ja lisää seuraava lohko ennen riviä # BEGIN WordPress:

1
    # Browser caching: Expires and Cache-Control headers
2
<IfModule mod_expires.c>
3
    ExpiresActive On
4
 
5
    # Images
6
    ExpiresByType image/jpg "access plus 1 year"
7
    ExpiresByType image/jpeg "access plus 1 year"
8
    ExpiresByType image/gif "access plus 1 year"
9
    ExpiresByType image/png "access plus 1 year"
10
    ExpiresByType image/webp "access plus 1 year"
11
    ExpiresByType image/avif "access plus 1 year"
12
    ExpiresByType image/svg+xml "access plus 1 year"
13
    ExpiresByType image/x-icon "access plus 1 year"
14
 
15
    # CSS and JavaScript
16
    ExpiresByType text/css "access plus 1 month"
17
    ExpiresByType application/javascript "access plus 1 month"
18
 
19
    # Fonts
20
    ExpiresByType font/woff2 "access plus 1 year"
21
    ExpiresByType font/woff "access plus 1 year"
22
 
23
    # PDF and other documents
24
    ExpiresByType application/pdf "access plus 1 month"
25
 
26
    # Default
27
    ExpiresDefault "access plus 2 days"
28
</IfModule>
29
 
30
    # Cache-Control headers for modern browsers
31
<IfModule mod_headers.c>
32
    &lt;FilesMatch &quot;\.(jpg|jpeg|png|gif|webp|avif|svg|ico|woff2|woff)$&quot;&gt;
33
        Header set Cache-Control "max-age=31536000, public"
34
    </FilesMatch>
35
    &lt;FilesMatch &quot;\.(css|js)$&quot;&gt;
36
        Header set Cache-Control "max-age=2592000, public"
37
    </FilesMatch>
38
</IfModule>

Mitä tässä tapahtuu. Ensimmäinen lohko <IfModule mod_expires.c> aktivoi Expires-moduulin ja asettaa säilytysajat kullekin tiedostotyypille. Yksi vuosi kuville ja fonteille, ne eivät juuri koskaan muutu. Yksi kuukausi CSS:lle ja JavaScriptille, niitä päivitetään ajoittain.

Toinen lohko <IfModule mod_headers.c> lisää modernin Cache-Controlin samoilla ajanjaksoilla mutta sekunteina: 31536000 = yksi vuosi, 2592000 = yksi kuukausi.

Tärkeää: mod_expires- ja mod_headers-moduulien on oltava käytössä palvelimella. Useimmilla Apache-hostingeilla ne ovat oletuksena aktiivisia: tuki ottaa ne käyttöön alkuasennuksen yhteydessä. Jos välimuisti ei toimi tallennuksen jälkeen, kirjoita hostingin tukeen: "ota käyttöön mod_expires ja mod_headers."

Liittämisen jälkeen tallenna tiedosto ja lataa se takaisin sivuston juureen. Avaa sivusto selaimessa, siirry DevToolsiin (F12) → Network → päivitä sivu. Klikkaa mitä tahansa CSS- tai JS-tiedostoa, Headers-välilehdellä pitäisi näkyä Expires ja Cache-Control nollasta poikkeavilla arvoilla.

Aja GTmetrix uudelleen, virheen pitäisi olla poissa.

Tapa 2: AEH Speed Optimization -lisäosa

Jos et halua kaivella.htaccessia manuaalisesti, on olemassa lisäosa. Sen nimi oli aiemmin yksinkertaisesti Add Expires Headers, nykyään se on kasvanut AEH Speed Optimizationiksi. Välimuistiotsikoiden lisäksi se osaa CSS:n minifioinnin, kuvien laiskalatauksen ja pakkauksen.

Asennusvaiheet:

• Lisäosat → Lisää uusi, hae "AEH Speed Optimization"

• Klikkaa Asenna nyt, sitten Ota käyttöön

• Siirry kohtaan Asetukset → AEH Speed Optimization

• Cache Settings -välilehdellä valitse tiedostotyypit ja aseta säilytysajat päivinä

• Klikkaa Lähetä

Lisäosa kirjoittaa säännöt.htaccessiin itse, sinun ei tarvitse kirjoittaa riviäkään koodia. Useimmille sivustoille ilmainen versio riittää. Pro-versio lisää Gzip-pakkauksen, ulkoisten resurssien välimuistituksen (Google-fontit, CDN-skriptit) ja mukautetut tiedostotyypit.

🔗 AEH Speed Optimization WordPress.orgissa

Jos sinulla on jo välimuistilisäosa, kuten W3 Total Cache tai WP Rocket, et tarvitse erillistä Expires-lisäosaa. Mikä tahansa vakavasti otettava välimuistilisäosa osaa lisätä Expires- ja Cache-Control-otsikot.htaccessiin automaattisesti. Siirry lisäosasi asetuksiin ja tarkista, että Browser Cache -välilehti on aktiivinen.

Mitä välimuistitusaikaa kannattaa käyttää

Yleispätevää vastausta ei ole, ajanjakso riippuu siitä, kuinka usein muutat tiettyä tiedostotyyppiä.

Yleissääntö: mitä vakaampi tiedosto, sitä pidempi ajanjakso. Kuville yksi vuosi on standardi. CSS:lle ja JS:lle yksi kuukausi on kohtuullinen kompromissi nopeuden ja tuoreuden välillä.

Jos kehität sivustoa aktiivisesti ja tyylit muuttuvat joka viikko, aseta CSS:lle yksi viikko, ei kuukautta. Kun saat muokkaukset valmiiksi, palaa yhteen kuukauteen.

⁉️🤔 Yleisiä kysymyksiä

Lisäsin koodin.htaccessiin, mutta GTmetrix näyttää edelleen virhettä. Miksi?

Yleisin syy on, että mod_expires- tai mod_headers-moduulit eivät ole käytössä palvelimella. Kirjoita hosting-tukeen ja pyydä aktivoimaan molemmat moduulit. Toinen syy: lisäsit koodin # BEGIN WordPress-merkinnän jälkeen, et ennen sitä. WordPress ylikirjoittaa kaiken, mikä tulee sen merkinnän jälkeen. Kolmas syy: välimuistilisäosa (W3 Total Cache, WP Rocket) hallinnoi jo.htaccessia ja ylikirjoitti sääntösi omillaan. Tässä tapauksessa määritä Browser Cache itse lisäosan sisällä, älä manuaalisesti.

Mikä ero on Expires- ja Cache-Control-otsikoilla?

Expires asettaa tietyn päivämäärän ja kellonajan ("voimassa 15. kesäkuuta 2027 asti"). Cache-Control max-age-direktiivillä asettaa keston sekunteina pyyntöhetkestä ("voimassa 31536000 sekuntia"). Cache-Control on joustavampi ja sillä on etusija: jos molemmat on asetettu, selain noudattaa Cache-Controlia. Suosittelemme kirjoittamaan molemmat maksimaalisen yhteensopivuuden varmistamiseksi vanhojen ja uusien asiakasohjelmien kanssa.

Sivusto on Nginxillä,.htaccess ei toimi. Mitä tehdä?

.htaccess-tiedosto on Apachen asetustiedosto. Nginx jättää sen huomiotta. Nginxillä välimuistisäännöt lisätään sivuston asetustiedoston server-osioon expires-direktiivillä. Jos sinulla on Nginx (hostingit kuten Kinsta, Cloudways), käytä AEH Speed Optimization -lisäosaa: se toimii millä tahansa verkkopalvelimella, koska se hallinnoi otsikoita PHP:n kautta, ei palvelimen asetusten kautta.

Tarvitseeko Expires-otsikot määrittää, jos käytän jo CDN:ää?

Kyllä. CDN (Cloudflare, BunnyCDN) tallentaa sisältöä välimuistiin palvelimillaan ympäri maailmaa, mutta selaimen välimuisti on erillinen kerros. Oikein määritetyt Expires- ja Cache-Control-otsikot vähentävät pyyntöjä jopa CDN:lle: selain ei mene verkkoon lainkaan hakemaan tiedostoa, jos sen paikallinen kopio on edelleen tuore. Kaksi välimuistikerrosta, CDN + selain, toimivat yhdessä, eivät korvaa toisiaan.

Aiheuttaako AEH Speed Optimization -lisäosa ristiriitoja välimuistilisäosani kanssa?

Voi aiheuttaa, jos molemmat yrittävät kirjoittaa sääntöjä.htaccessiin. Ennen AEH Speed Optimizationin asennusta ota Browser Cache pois käytöstä päävälimuistilisäosassasi, tai päinvastoin, pidä yksi lisäosa, joka hallinnoi sekä sivuvälimuistia että selainvälimuistia. WP Rocket ja W3 Total Cache osaavat tehdä kaiken suoraan paketista, erillistä Expires-lisäosaa ei tarvita niiden kanssa.

Kannattaako Expires määrittää manuaalisesti vai riittääkö lisäosa?

Jos työskentelet varmasti FTP:n kanssa etkä pelkää koodieditoria, manuaalinen määritys.htaccessin kautta antaa täyden hallinnan eikä lisää ylimääräistä lisäosaa hallintapaneeliin. Yllä oleva koodi: kopioi, liitä, ja asia on hoidettu.

Kaikille muille AEH Speed Optimization -lisäosa ratkaisee tehtävän ilman kirjoitusvirheen riskiä asetustiedostossa. Lisäksi se tarjoaa minifioinnin ja laiskalatauksen, jotka myös nopeuttavat sivustoa.

Pääasia on, ettet jätä GTmetrixin virhettä ennalleen. Viisi minuuttia Expires-otsikoiden määrittämiseen antaa huomattavan nopeuslisän, ja nopeus on sekä käyttökokemus että hakukonesijoitukset.