Määrake css-faili aegumiskuupäev. Vahemällu salvestamise seadistamine .htaccess-faili kaudu

Enne lehe avamist peab brauser alla laadima kogu selle sisu (HTML, CSS, Javascript ja pildid). Kui teil on aeglane internet (või kasutate mobiiltelefoni), võib suurte ja kohmakate veebisaitide laadimine olla üsna valus kogemus. Iga fail saadab serverile eraldi päringu ja mida rohkem selliseid päringuid korraga saab, seda rohkem tööd on vaja teha ja seda aeglasemalt leht laaditakse. Sel juhul kasutage brauseri vahemälu.

Brauseri vahemälu võib kasutajalt mõned saidi failid salvestada. Esimesel külastusel jääb laadimisaeg samaks, kuid järgmisel külastusel, lehe värskendamisel või teisele üleminekul salvestatakse osa faile juba brauserisse. See tähendab, et kasutaja brauser peab alla laadima vähem andmeid ja tegema vähem päringuid serverile, vähendades seeläbi saidi laadimisaega.

Enne selle juhendi alustamist vajate järgmist.

  • Juurdepääs .htaccess-failile

1. samm – .htaccess-faili redigeerimine

Protsess on üsna lihtne, peate oma .htaccess-failile lisama järgmise koodi (leiate juhendi oma .htaccess-faili asukoha määramiseks):

## AEGUB PUHVERÜHMINE ## AegubAktiivne On ExpiresByType image/jpg "juurdepääs pluss 1 aasta" ExpiresByType image/jpeg "juurdepääs pluss 1 aasta" ExpiresByType image/gif "juurdepääs pluss 1 aasta" ExpiresByType image/png "juurdepääs pluss 1 aasta" ExpiresByType text/cs1y kuu" ExpiresByType rakendus/pdf "juurdepääs pluss 1 kuu" ExpiresByType text/x-javascript "juurdepääs pluss 1 kuu" ExpiresByType rakendus/x-shockwave-flash "juurdepääs pluss 1 kuu" AegubByType pilt/x-ikoon "juurdepääs pluss 1 aasta" Aegub Vaikimisi "juurdepääs pluss 7 päeva"## AEGUB PUHVERÜHMINE ##

Pärast .htaccess-failis tehtud muudatuste salvestamist hakkab teie sait ajutiste failide salvestamiseks automaatselt kasutama brauseri vahemälu.

2. samm – brauseri vahemälu kasutamise kontrollimine

Tehtud muudatuste õigsust saate kontrollida paljude tööriistade abil, nagu WebPageTest või GTMetrix

Siin on tulemused ENNE brauseri vahemällu salvestamise lubamine:

Võrdluseks siin on tulemused PÄRAST luba brauseri vahemällu salvestamine:

Järeldus

Sellest kiirest õpetusest õppisite, kuidas oma saiti brauseri vahemälu abil kiirendada. Kui soovite oma saidi laadimise kiirust suurendada - kasutage brauseri vahemälu.

"", et optimeerida saiti Google PageSpeed ​​​​Insightsi tööriista nõuandel. Iga saidi omanik seisis silmitsi kolmanda osapoole saitide js-skriptide vahemällu salvestamise raskusega.

See pole optimeerimise jaoks nii oluline näitaja, tegelikult kantakse CSS-i ja JS-i elemendid saidi päisest jalusesse, pealegi, kui vaadata Google'i ressursse, on neil selle elemendiga probleeme :)

Kui soovite siiski saiti või oma kliente optimeerida, salvestades vahemällu näiteks kolmanda osapoole skripte. analüsaatoris oleva loenduri ilusa numbri jälgimiseks piisab, kui järgida alltoodud samme, mis võtavad aega mitu minutit.

Selle elementide brauseri vahemälu

Teeme erinevate skriptide jaoks vahemälu, näide on võetud Devaka ru blogist (selle kirjutamise ajal)
Nt:

/assets/copyright.min.js (aegumiskuupäeva pole määratud)
/assets/i/566.jpg (aegumiskuupäeva pole määratud)
/assets/i/icons.png (aegumist pole määratud)
/i/postcomm-left.png (aegumist pole määratud)
/i/postcomm-right.png (aegumist pole määratud)



Lahendame esimese probleemi, minge saidi juurtes asuvasse htaccess-faili ja kleepime selle koodi allossa:

# tihendustekst, html, javascript, css, xml: AddOutputFilterByType DEFLATE text/html-tekst/lihttekst/xml-rakendus/xml-rakendus/xhtml+xml-tekst/css-tekst/javascripti rakendus/javascripti rakendus/x-javascript# brauseri vahemälu ExpiresActive On #default 5 second cache ExpiresDefault "juurdepääs pluss 1 päeva" # Luba piltide ja välkmälu vahemälu kuuks ajaks ExpiresByType image/x-icon "juurdepääs pluss 1 kuu" ExpiresByType image/jpeg "juurdepääs pluss 4 nädalat" ExpiresByType image/spng juurdepääs pluss 30 päeva" ExpiresByType pilt/gif "juurdepääs pluss 43829 minutit" ExpiresByType application/x-shockwave-flash "juurdepääs pluss 2592000 sekundit" # Luba css-i, JavaScripti ja tekstifailide vahemällu ühe nädala jooksul ExpiresByType 8 sekund pluss 0 s6 "4 acss text/css 0 " ExpiresByType text/javascript "juurdepääs pluss 604800 sekundit" ExpiresByType rakendus/javascript "juurdepääs pluss 604800 sekundit" ExpiresByType application/x-javascript "juurdepääs pluss 604800 sekundit" # Luba HTML-i ja Expires/expireshtsm-failide vahemällu salvestamine html-y- ja tyacpeesm-failide jaoks pluss 43200 sekundit" # Luba xml-failide vahemällu salvestamine kümneks minutiks ExpiresByType application/xhtml+xml "juurdepääs pluss 600 sekundit" # Kohandatud saidifondid ExpiresByType application/x-font-ttf "juurdepääs pluss 1 kuu" ExpiresByType font/opentype "ac 1 kuu" ExpiresByType application/x-font-woff "juurdepääs pluss 1 kuu" ExpiresByType image/svg+xml "juurdepääs pluss 1 kuu" ExpiresByType application/vnd.ms-fontobject "juurdepääs pluss 1 kuu"

Kolmandate osapoolte skriptide näited

Kui esimeses etapis tehti kõik õigesti, peaksite nägema midagi sellist, nagu see loend:

Kasutage brauseri vahemälu järgmiste ressursside jaoks


Muidugi võib teil olla näiteks mõõdikute ja analüütika jaoks vaid paar URL-i, kuid see pole nii oluline, parandusjuhised on kõigile ühesugused.

Kolmanda osapoole vahemälu

Algselt pidi artikkel olema pühendatud ainult neile punktidele, kuid tundes, et küsimusi tuleb palju, lisati veel paar punkti.

Kolmanda osapoole ressursi vahemälu aega ei saa kuidagi mõjutada, kuid saate seda teha oma veebiprojektis Kõige õigem samm selles olukorras on värskete mõõdikute, analüütika jne skriptide automaatne allalaadimine. teie saidile, kasutades cronit (skript on olemas)

Võtame selle kohe kätte!
Samm 1. Kopeerige kõigi Google PageSpeedi juhitud skriptide loend Notepadisse või otse brauserist.
2. samm. Looge php-laiendiga hostimisfail ja kleepige sinna järgmine kood:

Tähelepanu! Teil pole luba peidetud teksti vaatamiseks.

Koodis näiteks 3, kuid saate luua nii palju punkte kui vaja, lihtsalt kopeerige ja kleepige allpool või eemaldage üleliigsed.


Sellel real muudame 3. väärtust:
Kasutage Google PageSpeedi jaoks brauseri vahemälu
1. Skript, mille oma veebisaidile üles laadime

Tähelepanu! Teil pole luba peidetud teksti vaatamiseks.

2. Faili salvestamise tee:

Realpath("./js")

Selles näites on selleks js kaust, st. täpne tee on www.site/js/ (peate kausta ise looma ja määrama sellele CHMOD-i kirjutamisõigused)

3. Skripti nimi, kui .js laiendiga, siis kirjutame sellega kaasa, kui ilma selleta või mõne muuga, siis teeme kõik nagu ülaltoodud näites. Pange tähele, et sama nimega faile pole.

Samm 3. Laadi redigeeritud fail serverisse

Samm 4. Failide automaatseks värskendamiseks asetage fail cronile

Et vältida teenustega töötamist valesti, kui nad teevad skriptides muudatusi, sisestab cron need automaatselt oma serverisse ja värskendab neid.

Minge oma hostimispaneelile ja valige vahekaart CRON ja sisestage käsk, samuti määrake kellaaeg üks kord tunnis / päevas või muul ajal.

Wget -q -O - /dev/null http://www..php >/dev/null 2>&1

Ärge unustage muuta URL-i ja võib-olla on käsu süntaks erinev, vaadake cron-käskude näiteid hostimise abis või uppuge tehnilisse tuge.

Samm 5. Muutke loenduris või skriptis JS-i teed

Kui loenduris oli tee https://mc.yandex.ru/metrika/watch.js, siis asendame selle saidisisese teega, näiteks http://www..js

See on kõik, nüüd ei tohiks loendis PageSpeed ​​​​Insights olla sõnumeid brauseri vahemälu seadistamise kohta.

Laadige arhiivist alla juhised "Luba brauseri vahemälu Google PageSpeedi jaoks". Te ei saa faile meie serverist alla laadida
Tutvustame kasulikku artiklit "Luba brauseri vahemälu Google PageSpeedi jaoks", et optimeerida saiti Google PageSpeedi tööriista nõuandel, mis on meie foorumite, häkkimiste, moodulite ja mallide abil.

Tere kõigile! Täna tahan teile öelda, kuidas oma saidi kiiruse suurendamiseks Google PageSpeed ​​​​Insightsis väliseid elemente vahemällu salvestada. Alumine rida on js-i ja muude allalaaditavate failide allalaadimine välistest ressurssidest oma saidile.

Kuidas lubada brauseris failide vahemällu salvestamine

Enne kui kirjutan, kuidas lubada kasutajapoolses brauseris oma saidi failide vahemälu, tahan selgitada, mis on vahemälu.

Vahemälu- vaadatud failide salvestamine arvutisse, mis omakorda suurendab lehe või saidi laadimise kiirust, kui seda uuesti vaatate. Vahemällul on oma aegumiskuupäev, pärast mida seda värskendatakse või kustutatakse.

