Teitkö muutoksia verkkosivuillesi, mutta ne eivät tule näkyviin? Syypää saattaa löytyä välimuistista.
Toisinaan saamme puhelun asiakkaalta, joka ihmettelee, miksemme ole toteuttaneet sovittua muutosta verkkosivulle. Ratkaisu ongelmaan löytyy yleensä helposti: asiakkaan selaimen välimuisti sisältää vanhentunutta, päivittämätöntä sisältöä.
Välimuistin tyhjentämisen jälkeen tehdyt muutokset ladataan palvelimelta uudelleen. Muutokset tulevat näkyviin myös asiakkaalle, joka voi jatkaa tyytyväisenä päiväänsä.
Mitä tämä siis käytännössä tarkoittaa? Tässä artikkelissa kerron, miten välimuisti toimii ja miten siitä pidetään huolta. Välimuisti kun on hyödyllinen ja kätevä apuväline.
Kun menet tietokoneesi tai puhelimesi selaimella ensimmäisen kerran jollekin verkkosivustolle, lähetät sivupyynnön sivuston käyttämälle palvelimelle. Palvelin vastaa lähettämällä ajantasaiset tiedostot selaimeen. Sivuston sisällöstä riippuen vastaus sisältää suuren määrän tiedostoja, kuten koodia ja valokuvia. Nämä tiedot jäävät selaimesi välimuistiin.
Ilman välimuistia selaimesi joutuisi lataamaan nämä samat tiedostot uudelleen joka kerta, kun palaat sivustolle. Kuvan esimerkissä näet elokuviin keskittyneeltä IMDB-sivustolta ladatut tiedot.
Ladattujen tiedostojen kokonaismäärä on ympyröity punaisella. 2,7 megatavua ladattuja tiedostoja pääsivulta ei sinänsä ole paljon, mutta jos sivu olisi vaikka kuvagalleria isoilla valokuvilla, määrä voisi olla useita megatavuja enemmän. Huomioi myös 2,7 megatavun lataamiseen kuluva aika: 46,25 sekuntia.
Mitä hyötyä välimuistista on?
Suomessa nettiyhteydet ovat nopeat ja yleensä siirtorajattomat. Jos verkkosivuille kuitenkin tulee liikennettä muualta maailmasta, tilanne voi muuttua. Verkkosivujen ylläpitäjän on ajateltava palvelimen kustannuksia. Yleensä verkkosivutilan palveluntarjoajat ovat määritelleet erilaisia paketteja, joihin sisältyvä tiedonsiirtomäärä vaihtelee hinnan mukaan. Vilkasliikenteisillä sivustoilla siirtorajat täyttyisivät helposti, jos jokainen tiedosto ladattaisiin palvelimelta aina uudelleen. Tiedostojen lataaminen palvelimelta on myös aina huomattavasti hitaampaa kuin välimuistista lataaminen.
Kuvan esimerkissä näet samaiselta IMDB-sivustolta ladatut tiedostot, kun välimuisti on käytössä.
Kun palaat sivulle esimerkiksi seuraavana päivänä ja lataat jälleen saman sivun, on osa tiedostoista tällä kertaa jo ladattuna selaimesi välimuistissa. Nyt ladattujen tiedostojen koko on vain 295 kt. Kuvan oikeasta laidasta löytyy tieto, että tiedostot tulevat välimuistista. Myös lataamiseen kuluva aika puolittuu, kun tiedostoja ei tarvitse ladata uudelleen palvelimelta.
Vain muuttuneet tiedostot ladataan palvelimelta, muut tiedostot ladataan suoraan välimuistista. Välimuistista on siis paljon hyötyä. Suomessa käyttäjälle näkyy ensisijaisesti sivuston nopeampi latautuminen. Lisäksi välimuisti säästää mahdollista verkon siirtorajoitusta ja palvelimen kustannuksia.
Miksi verkkosivuille tehdyt muutokset eivät näy?
Mistä alussa mainittu ongelma muutosten näkyvyydessä sitten johtuu? Käyttäjän selain ei aina huomaa, että tiedostot ovat muuttuneet, tai muutos voi olla niin pieni, ettei selain ymmärrä sitä. Muutama keino palvelimen välimuistin asetuksissa auttaa:
- Tiedostojen nimen muuttaminen
- Palvelimen määrittelemä vanhenemisen aikarajoitus, joka voi olla pisimmillään yksi vuosi
- Sivupyynnön mukana kulkeva “muokattu viimeksi” -aikaleima, jota verrataan palvelimella olevaan aikaleimaan.
Verkkosivujen kehittäjillä on usein tapana käyttää palvelimelle viedyissä tiedostonimissä automaattisesti lisättävää, satunnaisgeneroitua tunnistetta eli hashiä, jolloin tiedoston nimi muuttuu aina muutoksia tehtäessä. Esimerkiksi tiedosto nimeltä main.min.js muuttuu main.b4jg832id2r.min.js -nimiseksi. Tämä on tehokas keino pakottaa selain huomaamaan muutokset.
Aina ei kuitenkaan ole mahdollista hyödyntää tehokkaasti optimoitua kehitysympäristöä, jossa olisi mahdollisuus hasheille. Kuinka siis tyhjentää välimuisti ja pakottaa silti selain lataamaan uusin versio sivusta?
Helpoin ja nopein tapa saada muutokset näkyviin halutulla sivulla on siirtyä sivulle ja käyttää näppäinyhdistelmää, jolla selain pakotetaan hylkäämään kyseisen sivun tiedostot välimuistista ja korvaamaan ne uusilla versioilla palvelimelta. Näppäinyhdistelmä vaihtelee käyttöjärjestelmän mukaan:
Windows:
Ctrl + F5 tai Ctrl + päivitä-nappi
MacOS:
Shift + ⌘ Cmd + R tai ⇧ Shift + päivitä-nappi
Safari-selain:
Option + Cmd + E
Jos näistä ohjeista huolimatta et saa hommaa toimimaan, me Redlandin devaajat olemme aina valmiina auttamaan! Ota yhteyttä, niin jutellaan lisää!
