Otamme selaimen välimuistin käyttöön käyttäjän puolella. WordPress Super Cache -laajennus, käytä selaimen välimuistia Käytä selaimen välimuistia yksittäisille tiedostoille
"" optimoidaksesi sivuston työkalun ohjeiden mukaan Google PageSpeed Näkemyksiä. Jokainen verkkosivuston omistaja on kohdannut ongelman, joka liittyy kolmannen osapuolen sivustojen js-skriptien välimuistiin tallentamiseen.
Tämä ei ole niin tärkeä indikaattori optimointia varten, itse asiassa CSS- ja JS-elementit siirretään sivuston ylätunnisteesta alatunnisteeseen, lisäksi jos katsot Googlen resursseja, heillä on ongelmia tämän kohdan kanssa :)
Jos haluat silti optimoida verkkosivustosi tai asiakkaasi tallentamalla välimuistiin esimerkiksi kolmannen osapuolen komentosarjoja. Jos huomaat kauniin numeron analysaattorin laskurilla, seuraa alla olevia vaiheita, jotka vievät muutaman minuutin.
Selaimen elementtien välimuisti
Välimuistin tekeminen eri skripteille, esimerkki otettu Devaka ru -blogista (kirjoitushetkellä)
Esimerkiksi:
/assets/copyright.min.js (ei määritetty viimeistä voimassaolopäivää)
/assets/i/566.jpg (ei määritetty viimeistä käyttöpäivää)
/assets/i/icons.png (ei määritetty viimeistä voimassaolopäivää)
/i/postcomm-left.png (ei määritetty viimeistä käyttöpäivää)
/i/postcomm-right.png (ei määritetty viimeistä käyttöpäivää)
Korjaa ensimmäinen ongelma siirtymällä .htaccess-tiedostoon, joka sijaitsee sivuston juuressa ja lisäämällä tämä koodi aivan alareunaan:
# pakkausteksti, html, javascript, css, xml:
Esimerkkejä kolmannen osapuolen skripteistä
Jos teit kaiken oikein ensimmäisessä vaiheessa, sinun pitäisi nähdä jotain tällaista:
Käytä selaimen välimuistia seuraaviin resursseihin
Tietysti sinulla voi olla vain muutama URL-osoite esimerkiksi mittareita ja analytiikkaa varten, mutta tämä ei ole niin tärkeää, korjausohjeet ovat kaikille samat.
Kolmannen osapuolen elementtien välimuisti
Aluksi artikkelin piti olla omistettu vain näille kohdille, mutta kun tuntui, että kysymyksiä olisi paljon, lisättiin pari kohtaa lisää.
Kolmannen osapuolen resurssin välimuistiaikaan ei voi vaikuttaa, mutta voit tehdä sen verkkoprojektissasi Oikein askel tässä tilanteessa on ladata automaattisesti uusimmat skriptit mittareita, analytiikkaa jne. verkkosivustollesi cronilla (skripti läsnä)
Otetaan nyt asiat järjestykseen!
Vaihe 1. Kopioi luettelo kaikista Google PageSpeedin osoittamista komentosarjoista muistilehtiöön tai suoraan selaimesta.
Vaihe 2. Luo palvelimellesi tiedosto php-laajennuksella ja liitä siihen seuraava koodi:
Huomio! Sinulla ei ole lupaa tarkastella piilotettua tekstiä.
Koodissa on esimerkiksi 3, mutta voit luoda niin monta kohdetta kuin tarvitset, kopioi ja lisää alla tai poista tarpeettomat.
Tällä rivillä muutamme kolmatta arvoa:
Käytä selaimen välimuistia Google PageSpeedille
1. Käsikirjoitus, jonka lataamme verkkosivuillemme
Huomio! Sinulla ei ole lupaa tarkastella piilotettua tekstiä.
2. Polku, johon tiedosto tallennetaan:
Realpath("./js")
Tässä esimerkissä se on js-kansio, ts. tarkka polku on www.site/js/ (sinun on luotava kansio itse ja määritettävä se CHMOD-oikeudet tallennusta varten)
3. Skriptin nimi, jos .js-tunnisteella, niin kirjoitamme sen yhdessä sen kanssa, jos ilman sitä tai jollain muulla, niin teemme kaikki kuten yllä olevassa esimerkissä. Huomioi, että tiedostoissa ei ole samannimistä tiedostoa.
Vaihe 3. Lataa muokattu tiedosto palvelimelle
Vaihe 4. Aseta tiedosto cron for automaattinen päivitys tiedostot
Välttääkseen virheellisen työskentelyn palveluiden kanssa, jos ne tekevät muutoksia komentosarjoihin, cron kirjautuu automaattisesti sisään ja päivittää ne palvelimelleen.
Siirry isännöintipaneeliisi ja valitse CRON-välilehti ja kirjoita komento ja määritä myös aika kerran tunnissa/päivässä tai muulloin.
Wget -q -O - /dev/null http://www..php >/dev/null 2>&1
Älä unohda muuttaa URL-osoitetta, niin komentosyntaksi saattaa olla erilainen, katso esimerkkejä cron-komennoista isännöintiohjeessa tai ota yhteyttä tekniseen tukeen.
Vaihe 5. Muuta JS-polku laskurissa tai komentosarjassa
Jos laskurissa oli polku https://mc.yandex.ru/metrika/watch.js, korvaa se polulla sivuston sisällä, esimerkiksi http://www..js
Siinä se, nyt listalla PageSpeed Insights Sinulla ei pitäisi olla viestejä selaimen välimuistin asettamisesta.
Lataa "Ota selaimen välimuisti käyttöön Google PageSpeedille" -ohjeet arkistosta Et voi ladata tiedostoja palvelimeltamme
Esittelemme hyödyllisen artikkelin "Ota selaimen välimuisti käyttöön Google PageSpeediä varten", jotta voit optimoida sivustosi Google PageSpeedin työkalun neuvojen avulla – kaikki parhaat foorumit, hakkerit, moduulit ja mallit.
Ohje toimii vain, jos apache käsittelee staattisia tiedostoja (asennettu käyttöliittymäksi). Jos nginx on sen edessä, samat toiminnot on suoritettava täysin eri tavalla.
Ensinnäkin muutama sana aiheesta - miksi verkkosivuston resurssien (kuvat, css, html-tiedostot, arkistot ja muut staattiset tiedostot) välimuisti on tarpeen?
Joka kerta, kun vierailija avaa sivustosi, sivun html-koodin lisäksi ladataan myös kaikki sivun suunnitteluun tarvittavat tiedostot (kuvat, css-tyylit, js-skriptit ja niin edelleen).
Tämän seurauksena yksi tiedostosivun avaaminen ei ole yksi pyyntö palvelimelle, vaan kymmenestä satoihin! Jokainen tällainen pyyntö ei ole vain palvelimen kuormitus (mikä on tärkeää), vaan myös lisäaika, jonka käyttäjä voi ladata sivun (mikä on tärkeä indikaattori sivuston laadusta ja käyttäjän helppoudesta käsitellä sitä) .
Esimerkiksi Google PageSpeed Insightsin suosittu sivuston tarkistuspalvelu kirjoittaa aina varoituksen tästä:
Käytä selaimesi välimuistia
Määrittämällä päivämäärän tai vanhenemispäivän staattisille resursseille HTTP-otsikoissa selain lataa aiemmin noudetut resurssit paikalliselta levyltä Internetin sijaan.
Käytä selaimen välimuistia seuraaviin resursseihin://— luettelo ongelmatiedostoista —//
Välimuistin ottaminen käyttöön ei ainoastaan vähennä palvelimen kuormitusta (melkein kaikilla sivuston sivuilla on päällekkäisiä suunnitteluelementtejä, java-skriptejä jne.), kun käyttäjä vierailee uudelleen sivustolla/sivulla, vaan myös vähentää sivun latausaikaa hänen puolellaan. Koska selain ottaa tiedostoja välimuistista lähes salamannopeasti, käyttäjästä tulee tunne, että sivu latautui melkein salamannopeasti!
Ratkaise tämä ongelma luomalla sivuston kansioon tiedosto nimellä .htaccess(pisteen alussa. Tämä on tärkeää!) ja lisää siihen nämä säännöt. Jos tiedosto on jo olemassa, lisää olemassa olevan tiedoston loppuun:
# välimuisti selaimessa käyttäjän puolella
Tämän jälkeen voit tarkistaa tuloksen osoitteessa Google-sivu PageSpeed Insights (jos kaikki on oikein - viesti " Käytä selaimesi välimuistia" merkitään vihreällä ja sijoitetaan kohtaan "Täydelliset säännöt: (lisätietoja)")
Ei toimi, mitä minun pitäisi tehdä?
Jos välimuisti ei toimi, sinun on tarkistettava, onko moduulit asennettu. Tätä varten sinun on luotava tiedosto sivuston kansioon testi.php koodilla:
Jos mod_expires tai mod_headers eivät ole luettelossa, suorita seuraavat komennot palvelinkonsolissa (yhdistetty) vuorotellen ( tämä asentaa / ottaa käyttöön mod_expires, mod_headers):
A2enmod-otsikot a2enmod vanhenee palvelun apache2 uudelleenkäynnistys
Jos sivusto on tavallisessa isännöinnissä, kaikki on monimutkaisempaa. Ota yhteyttä tekniseen tukeen ja selvitä, miksi moduuleja ei ole asennettu ja miten voit kiertää tämän ongelman. Koska isännöitsijä ei asentanut moduuleja, voi olla monia syitä.
👁9 325 katselukertaa.
Tässä artikkelissa tarkastelemme edelleen, kuinka voit nopeuttaa verkkosivuston latautumista. Keskustelimme aiemmin. Tänään opimme, kuinka selaimen välimuisti otetaan käyttöön käyttäjän puolella .htaccess-tiedoston avulla.
Miksi ottaa selaimen välimuisti käyttöön käyttäjän puolella?
Usein ohjelmoijat eivät kiinnitä uutta verkkosivustoa luodessaan juurikaan huomiota nopeuteen, jolla verkkosivusto latautuu selaimessa. Varsinkin jos tätä kohtaa ei ole huomioitu sivuston kehittämisen toimeksiannossa. Ja uuden luomuksen julkaisun jälkeen tämän projektin kehittämiseen ja edistämiseen osallistuva verkkoasiantuntija voi havaita erittäin surullisen kuvan skannaamalla sivuston latausnopeuden Googlen PageSpeed Insightsissa.
Kaukana siitä täydellinen lista ongelmia, joita saatamme kohdata ja jotka hidastavat sivuston latausnopeutta käyttäjän selainpuolella:
Jotkut lukijat saattavat ihmetellä, miksi juuri sinun täytyy ottaa tämä välimuisti käyttöön ja nopeuttaa sivuston latausnopeutta? Loppujen lopuksi sivusto ei toimi huonosti.
Tähän on ainakin kaksi syytä:
- Jos sivuston lataaminen kestää kauan, käyttäjä ei välttämättä odota supertehosteitasi, jotka suunnittelija on tarkoittanut herättämään huomiota, vaan sulkee taideteoksen ja siirtyy yksinkertaisesti kilpailijan sivustolle, joka on ehkä vähemmän värikäs, mutta nopeampi ja reagoivampi. Loppujen lopuksi kukaan meistä ei halua odottaa pitkään. 🙂
- Mitä pidempi sivuston latausnopeus on, sitä pienempi se on. hakukoneet Tekijä: tärkeimmät kyselyt, verrattuna kilpailijoiden sivustoihin. Ja tämä on jo merkittävä uhka yrityksesi kehitykselle.
Kuinka ottaa tiedostojen välimuisti käyttöön selaimessa käyttäjän puolella
Jos projektisi on kehitetty suosittu CMS WordPress, eli on monia laajennuksia, jotka voivat ratkaista välimuistiongelman. Suosituimmat niistä ovat W3 Total Cache, WP Super Cache, Hyper-välimuisti. Mutta tässä artikkelissa ehdotan harkitsemaan mielestäni luotettavampaa tapaa ottaa välimuisti käyttöön .htaccess-tiedoston kautta suoraan isännöinnissä.
Huomaa, että ehdotetut menetelmät toimivat vain, jos Apache-ohjelmisto on asennettu isännöintipalveluntarjoajasi palvelimelle.
Ennen kuin teet mitään muutoksia.htaccess-tiedostossa, muista tehdä se varmuuskopio tietokoneellesi, jotta voit palauttaa sen, jos jokin menee pieleen.
Jotta selaimen välimuisti voidaan ottaa käyttöön käyttäjän puolella, Riittää, kun käytät jotakin alla olevista menetelmistä. Molempien menetelmien samanaikainen käyttö ei ole suositeltavaa, ja se voi johtaa sivustosi häiriintymiseen.
Selaimen välimuistin ottaminen käyttöön käyttäjän puolella mod_headers-moduulin avulla
Välimuistitoiminnon mahdollistamiseksi alla oleva koodi on lisättävä .htaccess-tiedostoon, joka sijaitsee sivustosi juurihakemistossa. Virheiden välttämiseksi sinun on lisättävä koodi ennen riviä # END WordPress:
# Välimuistin ottaminen käyttöön sivuston vierailijoiden selaimissa < ifModule mod_headers . c > # Kaikki html- ja htm-tiedostot säilytetään selaimen välimuistissa 12 tunnin ajan < FilesMatch "\.(html|htm)$" > Otsikkojoukkovälimuisti - Ohjaus "max-age=43200" < / FilesMatch > # Kaikki css-, javascript- ja tekstitiedostot säilytetään selaimen välimuistissa 7 päivän ajan < FilesMatch "\.(js|css|txt)$" > Otsikkojoukko välimuisti - ohjaus "max-age=604800" < / FilesMatch > # Kaikki flash-tiedostot ja kuvat säilytetään selaimen välimuistissa 31 päivän ajan < FilesMatch "\.(flv|swf|ico|gif|jpg|jpeg|png)$"> Otsikkojoukko välimuisti - ohjaus "max-age=2592000" < / FilesMatch > # Poista käytöstä php- ja muiden palvelutiedostojen välimuisti < FilesMatch "\.(pl|php|cgi|spl|scgi|fcgi)$"> Otsikon asetukset poistettu Välimuisti - hallinta < / FilesMatch > < / IfModule > |
En kuvaile, mitä nämä tai muut direktiivit tarkoittavat. Lisätietoja niiden arvoista löytyy Apachen viralliselta dokumentaatiosivustolta.
Selaimen välimuistin ottaminen käyttöön käyttäjän puolella mod_expires-moduulin avulla
Ota välimuisti käyttöön selaimessa käyttäjän puolella mod_expires-moduulin avulla kirjoittamalla seuraava koodi .htaccess-tiedostoon:
< ifModule mod_expires . c > Vanhenee Aktiivinen Päällä #oletusvälimuisti on 30 sekuntia Vanhenee Oletus "pääsy plus 30 sekuntia" # Ota kuvien välimuisti ja flash käyttöön 1 kuukauden ajan ExpiresByType-kuva / x - kuvake "pääsy plus 1 kuukausi" ExpiresByType-kuva / jpeg "pääsy plus 4 viikkoa" ExpiresByType image / png "pääsy plus 30 päivää" ExpiresByType-kuva / gif "pääsy plus 43829 minuuttia" ExpiresByType-sovellus / x - Shockwave - flash "pääsy plus 2592000 sekuntia" # Ota css-, javascript- ja tekstitiedostojen välimuisti käyttöön 7 päivän ajan ExpiresByType text/css "pääsy plus 604800 sekuntia" ExpiresByType text/javascript "pääsy plus 604800 sekuntia" ExpiresByType-sovellus/javascript "pääsy plus 604800 sekuntia" |
img class=”aligncenter wp-image-2458 size-full” title=”Sivuston sivujen välimuistin ottaminen käyttöön selaimessa” src=”http://about-windows.ru/wp-content/uploads/2014/07/How to enable -browser-caching-of-site-pages.jpg” alt=”Sivuston sivujen välimuistin ottaminen käyttöön selaimessa” width=”600″ height=”450″ />
Kuinka voin ottaa loppukäyttäjän selaimen välimuistin käyttöön sivustossani?
Jos palvelimesi ilmoittaa loppukäyttäjän selaimelle, että joitain resursseja voidaan tallentaa hakemistoon , samoja resursseja koskeva toistuva pyyntö ei saa vastausta etäpalvelimelta, vaan paikalliselta tietokoneelta. Molemmat osapuolet hyötyvät tästä. Siten palvelin keventää osan kuormituksesta, koska sen ei tarvitse lähettää tiettyjä resursseja, jotka ovat jo saatavilla käyttäjän tietokoneella. Mutta käyttäjä saa enemmän nopea pääsy pyydettyihin resursseihin.
Kuinka ottaa sivuston resurssien välimuisti käyttöön Apache-palvelimella?
Selvitetään ensin, mitä resursseja selaimen tulee tallentaa välimuistiin. Haluan muistuttaa, että jos selain tallentaa välimuistiin joitakin resursseja, se ei välttämättä päivitä niitä täysin pitkään aikaan. Tämä tilanne sopii varsin staattisille kohteille. Mitkä resurssit voidaan luokitella staattisiksi objekteiksi?
- CSS-tiedostoja.
- JS tiedostot.
- Kuvat.
- Video.
- Musiikki.
Yllä olevat resurssit sekä jotkut muut resurssit voidaan säilyttää välimuistissa pitkään ilman haittaa. Niitä ei päivitetä joka päivä. Tämän perusteella annan sinulle koodin, joka pakottaa käyttäjän selaimen tallentamaan luetellut resurssit välimuistiin. Lisäksi ilmoitamme ajanjakson, jonka aikana nämä resurssit voidaan säilyttää välimuistissa ilman päivityspyyntöä.
Vanhenee Aktiivinen Päällä
Vanhenee Oletus "käyttöoikeus 7 päivää"
ExpiresByType-sovellus/javascript "pääsy plus 1 vuosi"
ExpiresByType text/javascript "pääsy plus 1 vuosi"
ExpiresByType text/css "pääsy plus 1 vuosi"
ExpiresByType text/html "pääsy plus 7 päivää"
ExpiresByType text/x-javascript "pääsy 1 vuosi"
ExpiresByType-kuva/gif "käyttöoikeus plus 1 vuosi"
ExpiresByType-kuva/jpeg "pääsy plus 1 vuosi"
ExpiresByType image/png "pääsy plus 1 vuosi"
ExpiresByType image/jpg "pääsy plus 1 vuosi"
ExpiresByType image/x-icon "käyttöoikeus 1 vuosi"
ExpiresByType-sovellus/x-shockwave-flash "käyttöoikeus 1 vuosi"
Tämä koodi on syötettävä tiedostoon .htaccess, joka sijaitsee sen sivuston juurikansiossa, jonka palvelimena Apache toimii. Tämän jälkeen selain tallentaa kaikki yllä olevat objektit välimuistiin määritetyn ajan. Tämä tarkoittaa, että jos vierailet samalla sivustolla vuoden sisällä (kuten esimerkissä), saat tietokoneeltasi monia tiedostoja, ellet tietenkään ole tyhjentänyt tietokoneesi välimuistia tänä aikana.
- htaccess-välimuisti tallentaa verkkosivun sisällön kohteeseen paikallinen tietokone kun käyttäjä vierailee siinä;
- Selaimen välimuistin käyttäminen – Verkkovastaava opastaa selaimia resurssien käsittelyssä.
Kun selain hahmontaa verkkosivun, sen on ladattava logo, CSS-tiedosto ja muut resurssit:
Selaimen välimuisti "muistaa" resurssit, jotka selain on jo ladannut. Kun vierailija siirtyy sivuston toiselle sivulle, logo, CSS-tiedostot jne. ei pitäisi ladata uudelleen, koska selain on jo "muistanut" ne (tallentanut ne). Tästä syystä verkkosivun latautuminen kestää kauemmin ensimmäisellä vierailullasi kuin toistuvilla vierailuilla.
Kun käytät välimuistia, verkkosivun tiedostot tallennetaan selaimen välimuistiin. Sivut latautuvat paljon nopeammin toistuvilla vierailuilla. Näin tapahtuu myös muille sivuille, jotka käyttävät samoja resursseja.
Kuinka ottaa selaimen välimuisti käyttöön
- Muokkaa resurssipyyntöotsikoita käyttämään välimuistia;
- Optimoi välimuististrategiasi.
Pyynnön otsikoiden muuttaminen
Useimmille ihmisille ainoa tapa tallentaa sivuston htaccess välimuistiin on lisätä koodi verkkopalvelimen .htaccess-tiedostoon.
.htaccess-tiedosto hallitsee monia tärkeitä asetuksia verkkosivustollesi.
Selaimen välimuisti .htaccess-tiedoston kautta
Alla oleva koodi kertoo selaimelle, mitä välimuistiin tallennetaan ja kuinka kauan se "muistaa". Se tulee lisätä .htaccess-tiedoston alkuun:
## PÄÄTTYY VÄLITALLENNUS ##
Tallenna .htaccess-tiedosto ja päivitä sitten verkkosivu.
Kuinka asettaa välimuistiaika eri tiedostotyypeille
Yllä oleva koodi määrittää aikavälit. Esimerkiksi 1 vuosi (1 vuosi) tai 1 kuukausi (1 kuukausi). Ne liittyvät tiedostotyyppeihin. Yllä oleva koodi sanoo, että .jpg-tiedostot (kuvat) tulee säilyttää välimuistissa vuoden ajan.
Jos haluat muuttaa tämän niin, että myös JPG-kuvat säilyisivät välimuistissa kuukauden ajan, korvaisit "1 vuosi" sanalla "1 kuukausi". Yllä olevat htaccess-välimuistiarvot ovat optimaalisia useimmille verkkosivuille.
Vaihtoehtoinen välimuistimenetelmä .htaccessille
Yllä kuvattu menetelmä on nimeltään " Vanhenee", se auttaa useimpia aloittelijoita välimuistin tallentamisessa. Kun olet tottunut käyttämään välimuistia, voit kokeilla toista välimuistimenetelmää nimeltä Cache-Control, joka antaa sinulle enemmän vaihtoehtoja.
On mahdollista, että Expires-menetelmä ei toimi palvelimellasi, jolloin sinun kannattaa kokeilla Cache-Controlia.
Välimuistin hallinta
Tämän menetelmän avulla voit hallita paremmin sivujen välimuistia selaimessa, mutta monien ihmisten on helpompi määrittää kaikki asetukset kerran.
Esimerkki käytöstä .htaccess-tiedostossa:
#1 kuukausi useimmille staattisille resursseille
Yllä oleva koodi asettaa Cache-Control-otsikon tiedostotyypin mukaan.
Kuinka Cache-Control toimii?
Harkitse yllä olevaa välimuistikoodiriviä htaccess-selaimessa:
#1 kuukausi useimmille staattisille resursseille
Tämä rivi on vain huomautus. .htaccess-tiedosto ohittaa rivit, jotka alkavat #-merkillä. Tämä huomautus on suositeltavaa, koska tiedostojen välimuistiratkaisuna voi olla useita erilaisia tietojoukkoja:
Yllä mainittu rivi sanoo, että " jos tiedosto on jokin näistä tyypeistä, teemme sillä jotain...»
Tärkeintä tässä rivissä on, että se sisältää luettelon erilaisia tyyppejä tiedostot ( CSS, JS, JPEG, PNG jne. ) ja välimuistiohjeita tulee soveltaa näihin tiedostotyyppeihin. Jos esimerkiksi et halua, että JPG-tiedostoja säilytetään välimuistissa tietyn ajan, voit poistaa " JPG". Jos haluat lisätä HTML:n, sinun on ilmoitettava tälle riville " HTML«:
Otsikkojoukko Cache-Control "max-age=2592000, public"
Yllä mainittu rivi asettaa todelliset otsikot ja arvot:
- osa " Otsikkojoukko Cache-Control» — asettaa otsikon;
- Muuttuja " enimmäisikä = 2592000"—osoittaa kuinka kauan välimuistiprosessi kestää (sekunteina). Tässä tapauksessa tallennamme välimuistiin yhden kuukauden (2592000) sekunnin ajan;
- osa " julkinen» raportoi, että se on julkisesti saatavilla.