Saime aru, mis on vahemälu. Nüüd testime oma saiti teenuses PageSpeed ​​​​ja veenduge, et Google soovitab meil kasutada brauseri vahemälu. Siin on väljavõte sõnumist.

Kui määrate HTTP-päistes staatiliste ressursside kuupäeva või aegumiskuupäeva, laadib brauser varem hangitud ressursid kohalikult kettalt, mitte Internetist.

Kui need failid asuvad teie ressursil, saate faili kirjutada brauseri vahemällu salvestamise koodi htaccess asub saidi juurtes. Siin on kood, kui kellelgi seda vaja on.

# tihendustekst, html, javascript, css, xml: AddOutputFilterByType DEFLATE text/html-tekst/lihttekst/xml-rakendus/xml-rakendus/xhtml+xml-tekst/css-tekst/javascripti rakendus/javascripti rakendus/x-javascript# brauseri vahemälu ExpiresActive On #default 5 second cache ExpiresDefault "juurdepääs pluss 1 päeva" # Luba piltide ja välkmälu vahemälu kuuks ajaks ExpiresByType image/x-icon "juurdepääs pluss 1 kuu" ExpiresByType image/jpeg "juurdepääs pluss 4 nädalat" ExpiresByType image/spng juurdepääs pluss 30 päeva" ExpiresByType pilt/gif "juurdepääs pluss 43829 minutit" ExpiresByType application/x-shockwave-flash "juurdepääs pluss 2592000 sekundit" # Luba css-i, JavaScripti ja tekstifailide vahemällu ühe nädala jooksul ExpiresByType 8 sekund pluss 0 s6 "4 acss text/css 0 " ExpiresByType text/javascript "juurdepääs pluss 604800 sekundit" ExpiresByType rakendus/javascript "juurdepääs pluss 604800 sekundit" ExpiresByType application/x-javascript "juurdepääs pluss 604800 sekundit" # Luba HTML-i ja Expires/expireshtsm-failide vahemällu salvestamine html-y- ja tyacpeesm-failide jaoks pluss 43200 sekundit" # Luba xml-failide vahemällu salvestamine kümneks minutiks ExpiresByType application/xhtml+xml "juurdepääs pluss 600 sekundit" # Kohandatud saidifondid ExpiresByType application/x-font-ttf "juurdepääs pluss 1 kuu" ExpiresByType font/opentype "ac 1 kuu" ExpiresByType application/x-font-woff "juurdepääs pluss 1 kuu" ExpiresByType image/svg+xml "juurdepääs pluss 1 kuu" ExpiresByType application/vnd.ms-fontobject "juurdepääs pluss 1 kuu"

Kleepides selle koodi oma htacces-faili, saate oma saiti Google'i PageSpeed ​​​​teenuses uuesti kontrollida
arusaamu. Kui jaotises " kasutage brauseri vahemälu» kõik on hästi, nii et saate
ainult lingid välistele ressurssidele, nagu analüütika, sotsiaalne
nupud ja palju muud.
Isiklikult kasutan selle koodiga paralleelselt oma hostimise võimalusi kasutajapoolsete failide vahemällu salvestamiseks. See näeb välja selline.

Nagu näete, võimaldab minu hostimine lubada brauseri poolel vahemällu salvestamist ning määrata tihendustaseme ja failide salvestusperioodi. Samuti kasutan lehtede kiireks laadimiseks pistikprogrammi wp super cache, kuid võin sellest kuidagi oma lugejatele rääkida, tellinud ajaveebi uuendused.

Välise faili vahemälu lubamine rakenduses Google PageSpeed ​​​​Insights

Kui olete järginud oma ajaveebi failide vahemällu salvestamise soovitusi. Google PageSpeed ​​​​Insightsi tööriistas peaksite nägema ainult linke välistele ressurssidele. Sul peab olema midagi sarnast.
Nagu ekraanipildilt näete, vannub Google PageSpeed ​​​​Insights väliseid ressursse, nagu Yandexi mõõdikud, google analytics ja teised. Nüüd räägin teile, kuidas seda viga parandada ja teha lingid välistele ressurssidele sisemiseks ja serveri poolel vahemällu salvestatavaks.

Brauseri vahemälu kasutamine väliste ressursside jaoks

Kuna välisressursside failid ei kuulu meie saidile, tuleb need esmalt alla laadida. Väliste failide allalaadimiseks kolmandate osapoolte ressurssidest peame looma faili cache_js.php järgmise koodiga. Koodi kiireks ja korrektseks lisamiseks failile soovitan kasutada Notepad ++.

Vajaliku koodi väljakirjutamiseks. Kopeerime selle lingi:

downloadJs( kleepige link lehelt PageSpeed ​​siia /metrica.js, realpath("./ kaust_js« ) . ‘/ metrica.js- kleepige lõplik fail siia") ;

Seega saate lisada palju taotlusi. Ainus asi, mida meeles pidada, on veenduda, et kaustas ei oleks dubleerivaid faile. Sel juhul kasutage ühte faili mitme skripti jaoks, tavaliselt sama skripti jaoks, või nimetage see ümber.

Pärast koodi lisamist faili cache_js.php, võite seda nimetada ka muul viisil. See tuleb üles laadida meie saidi juure. Ka saidi juurtes peate looma kausta kaust_js, või mõne muu juurdepääsuõigustega nime all 777/755. Kaustale õiguste määramiseks soovitan seda kasutada Fillizille.

Selleks avage lihtsalt programm fillizilla. Järgmiseks valige kaust ja määrake juurdepääsuõigused, kindlasti 777, misjärel muudame tagasi 755. Seda saab teha ka oma hostimise juhtpaneelis, kui te seda programmi kasutada ei soovi. Näitan teile ekraanipilti Fillizilla programmis juurdepääsuõiguste määramisest.
Seejärel avage jaotis faili õigused” ja sisestage meie väärtus 777/755.

Kuidas lubada saidi ülesannete ajakava (cron)

Järgmise sammuna peame lubama oma saidi ülesannete planeerija, et meie skript saaks https://teie saidi aadress/cash_js.php algas iga päev. Tänu sellele on meie veebisaidil alati välistest ressurssidest pärit failide ajakohane versioon. Isegi kui arendajad teevad oma koodis muudatusi, on meil saidil alati tööversioon tänu ülesannete ajakavale.

Oma saidi ülesannete ajastamiseks peate minema oma hostimise juhtpaneelile ja registreerima ühe koodivalikutest.

GET-i kaudu tööle asumine. Kui teil on vaja käivitada cron töö, võttes arvesse mootori konteksti:

Laadida https://site.ru/script.php

kus site.ru on teie domeeni nimi ja script.php on ülesandega faili nimi;

töö alustamine WGETi kaudu. Alternatiivne viis cron-töö käivitamiseks, võttes arvesse mootori konteksti:

Wget -q -O - https://site.ru/script.php> /dev/null 2>&1

kus site.ru on teie domeeni nimi ja script.php on ülesandega faili nimi;

Meie puhul peame kirjutama:

HANKIGE https://oma saidi aadress/cash_js.php

Või vali mõni alternatiivne variant, mina isiklikult leppisin esimesega.

Mõtlesime välja, mida ette kirjutada, nüüd avame oma hostimise ja läheme selle juhtpaneelile. Ma kasutan ISPmanageri juhtpaneeli, kui otsite teistmoodi ülesannete plaanija vahekaarti või cronit.

Nüüd avage vahekaart Loo.

Seejärel tühjendame brauseri vahemälu. Google Chrome'i jaoks kasutage klaviatuuri otseteed ctrl + shift + delete ja kontrollige saiti. Samuti soovitan teie saiti uuesti käitada tööriista PageSpeed ​​​​Insights kaudu.

See on minu jaoks kõik, tänu sellele lehekiirendusmeetodile soovin teile head jõudlust. Järgmises artiklis näitan teile, kuidas luua oma ajaveebi jaoks värviline YouTube'i tellimisnupp, nii et ärge unustage tellida värskendusi. Hüvasti kõigile!

Ma arvan, et see pole kellelegi saladus, et lehe laadimise kiirus mõjutab paljusid tegureid. Kui keegi pole kursis, siis ütlen lühidalt järgmist: laadimiskiirus ei mõjuta ainult seda, kas külastaja ootab teie saidi laadimist, vaid ka SEO optimeerimist. Tõepoolest, tänapäeval on paljud otsingumootorid hakanud saitide järjestamisel arvesse võtma lehtede laadimise kiirust. Seega, mida kiiremini teie sait laaditakse, seda rohkem saate otsingumootoritest külastajaid saada ja sellest tulenevalt ka rohkem raha teenida.

Seetõttu otsustasin selles artiklis koguda kokku 10 parimat näpunäidet selle kohta, kuidas saate veebilehe ja saidi kui terviku laadimiskiirust suurendada. Artikkel ei pretendeeri geeniusele ja on mõeldud algajatele.

Nii et lähme:

1. Vähendage HTTP-päringute arvu

80% lehe laadimisest on keskendunud lehe komponentide laadimisele: skriptid, fotod, CSS-failid, flash. HTTP/1.1 spetsifikatsioon soovitab, et brauserid laadiksid samast hostist alla mitte rohkem kui kaks veebilehe komponenti paralleelselt. Vähendades nende komponentide arvu, vähendame serverisse suunduvate HTTP päringute arvu ja selle tulemusena suurendame lehe laadimise kiirust.

Kuidas aga vähendada serverisse saadetavate päringute arvu ilma lehe välimust mõjutamata?

2. Asetage CSS-failid lehe ülaossa

Asetades lehe päisesse ühenduse css-failidega, saame lehe järkjärgulise renderduse, s.t. leht laaditakse järk-järgult - kõigepealt pealkiri, seejärel logo ülaosas, navigeerimine jne. - ja see omakorda on kasutaja jaoks suurepärane lehe laadimise indikaator ja parandab saidi üldist kasutuskogemust.

CSS-failide paigutamine lehe allossa takistab paljudel brauseritel lehte järk-järgult renderdamast. Seda seetõttu, et brauser "ei taha" uuesti joonistada elemente, mis võivad pärast lehe laadimist stiili muuta. Seega lisage alati kõik oma CSS-failid lehe ülaosas jaotisesse HEAD.

3. Asetage javascript lehe lõppu

Asetades javascripti failid lehe allossa, lubame brauseril esmalt laadida leht sisuga ja alles seejärel alustada javascripti failide laadimist. Kui teie sait käib ajaga kaasas ja sisaldab kõiki võimalikke interaktiivseid "vidinaid", siis võib neid javascripti faile olla mitu ja need võivad kaaluda mitusada kilobaiti, mistõttu sundides kasutajat enne lehe laadimist ootama, kuni teie javascript failide laadimine on saatuslik.

Samuti blokeerivad välised js-failid paralleelset laadimist. HTTP/1.1 spetsifikatsioon soovitab, et brauserid laadiksid samast hostist alla mitte rohkem kui kaks veebilehe komponenti paralleelselt. Seega, kui teie saidi pildid asuvad erinevatel hostidel, saate rohkem kui 2 paralleelset allalaadimist. Ja kui skript on laaditud, ei alusta brauser muid allalaadimisi isegi teistelt hostidelt.

4. Minimeerige css ja javascript

Faili minimeerimine on kõigi ebaoluliste märkide eemaldamine koodist, et vähendada faili suurust ja kiirendada selle laadimist. Minimeeritud failis eemaldatakse kõik kommentaarid ja ebaolulised tühikud, reavahetused, tabeldusmärgid. Siin on kõik lihtne. Mida väiksem on faili suurus, seda vähem aega kulub brauseril selle allalaadimiseks. Ja need 24 võrguteenust CSS-koodi tihendamiseks ja optimeerimiseks aitavad teil koodi minimeerida.
5. Kasutage paralleelseks allalaadimiseks alamdomeene

Nagu ma eespool ütlesin, on HTTP / 1.1 spetsifikatsiooni kohaselt brauserid piiratud samaaegselt laaditud saidikomponentide arvuga, nimelt ühest hostist mitte rohkem kui 2 komponenti. Seetõttu, kui teie saidil on palju graafikat, on parem panna see eraldi alamdomeenile või alamdomeenidele. Teie jaoks on see sama server, kuid brauseri jaoks on see erinev. Mida rohkem alamdomeene loote, seda rohkem faile saab brauser korraga alla laadida ja seda kiiremini laaditakse kogu saidi leht. Peate lihtsalt piltide aadressi uueks muutma. Väga lihtne, kuid tõhus viis.

6. Kasutage brauseri vahemälu

Vahemällu salvestamine on muutumas üha olulisemaks kaasaegsete veebisaitide jaoks, mis tuginevad suuresti JavaScriptile ja CSS-ile. Fakt on see, et kui külastaja külastab teie saiti esimest korda, laadib brauser kõik javascripti ja css-failid, laadib ka kogu graafika ja flashi, kuid kui seadistate õigesti HTTP päise Expires, muudate lehe komponendid vahemällu salvestatavaks. . Kui külastaja külastab teie saiti uuesti või läheb teie saidi järgmisele lehele, on tema brauseri vahemälus juba mõned vajalikud failid ja brauser ei pea neid uuesti alla laadima. Sellest tuleneb saidi laadimiskiiruse suurenemine.

Seetõttu määrake HTTP päis Expires, kus vähegi võimalik, mitu päeva või isegi kuud ette. Selleks, et Apache veebiserver tagastaks Expires HTTP päised, nagu soovitatud, peate saidi juurkaustas asuvasse htaccess-faili lisama järgmised read:
Päise lisamine Cache-Control "avalik" FileETag MTime Size ExpiresAktiv ExpiresByType image/gif "juurdepääs pluss 1 aasta" ExpiresByType image/jpg "juurdepääs pluss 1 aasta" ExpiresByType image/jpeg "juurdepääs pluss 1 aasta" ExpiresByType image/bmp "juurdepääs pluss 1 aasta" ExpiresByType access image/png "year"
See Apache veebiserveri konfiguratsioonifaili fragment kontrollib mooduli mod_expires olemasolu ja kui moodul mod_expires on saadaval, lülitab sisse Expires HTTP päiste tagastamise, mis määrab brauseri vahemälus ülaltoodud objektide aegumiskuupäeva. ja puhverservereid ühe aastani alates esimesest laadimisest. Sellise brauseri vahemälu eluea määramisel võib failide värskendamine olla keeruline. Seega, kui olete muutnud css- või javascript-faili sisu ja soovite, et neid muudatusi brauseri vahemälus värskendataks, peate muutma faili enda nime. Tavaliselt lisatakse selle versioon failinimele, näiteks styles.v1.css

7. Kasutage populaarsete JavaScripti teekide allalaadimiseks CDN-i

Kui teie sait kasutab populaarset JavaScripti raamistikku, näiteks jQueryt, on parem selle ühendamiseks kasutada CDN-i.

8. Optimeerige oma pilte

Peate määrama oma piltide jaoks sobiva vormingu. Vale pildivormingu valimine võib faili suurust oluliselt suurendada.

  • GIF-id sobivad ideaalselt mitmevärviliste piltide jaoks, näiteks logoga.
  • JPEG-failid sobivad suurepäraselt üksikasjalike, rohkete värvidega piltide, näiteks fotode jaoks.
  • PNG on teie valik, kui vajate kvaliteetset ja läbipaistvat pilti.
Pildi optimeerimiseks on kaks võimalust: piltide tihendamiseks Internetis programmide või võrguteenuste kasutamine. Esimesel juhul vajate konkreetse programmiga töötamiseks teatud teadmisi, kuid võrguteenuseid saavad kasutada kõik. Kõik, mida pead tegema, on üles laadida vajalikud pildid ja teenus optimeerib need ja annab lingi juba tihendatud failide allalaadimiseks.

Siin on mõned veebipõhise pildi optimeerimise teenused:

9. Ärge skaleerige pilte

Ärge muutke pildi suurust sildi laiuse ja kõrguse atribuutide või CSS-i abil. See mõjutab negatiivselt ka lehe laadimise kiirust. Kui teil on 500x500 piksli suurune pilt ja soovite saidile lisada pildi suurusega 100x100 pikslit, siis on parem algse pildi suurust muuta Photoshopi või mõne muu graafilise redaktori abil. Mida väiksem on pildi suurus, seda vähem aega kulub selle laadimiseks.

10. Kasutage Gzipi pakkimist

Uuringud on näidanud, et tekstifaili gzip pakkimine "lennult" vähendab 95-98% juhtudest faili brauserisse ülekandmiseks kuluvat aega. Kui salvestate failide arhiveeritud koopiad serverisse (puhverserveri mällu või lihtsalt kettale), saab ühenduse lahti üldiselt 3-4 korda kiiremini.

Alates HTTP/1.1 protokolli versioonist näitavad veebikliendid, millist tüüpi tihendust nad toetavad, määrates HTTP-päringus päise Accept-Encoding.

Aktsepteeri kodeering: gzip, tühjenda

Kui veebiserver näeb päringus sellist päist, saab ta rakendada vastuse tihendamist, kasutades ühte kliendi loetletud meetoditest. Content-Encoding päisega vastuse väljastamisel teavitab server klienti, millise meetodi abil vastus tihendati.

Sisu kodeering: gzip

Sel viisil edastatavad andmed on algandmetest umbes 5 korda väiksemad ja see kiirendab oluliselt nende kohaletoimetamist. Siin on aga üks puudus: veebiserveri koormus suureneb. Kuid serveri probleemi saab alati lahendada. Nii et ärgem pöörakem sellele tähelepanu.

GZIP-i tihendamise lubamiseks oma saidil peate htaccess-faili kirjutama järgmised koodiread:
AddOutputFilterByType DEFLATE text/html AddOutputFilterByType DEFLATE rakendus/javascript AddOutputFilterByType DEFLATE text/javascript AddOutputFilterByType DEFLATE text/css BrowserMatch ^Mozilla/4 gzip-only-text/html BrowserMatch ^Mozilla/4\.0 no-gzip BrowserMatch \bMSIE !no-gzip !gzip-only-text/html

Kui see meetod töötas, siis suurepärane, kui mitte, siis võite proovida seda koodi:

AddOutputFilterByType DEFLATE text/html text/plain text/xml application/xml application/xhtml+xml text/javascript text/css application/x-javascript BrowserMatch ^Mozilla/4 gzip-only-text/html BrowserMatch ^Mozilla/4.0 no-gzip BrowserMatch bMSIE !no-gzip !gzip-only-text/html mod_gzip_on Jah mod_gzip_item_include fail \.js$ mod_gzip_item_include fail \.css$

Kuid jällegi, see kood ei tööta kõigis serverites, seega on parem võtta ühendust oma hostiteenuse pakkuja tugiteenusega ja seda probleemi selgitada.

Noh, see on tegelikult kõik, mida ma teile öelda tahtsin. Selles artiklis püüdsin loetleda kõik peamised kliendipoolse optimeerimise viisid, et suurendada veebilehe laadimise kiirust. Lisaks kliendipoolsele optimeerimisele on olemas ka serveripoolne optimeerimine. Kuid see on eraldi artikli teema.

Kui mul jäi midagi kahe silma vahele või teil on midagi lisada - kirjutage oma arvamus selle postituse alla kommentaaridesse. Täname tähelepanu eest!

Vahemällu salvestamine on oluline WordPressi veebisaidi optimeerimiseks, kuna see suurendab lehe laadimise kiirust. Veebisaidi külastajatele ei meeldi, kui laadimine võtab kaua aega, mistõttu võivad nad lihtsalt teie saidilt infot ootamata lahkuda, suurendades seeläbi põrgete arvu. Sellised käitumisparameetrid mõjutavad halvasti saidi järjestust otsingumootorite poolt, mis langetavad selle positsiooni otsingutulemustes. Selle vältimiseks ühendage WordPressi Super Cache pistikprogramm, mis täidab automaatselt lehtede vahemällu salvestamise töö.

Plugina kirjeldus ja funktsioonid

Vahemälu on veebilehe sisu ajutine salvestusruum. Selle asemel, et saidi uuesti külastamisel serverist leheandmeid (nt pilte) alla laadida, laaditakse need brauserisse vahemälust, mis kiirendab oluliselt saidi laadimist. WordPressi tõhus vahemällu salvestamise tööriist on spetsiaalne WordPressi Super Cache pistikprogramm.

Pistikprogramm loob staatilised saidi lehed ja salvestab nende vahemällu salvestatud versioonid serverisse. Pärast seda "annab" teie hostiteenuse pakkuja server külastajatele staatilisi faile, selle asemel, et lehe elementide hankimiseks iga kord andmebaasi juurde pääseda.

Mida veel saab WordPressi Super Cache pistikprogramm teha:

  • Võimaldab kasutada sisu edastamise võrku (CDN) koos vahemällu salvestamisega, levitades külastajale lähimast serverist kõige sagedamini nõutavad materjalid.
  • Toetab tahvelarvutite ja nutitelefonide leheversioonide vahemällu salvestamist.
  • Kasutab lehe tihendamist, et vähendada veebisaidi laadimisaega.
  • Toetab mitut tüüpi vahemällu salvestamist.
  • Võimaldab vahemälu taastada, et saaksite vahemällu salvestatud lehti vaadata isegi uue vahemälu loomisel.

Populaarse CMS-i jagatud veebisaidi hostimine:

WP Super Cache plugina installimine

Pistikprogrammi leiate WordPressi hoidlast. Selleks logige oma kasutajanime ja parooliga administraatori paneeli sisse.

  • Valige menüü "Pluginad" (1) ja klõpsake "Lisa uus" (2).
  • Sisestage otsinguribale pistikprogrammi WP Super Cache (3) nimi.
  • Leidke kuvatavast loendist soovitud valik ja klõpsake nuppu "Install" (4).
  • Pärast installimist aktiveerige plugin, klõpsates vastavat nuppu.

Isegi pärast aktiveerimist on WP Super Cache pistikprogramm vaikimisi keelatud, nii et näete ekraani ülaosas hoiatust.

Selle lubamiseks järgige soovitatud linki pluginate halduse lehele või valige käsk "Seaded", mis asub vahetult pistikprogrammi nime all.

Seadete lehel näete teist teadet faili wp-config.php muutmise kohta, pärast lehe värskendamist see kaob.

Pistikprogrammi toimimiseks tehke järgmist.

  1. Valige suvand "Vahemälu lubatud".
  2. Klõpsake nuppu Värskenda.
  3. Seejärel kontrollige nupu "Kontrolli" abil, kas pistikprogramm on õigesti ühendatud.

Kui pistikprogramm on õigesti ühendatud, näete rohelisega esiletõstetud hoiatust. Pistikprogramm pääseb saidile kaks korda juurde ja võrdleb mõlema koopia ajatempleid. Kui need ühtivad, on saidi vahemällu salvestamine lubatud.

Vastasel juhul kuvatakse teade punaselt ja peate otsima probleemi põhjust.

WordPress Super Cache pistikprogrammi sätted – kuidas lubada ja konfigureerida vahemällu salvestamist

WP Super Cache on võimas pistikprogramm, millel on palju valikuid, millest paljud võivad veebisaidi jõudlust veelgi parandada. Pistikprogrammi täpsemate sätete paneel võimaldab paindlikult hallata veebilehtede vahemällu salvestamise sätteid.

Veenduge, et vahemälu on lubatud, ja valige üks kolmest vahemälu hooldusrežiimist.

  1. mod_rewrite on kiireim valik, mis võimaldab WordPressil teenindada vahemälust staatilisi lehti, ilma et peaks serveri PHP-tõlki kutsuma;
  2. Vaikimisi kasutatakse PHP-režiimi ja see tarbib rohkem ressursse, mis võib serveri suure koormuse korral olla ebasoodne;
  3. lihtsustatud vahemällu salvestamine on vähem produktiivne kui eelmised valikud, kuid see nõuab ka minimaalselt ressursse.

Järgmised valikud nõuavad konfigureerimist jaotises Varia.

  1. Valik "Tihenda vahemälu failid" võib olla vastuolus teiste tihendusalgoritmidega. Kui saidiga on ühendatud muid tihendamist võimaldavaid pistikprogramme, ärge märkige seda kasti.
  2. Lehe vahemällu salvestamine ei ole volitatud kasutajatele ega saidile kommentaare jätjatele nõutav. Luba see suvand, et lubada sellistel külastajatel lehte selle praegusel kujul vaadata.
  3. Automaatne vahemälu taastamine pole vajalik, kui saidil on sageli värskendatud teavet. Vastasel juhul näevad külastajad aegunud lehti.
  4. Viga 304 ilmneb siis, kui server teatab brauserile, et lehe sisu ei ole pärast viimast külastust muutunud. Sel juhul toimub allalaadimine brauseri vahemälust, mis kiirendab saiti veelgi.
  5. GET parameetriga lehel on igale külastusele omane otsing kindlate kriteeriumide (kuupäevad, hind) järgi. Neid lehti ei pea vahemällu salvestama.
  6. Kui registreeritud kasutajaid loetakse anonüümseks, teenindatakse vahemällu salvestatud lehti eranditult kõigile.
  7. Viimane võimalus selles jaotises on reklaamida pistikprogrammi jalusesse manustatud lingiga autorile.

Jaotis "Täpsemalt" sisaldab edasijõudnutele mõeldud seadeid. Üldreeglina võite tavaliste saitide puhul need välja jätta.

  1. Kui sait sisaldab dünaamilisi elemente, ei pruugi mõned neist vahemällu salvestamisel korralikult töötada. Sel juhul peate lubama kerge või PHP vahemällu salvestamise režiimi ja dünaamilise vahemälu.
  2. Kui mall ei reageeri, tuleb spetsiaalselt mobiilseadmete jaoks loodud saidid lubada.
  3. Valik "Eemalda UTF-8 tugi" pole vajalik, kui saidil kuvatakse kõik märgid normaalselt.
  4. Uute väljaannete vahemälufailide tühjendamise saab lubada, kui saiti sageli värskendatakse.
  5. Kui mõne lehe vahemällu salvestamisega on probleeme, on vaja täiendavat kontrolli.
  6. Kui külastaja jättis lehele kommentaari, värskendatakse vahemälu pärast selle modereerimist.
  7. Vahemällu salvestatud lehti saate vaadata vahekaardil "Vahemälu olek", seega on see valik valikuline.
  8. Valik aeglustab failide tööd, hoides ära võimaliku probleemi serveris lehtede vahemällu salvestamisel.
  9. Arendaja valik laadib vahemälu alles pärast WordPressi laadimist.

Valikute all on vahemälu asukoha aadress ja privaatvõti juhuks, kui soovite lehte vaadata ilma vahemälu salvestamata ja vahemälu esmalt tühjendamata.

Kui olete valinud lehtede vahemällu salvestamise mod-rewrite meetodi, palub pistikprogramm teil värskendada kirjutamisõigusi. Selleks kerige alla nupule "Uuenda modifikatsiooni-ümberkirjutamise reegleid" ja klõpsake seda.

Seejärel määrake aeg ja periood, mille jooksul vahemällu salvestatud andmed serveris kehtivad. Alustage 3600 sekundiga (1 tund). Kui teie saidil on palju artikleid, peate võib-olla määrama pikema aja (kuni mitu päeva), mille järel loetakse vahemälu aegunuks. Samas kohas saate ajastada vahemälu puhastamise ajakava järgi, määrates taimeri ja värskendusintervalli. Mittemuutuvate saitide puhul saab prügiveo üldse tühistada, määrates ajalõpu väärtuseks nulli.

Saate takistada saidil teatud teabe (näiteks pidevalt uueneva teabega jaotise) vahemällu salvestamist, märkides ruudu vajalikus jaotises "Lubatud nimed ja keelatud aadressid" või lisades käsitsi lehtede aadresse.

Tühjendage otsingurobotite loend, kui soovite, et nad saaksid teavet vahemälust ega laadiks saidil roomamisel serverit. Suure koormusega saitide puhul, millel on rohkem kui tuhat kordumatut külastust päevas, on soovitatav lubada privaatrežiim. Sel juhul vahemälu värskendamine tühistatakse.

Vahekaardil "CDN-i sätted" on vahemälust väljastamisel teabe tõhusaks levitamiseks ühendatud tasuline teenus. Vahekaardil Vahemälu olek kuvatakse, millised lehed on vahemällu salvestatud ja neid saab loendist käsitsi eemaldada.

Eellaadimisrežiimi sätete konfigureerimiseks klõpsake vahekaarti Jagatud vahemälu. Miks soovite kasutada täielikult staatilist sisu?

  • Serveriressursside säästmiseks.
  • Veebisaidi laadimiskiiruse parandamiseks.
  • Vana saidi hooldamiseks, mille sisu enam ei uuendata.

Kui valite suvandi "Loo jagatud vahemälu kohe", andke pistikprogrammile aega vahemälu automaatseks genereerimiseks. Protsessi saate jälgida, kui lülitute vahekaardile "Vahemälu olek".

Vahekaarti "Pluginad" on vaja ainult siis, kui kavatsete ühendada muid pistikprogramme, mis ei mõjuta failide vahemällu.

Pidage meeles, et mõned neist töötavad ainult PHP vahemällu salvestamise režiimis. Spetsialistide jaoks lülitab vahekaart "Hooldus" sisse silumisrežiimi ja logide salvestamise võimaluse.

Brauseri vahemälu kasutamine, kuidas WordPressi vahemälu tühjendada

Pärast mõnda aega WP Super Cache pistikprogrammi käivitamist märkate saidi vahemälu moodustumist. Pistikprogrammi õige konfigureerimine parandab oluliselt saidi laadimisaega. Vahemällu salvestatud lehed salvestatakse HTML- või PHP-failidena teie hostimisserverisse. Tavaliselt teab server, millised lehed on uuendatud ja annab kasutajale uusima versiooni. Kui teil on aga probleeme värskendatud teabe kuvamisega, saate vahemälu käsitsi tühjendada. Kustutage vahemällu salvestatud lehed serverist, kasutades juhtpaneelil käsku "Kustuta kogu vahemälu" või klõpsates samal nupul pistikprogrammi seadetes.

Kui kasutaja külastab saiti esimest korda, pääseb tema brauser juurde saiti majutavale kaugserverile. Brauseri päring ja serveri vastus võtavad aega, kuna saidi elemendid (pildid, stiilid, skriptid) laaditakse järjestikku üksteise järel. Kui lehel on palju elemente või need on suured, võib nende laadimine võtta kaua aega.

Kuid kasutaja brauser teab, kuidas dubleeritud elemente vahemällu salvestada. See muudab saidi laadimise kiiremaks, kuna kõvakettalt failidele juurdepääs on alati kiirem kui andmete toomine kaugserverist. Samamoodi on vahemälu tühjendamise funktsioon olemas igas brauseris.

Kui te ei näe saidil värskendamist vajavaid muudatusi, tühjendage vahemälu brauseri seadete juhtpaneeli abil või sirvige lehte privaatses sirvimisrežiimis (selles režiimis ei kasutata salvestatud üksusi, nt paroole ega vahemälu) .