Navedite datum isteka za css datoteku. Konfiguriranje predmemoriranja putem .htaccess datoteke

Prije otvaranja stranice preglednik treba preuzeti sav njen sadržaj (HTML, CSS, Javascript i slike). Učitavanje velikih i glomaznih web stranica može biti prilično bolno iskustvo ako imate spor internet(ili koristite mobitel). Svaka datoteka šalje zaseban zahtjev poslužitelju, a što više takvih zahtjeva primi u isto vrijeme, to više posla treba obaviti i stranica će se sporije učitavati. U tom slučaju koristite predmemoriju preglednika.

Predmemorija preglednika može spremiti neke datoteke stranice za korisnika. Prilikom prvog posjeta, vrijeme preuzimanja ostat će nepromijenjeno, no pri sljedećem posjetu, osvježavanju stranice ili prelasku na drugu, neke će datoteke već biti spremljene u pregledniku. To znači da će korisnički preglednik morati preuzimati manje podataka i postavljati manje zahtjeva poslužitelju, čime se smanjuje vrijeme učitavanja stranice.

Prije nego počnete s ovim vodičem, trebat će vam sljedeće:

  • Pristup .htaccess datoteci

Korak 1 - Uređivanje .htaccess datoteke

Proces je prilično jednostavan, trebate dodati sljedeći kod u svoju .htaccess datoteku (možete pronaći vodič za određivanje lokacije vaše .htaccess datoteke):

## ISTIJEČE KAŠIRANJE ## ExpiresActive On ExpiresByType image/jpg "pristup plus 1 godina" ExpiresByType image/jpeg "pristup plus 1 godina" ExpiresByType image/gif "pristup plus 1 godina" ExpiresByType image/png "pristup plus 1 godina" ExpiresByType text/css "pristup plus 1 mjesec" ExpiresByType aplikacija/pdf "pristup plus 1 mjesec" ExpiresByType text/x-javascript "pristup plus 1 mjesec" ExpiresByType aplikacija/x-shockwave-flash "pristup plus 1 mjesec" ExpiresByType slika/x-icon "pristup plus 1 godina" ExpiresDefault "pristup plus 7 dana"## ISTIJEČE KAŠIRANJE ##

Nakon spremanja promjena u datoteku .htaccess, vaša će stranica automatski početi koristiti predmemoriju preglednika za pohranu privremenih datoteka.

Korak 2 - Provjera upotrebe predmemorije preglednika

Provjerite ispravnost napravljene promjene možete s mnogim alatima kao što su WebPageTest ili GTMetrix

Evo rezultata PRIJE omogućavanje predmemoriranja preglednika:

Usporedbe radi, evo rezultata NAKON omogući predmemoriju preglednika:

Zaključak

U ovom brzi vodič Naučili ste kako ubrzati svoju web stranicu pomoću predmemorije preglednika. Ako želite povećati brzinu učitavanja svoje stranice, koristite predmemoriju preglednika.

"" za optimizaciju stranice prema savjetima alata iz Google PageSpeed Uvidi. Svaki vlasnik web stranice susreo se s problemom poteškoće u predmemoriranju js skripti web stranica trećih strana.

Nije tako važan pokazatelj za optimizaciju, u biti, CSS i JS elementi se prenose iz zaglavlja web stranice u podnožje, osim toga, ako pogledate Google resurse, oni imaju problema s ovom točkom :)

Ako i dalje želite optimizirati svoje web mjesto ili svoje klijente predmemoriranjem skripti trećih strana, na primjer. promatrati lijep broj na brojaču u analizatoru, zatim samo slijedite korake u nastavku, što će potrajati nekoliko minuta.

Predmemorija preglednika njegovih elemenata

Izrada predmemorije za različite skripte, primjer preuzet s bloga Devaka ru (u vrijeme pisanja)
Na primjer:

/assets/copyright.min.js (nije naveden datum isteka)
/assets/i/566.jpg (nije naveden datum isteka)
/assets/i/icons.png (nije naveden datum isteka)
/i/postcomm-left.png (nije naveden datum isteka)
/i/postcomm-right.png (nije naveden datum isteka)



Da biste riješili prvi problem, idite na .htaccess datoteku koja se nalazi u korijenu stranice i umetnite ovaj kod na samo dno:

# kompresija teksta, html, javascript, css, xml: AddOutputFilterByType DEFLATE tekst/html tekst/običan tekst/xml aplikacija/xml aplikacija/xhtml+xml tekst/css tekst/javascript aplikacija/javascript aplikacija/x-javascript# predmemorija preglednika ExpiresActive On #default cache is 5 seconds ExpiresDefault "access plus 1 days" # Enable image caching and flash for a month ExpiresByType image/x-icon "pristup plus 1 mjesec" ExpiresByType image/jpeg "pristup plus 4 tjedna" ExpiresByType image/png "pristup plus 30 dana" ExpiresByType image/gif "pristup plus 43829 minuta" ExpiresByType application/x-shockwave-flash "pristup plus 2592000 sekundi" # Omogući predmemoriju css, javascript i tekstualnih datoteka za jedan tjedan ExpiresByType text/css "access plus 604800 sekundi" ExpiresByType text/javascript "pristup plus 604800 sekundi" ExpiresByType aplikacija/javascript "pristup plus 604800 sekundi" ExpiresByType aplikacija/x-javascript "pristup plus 604800 sekundi" # Omogući html predmemoriranje I htm datoteke za jedan dan ExpiresByType text/html "pristup plus 43200 sekundi" # Omogući predmemoriju xml datoteke za deset minuta ExpiresByType application/xhtml+xml "pristup plus 600 sekundi" # Nestandardni fontovi stranice ExpiresByType application/x-font-ttf "pristup plus 1 mjesec" ExpiresByType font/opentype "pristup plus 1 mjesec" ExpiresByType application/x- font- woff "pristup plus 1 mjesec" ExpiresByType image/svg+xml "pristup plus 1 mjesec" ExpiresByType application/vnd.ms-fontobject "pristup plus 1 mjesec"

Primjeri skripti treće strane

Ako ste sve napravili ispravno u prvom koraku, trebali biste vidjeti nešto poput ovoga:

Koristite predmemoriju preglednika za sljedeće resurse


Naravno, možete imati samo nekoliko URL-ova za metriku i analitiku, na primjer, ali to nije toliko važno, upute za ispravak su iste za sve.

Predmemorija elemenata treće strane

U početku je članak trebao biti posvećen samo ovim točkama, ali osjećajući da će biti mnogo pitanja, dodano je još nekoliko točaka.

Ne postoji način da utječete na vrijeme predmemorije resursa treće strane, ali to možete učiniti na svom web projektu Najispravniji potez u ovoj situaciji je automatski preuzeti najnovije skripte za metriku, analitiku itd. na svoju web stranicu koristeći cron (prisutna skripta)

Dovedimo sada stvari u red!
Korak 1. Kopirajte popis svih skripti na koje ukazuje Google PageSpeed ​​u bilježnicu ili izravno iz preglednika.
Korak 2. Napravite datoteku na svom hostingu pomoću php proširenje i zalijepite sljedeći kod u njega:

Pažnja! Nemate dopuštenje za pregled skrivenog teksta.

Na primjer, u kodu je 3, ali možete stvoriti onoliko bodova koliko vam je potrebno, samo kopirajte i dodajte ispod ili izbrišite nepotrebne.


U ovom retku mijenjamo treću vrijednost:
Koristite predmemoriju preglednika za Google PageSpeed
1. Skripta koju ćemo postaviti na našu web stranicu

Pažnja! Nemate dopuštenje za pregled skrivenog teksta.

2. Put gdje treba spremiti datoteku:

Realpath("./js")

U ovom primjeru to je mapa js, tj. točna staza će biti www.site/js/ (morate sami kreirati mapu i postaviti CHMOD dozvole za pisanje za nju)

3. Naziv skripte, ako je s nastavkom .js, onda ga pišemo zajedno s njim, ako je bez njega ili s nečim drugim, onda radimo sve kao u gornjem primjeru. Obratite pozornost da ne postoje datoteke s istim nazivima.

Korak 3. Učitajte uređenu datoteku na poslužitelj

Korak 4. Postavite datoteku na cron za automatsko ažuriranje datoteke

Kako bi se izbjeglo neispravan rad s uslugama, ako naprave promjene u skriptama, Cron će se automatski prijaviti i ažurirati ih na svom poslužitelju.

Idite na svoj hosting panel i odaberite karticu CRON i unesite naredbu, a također navedite vrijeme jednom po satu/danu ili bilo koje drugo vrijeme.

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

Ne zaboravite promijeniti URL i možda ćete imati drugačiju sintaksu naredbe, pogledajte primjere cron naredbe u pomoći za hosting ili kontaktirajte tehničku podršku.

Korak 5. Promijenite put u JS u brojaču ili skripti

Ako je postojao put u brojaču https://mc.yandex.ru/metrika/watch.js, zamijenite ga putem unutar web mjesta, na primjer http://www..js

To je sve, sada ne biste trebali vidjeti poruke o postavljanju predmemorije preglednika na popisu PageSpeed ​​​​Insights.

Preuzmite upute za "omogućavanje predmemorije preglednika za Google PageSpeed" u arhivi Ne možete preuzeti datoteke s našeg poslužitelja
Predstavljamo koristan članak“Omogućite predmemoriju preglednika za Google PageSpeed” za optimizaciju web mjesta prema savjetu alata iz Google PageSpeed ​​​​- sve najbolje imamo forume, hakove, module, predloške.

Pozdrav svima! Danas vam želim reći kako napraviti cache vanjski elementi u Google PageSpeed ​​​​Insights kako biste povećali brzinu svoje web stranice. Poanta će biti preuzeti js i druge datoteke za preuzimanje s vanjski resursi na svoju web stranicu.

Kako omogućiti predmemoriju datoteka u pregledniku

Prije pisanja o tome kako omogućiti predmemoriju datoteka za vaše web mjesto u pregledniku na strani korisnika, želim objasniti što je predmemorija.

Predmemorija- pohranjivanje pregledanih datoteka na vaše računalo, što zauzvrat povećava brzinu učitavanja stranice ili web mjesta prilikom ponovnog pregledavanja. Predmemorija ima svoj rok trajanja, nakon kojeg se ažurira ili briše.

Shvatili smo što je predmemorija. Sada provjerimo našu stranicu u usluzi PageSpeed ​​​​i uvjerimo se da Google preporučuje da koristimo predmemoriju preglednika. Evo izvatka iz poruke.

Ako navedete datum ili datum isteka statičkih izvora u HTTP zaglavljima, preglednik će učitati prethodno primljene resurse iz lokalni disk, ne s interneta.

Ako se ove datoteke nalaze na vašem resursu, tada možete napisati kod za predmemoriju preglednika u datoteku htaccess, koji se nalazi u korijenu stranice. Evo i samog koda, ako kome treba.

# kompresija teksta, html, javascript, css, xml: AddOutputFilterByType DEFLATE tekst/html tekst/običan tekst/xml aplikacija/xml aplikacija/xhtml+xml tekst/css tekst/javascript aplikacija/javascript aplikacija/x-javascript# predmemorija preglednika ExpiresActive On #default cache is 5 seconds ExpiresDefault "access plus 1 days" # Enable image caching and flash for a month ExpiresByType image/x-icon "pristup plus 1 mjesec" ExpiresByType image/jpeg "pristup plus 4 tjedna" ExpiresByType image/png "pristup plus 30 dana" ExpiresByType image/gif "pristup plus 43829 minuta" ExpiresByType application/x-shockwave-flash "pristup plus 2592000 sekundi" # Omogući predmemoriju css, javascript i tekstualnih datoteka za jedan tjedan ExpiresByType text/css "access plus 604800 sekundi" ExpiresByType text/javascript "pristup plus 604800 sekundi" ExpiresByType aplikacija/javascript "pristup plus 604800 sekundi" ExpiresByType aplikacija/x-javascript "pristup plus 604800 sekundi" # Omogući predmemoriju html i htm datoteka za jedan dan ExpiresByType text/html "pristup plus 43200 sekundi" # Omogući predmemoriju xml datoteka na deset minuta ExpiresByType application/xhtml+xml "pristup plus 600 sekundi" # Nestandardni fontovi stranice ExpiresByType application/x-font-ttf "pristup plus 1 mjesec" ExpiresByType font/ opentype "pristup plus 1 mjesec" ExpiresByType aplikacija/x-font-woff "pristup plus 1 mjesec" ExpiresByType image/svg+xml "pristup plus 1 mjesec" ExpiresByType aplikacija/vnd.ms-fontobject "pristup plus 1 mjesec"

Zalijepljenjem ovog koda u datoteku htacces možete još jednom provjeriti svoju stranicu Google servis PageSpeed
Uvidi. Ako u odjeljku " koristiti predmemoriju preglednika"Sve je u redu, to znači da ćete ga imati tamo
samo poveznice na vanjske resurse, kao što su analitika, društvene mreže
gumbi i tako dalje.
Osobno, paralelno s ovim kodom, koristim mogućnosti svog hostinga za keširanje datoteka na korisničkoj strani. Ovako izgleda.

Kao što vidite, moj hosting vam omogućuje da omogućite predmemoriju na strani preglednika i postavite razinu kompresije i razdoblje pohrane datoteka. Također, koristim dodatak za brzo učitavanje wp super cache stranice, ali možda ću svojim čitateljima nekako ispričati o tome, pretplaćeni na ažuriranja bloga.

Kako omogućiti vanjsku predmemoriju datoteka u Google PageSpeed ​​​​Insights

Ako ste slijedili preporuke za predmemoriju datoteka na svom blogu. Morate unutra Google alat PageSpeed ​​​​Insights, pogledajte samo veze na vanjske resurse. Sigurno imate nešto slično.
Kao što možete vidjeti na snimci zaslona, ​​Google PageSpeed ​​​​Insights se kune u vanjske resurse, kao što su Yandex metrics, google analytics i drugi. Sada ću vam reći kako popraviti ovu pogrešku i učiniti veze na vanjske resurse internim i predmemoriranima na strani vašeg poslužitelja.

Korištenje predmemorije preglednika za vanjske resurse

Budući da datoteke vanjskih resursa ne pripadaju našoj stranici, prvo ih je potrebno preuzeti. Da biste preuzeli vanjske datoteke s resursi trećih strana, moramo stvoriti datoteku kesh_js.php sa sljedećim kodom. Savjetujem vam da koristite Bilježnica++ za brzo i ispravno dodavanje koda u datoteku.

Da bismo napisali kod koji nam je potreban. uzmi i kopiraj ovaj link:

preuzimanjeJs( zalijepite vezu iz PageSpeed ​​​​ovdje /metrics.js, realpath("./ folder_js« ) . ‘/ metrica.js- umetnuti ovdje konačna datoteka’ ) ;

Na ovaj način možete dodati mnoge upite. Jedina stvar koju trebate zapamtiti jest osigurati da u mapi nemate duple datoteke. U tom slučaju koristite jednu datoteku za nekoliko skripti, obično istu skriptu, ili je preimenujte.

Nakon dodavanja koda u datoteku kesh_js.php, možete to nazvati i drugačije. Mora se učitati u root stranice. Također u korijenu stranice morate stvoriti mapu folder_js, ili pod drugim imenom s pravom pristupa 777/755. Kako biste postavili prava pristupa mapi, preporučujem korištenje Fillizille.

Da biste to učinili, jednostavno otvorite program fillizilla. Zatim odaberite mapu i postavite prava pristupa, obavezno na 777, nakon čega ponovno mijenjamo na 755. To možete učiniti i na upravljačkoj ploči vašeg hostinga ako ne želite koristiti ovaj program. Pokazat ću vam screenshot podešavanja prava pristupa u programu Fillizilla.
Zatim otvorite odjeljak " dopuštenja za datoteke" i unesite našu vrijednost 777/755.

Kako omogućiti planer zadataka za stranicu (cron)

Sljedeći korak, moramo omogućiti planer zadataka za našu stranicu, tako da naša skripta https://adresa vaše web stranice/kesh_js.php počeo, svakodnevno. Zahvaljujući tome, uvijek će biti na našoj web stranici trenutna verzija datoteke iz vanjskih izvora. Čak i ako programeri naprave promjene u svom kodu, mi ćemo to uvijek učiniti radna verzija na stranici, zahvaljujući planeru zadataka.

Kako biste rasporedili zadatke za svoju web stranicu, morate otići na upravljačku ploču hostinga i unijeti jednu od opcija koda.

pokretanje zadatka putem GET-a. Ako trebate pokrenuti cron posao uzimajući u obzir kontekst motora:

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

gdje je site.ru naziv vaše domene, a script.php naziv datoteke sa zadatkom;

pokretanje posla putem WGET-a. Alternativna opcija za pokretanje cron posla, uzimajući u obzir kontekst motora:

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

gdje je site.ru naziv vaše domene, a script.php naziv datoteke sa zadatkom;

U našem slučaju moramo napisati:

PREUZMITE https://adresu svoje web stranice/kesh_js.php

Ili izaberite alternativna opcija, osobno sam se odlučio za prvo.

Smislili smo što registrirati, sada otvaramo naš hosting i idemo na njegovu upravljačku ploču. Ja koristim kontrolnu ploču ISPmanager, ako imate neku drugu, potražite karticu planera zadataka ili cron.

Sada otvorite karticu "kreiraj".

Zatim brišemo predmemoriju preglednika. Za Google Chrome, upotrijebite kombinaciju tipki ctrl+shift+delete i provjerite rad stranice. Također preporučujem ponovno pokretanje vaše web-lokacije kroz alat PageSpeed ​​​​Insights.

To je sve što imam, želim ti dobar pokazatelj, zahvaljujući ovoj metodi ubrzavanja stranice. U sljedećem članku ću vam reći kako napraviti šareni gumb youtube pretplate za svoj blog, stoga ne zaboravite pretplatite se na ažuriranja. Pozdrav svima!

Mislim da nije tajna da na brzinu učitavanja stranice utječu mnogi čimbenici. Ako netko ne zna, ukratko ću reći sljedeće: brzina učitavanja ne utječe samo na to hoće li posjetitelj čekati da se vaša stranica učita, nego i SEO optimizacija. Doista, danas su mnoge tražilice počele uzimati u obzir brzinu učitavanja stranica prilikom rangiranja stranica. Stoga, što se vaša stranica brže učitava, to više posjetitelja možete dobiti s tražilica, a posljedično, više novca zaraditi od ovoga.

Stoga sam u ovom članku odlučio prikupiti 10 najboljih savjeta o tome kako možete povećati brzinu učitavanja web stranice i web stranice u cjelini. Članak ne pretendira biti genijalan i namijenjen je početnicima.

Dakle, idemo:

1. Smanjite broj HTTP zahtjeva

80% učitavanja stranice usmjereno je na učitavanje komponenti stranice: skripte, fotografije, CSS datoteke, flash. HTTP/1.1 specifikacija preporučuje da preglednici ne bi trebali preuzimati više od 2 komponente web stranice s jednog hosta paralelno. Smanjenjem broja ovih komponenti smanjujemo broj HTTP zahtjeva prema poslužitelju i posljedično povećavamo brzinu učitavanja stranice.

Ali kako smanjiti broj zahtjeva prema poslužitelju bez utjecaja izgled stranice?

2. Postavite CSS datoteke na početak stranice

Postavljanjem priključka na css datoteka m u zaglavlju stranice dobivamo postupno iscrtavanje stranice, tj. stranica će se učitavati postupno - prvo zaglavlje, zatim logo na vrhu, navigacija itd. – a to zauzvrat služi kao izvrstan pokazatelj učitavanja stranice za korisnika i poboljšava se opći dojam sa stranice.

Postavljanje CSS datoteka na dno stranice sprječava mnoge preglednike da postupno prikazuju stranicu. To se objašnjava činjenicom da preglednik "ne želi" ponovno crtati elemente čiji se stil može promijeniti nakon učitavanja stranice. Stoga uvijek uključite sve svoje CSS datoteke na vrh stranice u odjeljak HEAD.

3. Postavite javascript na dno stranice

Postavljanjem javascript datoteka na dno stranice, omogućujemo pregledniku da prvo učita stranicu sa sadržajem, a tek onda počne učitavati javascript datoteke. Ako vaša stranica ide ukorak s vremenom i sadrži sve moguće interaktivne mogućnosti, tada može postojati nekoliko ovih javascript datoteka i mogu težiti nekoliko stotina kilobajta, pa tjeraju korisnika da čeka da se sve vaše javascript datoteke učitaju prije učitavanja stranica je katastrofalna.

Osim toga, vanjske .js datoteke blokiraju paralelno učitavanje. HTTP/1.1 specifikacija preporučuje da preglednici ne bi trebali preuzimati više od 2 komponente web stranice s jednog hosta paralelno. Dakle, ako se slike za vašu stranicu nalaze na različitim hostovima, dobit ćete više od 2 paralelna preuzimanja. A kada se skripta preuzme, preglednik neće pokrenuti nikakva druga preuzimanja, čak ni s drugih hostova.

4. Smanjite css i javascript

Minimizacija datoteke je uklanjanje svih nebitnih znakova iz koda kako bi se smanjila veličina datoteke i ubrzalo njezino učitavanje. U minimiziranoj datoteci uklanjaju se svi komentari i beznačajni razmaci, prijelomi redaka i tabulatori. Ovdje je sve jednostavno. Što je datoteka manja, pregledniku će manje vremena trebati da je preuzme. A ove 24 online usluge za sažimanje i optimiziranje CSS koda pomoći će vam da smanjite svoj kod.
5. Koristite poddomene za paralelna preuzimanja

Kao što sam rekao gore, prema specifikaciji HTTP/1.1, preglednici podliježu ograničenjima broja istovremeno učitanih komponenti web stranice, odnosno ne više od 2 komponente s jednog hosta. Stoga, ako vaša stranica ima puno grafike, onda je bolje da je premjestite na zasebnu poddomenu ili poddomene. Za vas će to biti isti poslužitelj, ali za preglednik će biti drugačiji. Što više poddomena stvorite, to više datoteka preglednik će se moći učitati u isto vrijeme i brže će se učitavati cijela stranica stranice. Sve što trebate učiniti je promijeniti adresu slika u novu. Vrlo jednostavan, ali učinkovit način.

6. Koristite predmemoriju preglednika

Predmemoriranje postaje iznimno važno za moderne web stranice koje koriste opsežne JavaScript veza i CSS. Činjenica je da kada posjetitelj prvi put posjeti vašu stranicu, preglednik će preuzeti sve javascript i css datoteke, te će također učitati sve grafike i flash, no pravilnim postavljanjem Expires HTTP zaglavlja učinit ćete stranicu komponente koje se mogu predmemorirati. Na ovaj način, kada posjetitelj ponovno posjeti vašu stranicu ili ode na sljedeća stranica Vašeg web-mjesta, predmemorija preglednika već će sadržavati neke potrebne datoteke i preglednik ih neće morati ponovno preuzimati. Otuda dobitak u brzini učitavanja stranice.

Stoga postavite HTTP zaglavlje Expires gdje god je to moguće, nekoliko dana ili čak mjeseci unaprijed. Kako bi Apache web poslužitelj izdao HTTP Expires zaglavlja koja su u skladu s preporukama, trebate dodati u .htaccess datoteku koja se nalazi u korijenskoj mapi stranice, sljedeće retke:
Header append Cache-Control "public" FileETag MTime Size ExpiresActive On ExpiresDefault "pristup plus 0 minuta" ExpiresByType image/ico "pristup plus 1 godina" ExpiresByType text/css "pristup plus 1 godina" ExpiresByType text/javascript "pristup plus 1 godina" ExpiresByType slika/gif "pristup plus 1 godina" ExpiresByType slika/jpg "pristup plus 1 godina" ExpiresByType slika/jpeg "pristup plus 1 godina" ExpiresByType slika/bmp "pristup plus 1 godina" ExpiresByType slika/png "pristup plus 1 godina"
Ovaj fragment konfiguracijske datoteke Apache web poslužitelji provjerava prisutnost mod_expires modula i, ako je mod_expires modul dostupan, uključuje slanje Expires HTTP zaglavlja, koja postavljaju razdoblje pohrane za gore navedene objekte u predmemoriju preglednika i proxy poslužitelja na godinu dana od trenutka prvo preuzimanje. Postavljanjem predmemorije preglednika na takav životni vijek, može biti teško ažurirati datoteke. Stoga, ako ste promijenili css sadržaj ili javascript datoteku i želite da se te promjene ažuriraju u predmemoriju preglednika, trebate promijeniti naziv same datoteke. Obično se nazivu datoteke dodaje verzija datoteke, na primjer: styles.v1.css

7. Koristite CDN za učitavanje popularnih JavaScript biblioteka

Ako vaša stranica koristi popularni javascript framework, kao što je jQuery, onda je bolje koristiti CDN za povezivanje.

8. Optimizirajte svoje slike

Potrebno je utvrditi prikladan format za svoje slike. Odabir pogrešnog formata slike može značajno povećati veličinu datoteke.

  • GIF-ovi su idealni za slike s više boja, poput logotipa.
  • JPEG – odličan za detaljne slike velik broj cvijeće kao što su fotografije.
  • PNG je vaš izbor kada trebate sliku visoke kvalitete s prozirnošću.
Postoje dva načina za optimizaciju slike: pomoću programa ili mrežnih usluga na Internetu za komprimiranje slika. U prvom slučaju trebat će vam određeno znanje za rad s ovim ili onim programom, ali svatko može koristiti online usluge. Sve što trebate učiniti je preuzeti potrebne slike, a sam servis ih optimizira i daje poveznicu za preuzimanje već komprimiranih datoteka.

Evo nekoliko online usluge za optimizaciju slika:

9. Ne skalirajte slike

Nemojte mijenjati veličinu slike pomoću atributa širine i visine oznake ili kada CSS pomoć. To također negativno utječe na brzinu učitavanja stranice. Ako imate sliku veličine 500x500px, a na stranicu želite umetnuti sliku veličine 100x100px, onda je bolje promijeniti veličinu originalna slika uz pomoć grafički urednik Photoshop, ili bilo koji drugi. Što je slika svjetlija, to će manje vremena trebati da se učita.

10. Koristite Gzip kompresiju

Kao što su studije pokazale, gzip kompresija tekstualna datoteka“on the fly” u 95–98% slučajeva omogućuje vam smanjenje vremena potrebnog za prijenos datoteke u preglednik. Ako pohranjujete arhivirane kopije datoteka na poslužitelj (u memoriju proxy poslužitelja ili samo na disk), tada se općenito veza može osloboditi 3-4 puta brže.

Počevši od HTTP/1.1, web klijenti pokazuju koje vrste kompresije podržavaju postavljanjem zaglavlja Accept-Encoding u HTTP zahtjevu.

Accept-Encoding: gzip, deflate

Ako web poslužitelj vidi takvo zaglavlje u zahtjevu, može primijeniti kompresiju odgovora pomoću jedne od metoda koje je naveo klijent. Prilikom izdavanja odgovora, poslužitelj obavještava klijenta putem zaglavlja Content-Encoding o tome kako je odgovor komprimiran.

Kodiranje sadržaja: gzip

Podaci koji se prenose na ovaj način su približno 5 puta manji od originalnih podataka, što značajno ubrzava njihovu isporuku. Međutim, postoji jedan nedostatak: povećava opterećenje web poslužitelja. Ali problem s serverom uvijek se može riješiti. Zato ne obraćajmo pažnju na ovo.

Kako biste omogućili GZIP kompresiju na svojoj web stranici, trebate napisati sljedeće retke koda u .htaccess datoteku:
AddOutputFilterByType DEFLATE text/html AddOutputFilterByType DEFLATE application/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

Ako ovu metodu radilo, onda super, ako nije, onda možete isprobati ovaj kod:

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 Da mod_gzip_item_include datoteka \.js$ mod_gzip_item_include datoteka \.css$

Ali opet, ovaj kod ne radi na svim poslužiteljima, stoga je bolje kontaktirati službu podrške vašeg pružatelja usluga hostinga i razjasniti ovo pitanje.

Pa, to je zapravo sve što sam ti htio reći. U ovom sam članku pokušao navesti sve glavne metode optimizacije klijenta za povećanje brzine učitavanja web stranice. Osim optimizacije klijenta, postoji i optimizacija poslužitelja. Ali ovo je tema za poseban članak.

Ako ste nešto propustili ili imate nešto za dodati, napišite svoje mišljenje u komentarima ispod ovog posta. Hvala na pozornosti!

Predmemoriranje je važno za optimizaciju web stranice izgrađene na WordPressu jer povećava brzinu učitavanja stranice. Posjetiteljima stranice to se neće svidjeti dugo učitavanje, zbog čega mogu jednostavno napustiti vašu stranicu ne čekajući informacije, čime se povećava broj kvarova. Takvi parametri ponašanja slabo se odražavaju na rangiranje stranice tražilice, koji spuštaju svoju poziciju u rezultati pretraživanja. Kako biste spriječili da se to dogodi, povežite WordPress dodatak Super Cache, koji će automatski obaviti posao spremanja stranica u predmemoriju.

Opis i mogućnosti dodatka

Predmemorija je privremena pohrana sadržaja web stranice. Umjesto preuzimanja podataka o stranici (kao što su slike) s poslužitelja kada ponovno posjetite stranicu, oni će se učitati u preglednik iz predmemorije, što će znatno ubrzati učitavanje stranice. Učinkovit alat Za predmemoriranje pod WordPressom postoji poseban dodatak za WordPress Super Cache.

Dodatak generira statične stranice mjesto i pohranjuje njihove verzije u predmemoriji na poslužitelju. Nakon toga, poslužitelj vašeg pružatelja usluga hostinga će "dati" posjetiteljima statičke datoteke umjesto da morate svaki put pristupiti bazi podataka kako biste dohvatili elemente stranice.

Što još može WordPress Super Cache dodatak:

  • Omogućuje korištenje mreže za isporuku sadržaja (CDN) zajedno s predmemorijom, redistribucijom najčešće traženih materijala s poslužitelja koji je najbliži posjetitelju.
  • Podržava predmemoriranje verzija stranica za tablete i pametne telefone.
  • Koristi kompresiju stranice za smanjenje vremena učitavanja stranice.
  • Podržava nekoliko vrsta predmemoriranja.
  • Pruža mogućnost vraćanja predmemorije, tako da možete vidjeti predmemorirane stranice čak i kada se stvori nova predmemorija.

Virtualni web hosting za popularni CMS:

Instaliranje dodatka WP Super Cache

Dodatak se može pronaći u WordPress repozitoriju. Da biste to učinili, prijavite se na administrativnu ploču koristeći svoje korisničko ime i lozinku.

  • Odaberite izbornik "Plugins" (1) i kliknite "Add New" (2).
  • U traku za pretraživanje upišite naziv WP Super Cache dodatka (3).
  • Pronađite na popisu koji se pojavi prava opcija i kliknite gumb "Instaliraj" (4).
  • Nakon instalacije, aktivirajte dodatak klikom na odgovarajući gumb.

Čak i nakon aktivacije, WP Super Cache dodatak je onemogućen prema zadanim postavkama, tako da ćete vidjeti upozorenje na vrhu ekrana.

Da biste ga omogućili, slijedite ponuđenu poveznicu do stranice za upravljanje dodatkom ili odaberite naredbu “Postavke” koja se nalazi odmah ispod naziva dodatka.

Na stranici postavki možete vidjeti drugu obavijest o promjeni datoteke wp-config.php, nakon osvježavanja stranice ona će nestati.

Da bi dodatak radio:

  1. Odaberite opciju "Caching Enabled".
  2. Pritisnite gumb "Ažuriraj".
  3. Zatim provjerite je li dodatak ispravno povezan pomoću gumba "Provjeri".

Ako je dodatak ispravno povezan, vidjet ćete istaknuto upozorenje zelena. Dodatak dvaput pristupa stranici i uspoređuje vremenske oznake obiju kopija. Ako se podudaraju, predmemorija je omogućena za web mjesto.

U suprotnom, poruka će biti prikazana crveno i morat ćete potražiti uzrok problema.

Postavke dodatka WordPress Super Cache - kako omogućiti i konfigurirati predmemoriju

WP Super Cache moćan je dodatak s mnogo opcija, od kojih mnoge mogu dodatno poboljšati performanse stranice. Na ploči naprednih postavki dodatka možete fleksibilno upravljanje postavke predmemoriranja web stranice.

Provjerite je li predmemorija omogućena i odaberite jedan od tri načina održavanja predmemorije:

  1. mod_rewrite je najviše brza opcija, koji omogućuje WordPressu posluživanje statičnih stranica iz predmemorije bez pristupa PHP tumač na poslužitelju;
  2. PHP način se koristi prema zadanim postavkama i troši više resursa, što može biti neprofitabilno ako je poslužitelj jako opterećen;
  3. pojednostavljeno predmemoriranje manje je učinkovito od prethodne opcije, ali će zahtijevati minimum resursa.

Sljedeće opcije zahtijevaju postavke u odjeljku "Razno".

  1. Opcija "Sažimanje datoteka predmemorije" može biti u sukobu s drugim algoritmima za sažimanje. Ako vaša stranica također ima dodatke koji omogućuju kompresiju, nemojte označavati ovaj okvir..
  2. Predmemoriranje stranice nije potrebno za ovlašteni korisnici ili oni koji ostavljaju komentare na stranici. Omogućite ovu opciju kako biste takvim posjetiteljima omogućili da vide stranicu kako trenutno izgleda.
  3. Automatska ponovna izgradnja predmemorije nije potrebna ako stranica ima često ažurirane informacije. U protivnom će posjetitelji vidjeti zastarjele stranice.
  4. Pogreška 304 javlja se kada poslužitelj kaže pregledniku da se sadržaj stranice nije promijenio od zadnjeg posjeta. U tom se slučaju učitavanje događa iz predmemorije preglednika, što dodatno ubrzava web mjesto.
  5. Na stranici sa GET parametar Postoji pretraga prema određenim kriterijima (datumima, cijenama) specifičnim za svaki posjet. Takve stranice nije potrebno spremati u predmemoriju.
  6. Ako se registrirani korisnici smatraju anonimnima, predmemorirane stranice bit će poslužene svima bez iznimke.
  7. Posljednja opcija u ovom odjeljku je oglašavanje dodatka s vezom na autora ugrađenom u podnožje.

Odjeljak "Napredno" sadrži postavke za napredne korisnike. Obično ih možete ostaviti isključenima za obične web stranice.

  1. Ako vaše web mjesto sadrži dinamičke elemente, neki od njih možda neće raditi ispravno kada su u predmemoriju. U tom slučaju trebat će vam Lite ili PHP način predmemoriranja i omogućena opcija dinamičkog predmemoriranja.
  2. Za stranice dizajnirane posebno za mobilni uređaji, morat ćete omogućiti podršku ako predložak ne reagira.
  3. Opcija "Ukloni podršku za UTF-8" nije potrebna ako se svi znakovi na web-mjestu prikazuju normalno.
  4. Brisanje datoteka predmemorije na novim postovima može se omogućiti ako se stranica često ažurira.
  5. Bit će potrebno dodatno usklađivanje ako postoje problemi s predmemoriranjem bilo koje stranice.
  6. Ako je posjetitelj ostavio komentar na stranici, predmemorija će se ažurirati nakon moderiranja.
  7. Stranice spremljene u predmemoriju možete vidjeti na kartici "Status predmemorije", tako da opcija nije obavezna.
  8. Opcija usporava datoteke upozorenjem mogući problem na poslužitelju prilikom spremanja stranica u predmemoriju.
  9. Opcija za razvojne programere učitava predmemoriju tek nakon što se WordPress učita.

Ispod opcija nalazi se adresa lokacije predmemorije i osobni ključ u slučaju da želite pogledati stranicu bez predmemorije i bez prethodnog brisanja predmemorije.

Ako odaberete predmemoriju stranica pomoću metode mod-rewrite, dodatak će od vas tražiti da ažurirate dopuštenja za pisanje. Da biste to učinili, pomaknite se prema dolje do gumba "Update Mod-Rewrite Rules" i kliknite ga.

Zatim postavite vrijeme i razdoblje za koje će podaci u predmemoriji na poslužitelju biti valjani. Počnite s 3600 sekundi (1 sat). Ako na vašoj stranici veliki brojčlanke možda treba pitati duže vrijeme do nekoliko dana, nakon čega će se predmemorija smatrati zastarjelom.

Tamo možete zakazati brisanje predmemorije prema rasporedu, postaviti mjerač vremena i interval ažuriranja. Za stranice koje se ne mijenjaju, prikupljanje smeća može se u potpunosti otkazati postavljanjem vrijednosti vremenskog ograničenja na nulu. Možete spriječiti predmemoriranje određenih informacija na web-mjestu (na primjer, dio sa stalno ažuriranim informacijama) označavanjem okvira u desni dio

“Prihvatljiva imena i zabranjene adrese” ili ručno dodajte adrese stranica. Očistite popis robota za pretraživanje ako želite da primaju informacije iz predmemorije i ne učitavaju poslužitelj prilikom indeksiranja stranice. Za visokoopterećene stranice s više od tisuću prometa jedinstvene posjete dnevno preporuča se uključiti zatvoreni način rada

. U tom slučaju će se poništiti ažuriranje predmemorije. Povežite se na kartici "Postavke CDN-a". plaćena usluga

za učinkovitu distribuciju informacija prilikom preuzimanja iz predmemorije. Kartica Status predmemorije pokazat će vam koje su stranice spremljene u predmemoriju i koje se mogu ručno ukloniti s popisa. Idite na karticu "Zajednička predmemorija" za konfiguraciju postavki načina rada predopterećenje

  • . Zašto biste možda trebali koristiti potpuno statični sadržaj?
  • Za uštedu resursa poslužitelja.
  • Za poboljšanje brzine učitavanja stranice.

Za posluživanje stare stranice čiji se sadržaj više ne ažurira. Kada odaberete funkciju “Create”. dijeljena predmemorija sada" dajte dodatku vremena da stvori predmemoriju automatski način rada

. Proces možete pratiti prebacivanjem na karticu "Status predmemorije".

Kartica "Dodaci" bit će potrebna samo ako namjeravate povezati druge dodatke koji ne utječu na predmemoriju datoteka.

Pomoću predmemorije preglednika, kako očistiti predmemoriju WordPressa

Nakon nekog vremena pokretanja WP Super Cache dodatka, primijetit ćete formiranje predmemorije za web mjesto. Ispravna postavka Dodatak će značajno poboljšati vrijeme učitavanja stranice. Predmemorirane stranice pohranjuju se kao HTML ili PHP datoteke na vašem hosting poslužitelju. Obično poslužitelj zna koje su stranice ažurirane i korisniku daje najnoviju verziju. Međutim, ako imate problema s prikazom ažuriranih informacija, možete ručno očistiti predmemoriju. Uklonite predmemorirane stranice s poslužitelja pomoću naredbe “Delete all cache” na upravljačkoj ploči ili klikom na isti gumb u postavkama dodatka.

Kada korisnik prvi put posjeti web mjesto, njegov preglednik kontaktira udaljeni poslužitelj koji hostira web mjesto. Zahtjev preglednika i odgovor poslužitelja zahtijevaju određeno vrijeme, s obzirom na to da se elementi stranice (slike, stilovi, skripte) učitavaju jedan za drugim. Ako stranica sadrži veliki broj stavke ili su velike veličine, njihovo učitavanje može potrajati dugo.

Međutim, korisnički preglednik može predmemorirati duplicirane elemente. Zbog toga se stranica brže učitava jer se datotekama pristupa s tvrdi disk uvijek brže od dohvaćanja podataka iz udaljeni poslužitelj. Slično tome, značajka čišćenja predmemorije prisutna je u svakom pregledniku.

Ako ne vidite promjene na web mjestu koje je potrebno ažurirati, izbrišite predmemoriju pomoću upravljačke ploče postavki preglednika ili pogledajte stranicu u privatni način rada pregledavanje (ovaj način ne koristi spremljene stavke, kao što su lozinke i predmemorija).