Kako povećati opterećenje stranice. Riješite se nepotrebnih upita u kodu predloška

Direktor marketinga jednog od odjela Optify. Ima 20 godina iskustva u lansiranju razni proizvodi i usluge u e-trgovini, računalne igrice i druga područja.

Algoritmi za rangiranjeGoogle uzima u obzir brzinu učitavanja stranice

9. travnja 2010 godine google službeno su objavili da njihovi algoritmi uzimaju u obzir brzinu učitavanja stranice. Glasine su kružile mnogo prije toga - kada je tvrtka počela obraćati posebnu pozornost na brzinu, puštajući proizvode Chrome ( brzi preglednik) i SPDY ( brzi protokol prijenos web sadržaja) i promicanje ultra-brzih širokopojasnih kanala... U ovom članku pokušat ćemo objasniti kako Google određuje brzinu i kako možete provjeriti brzinu učitavanja stranice i povećati je.

Vjerujemo u to brzina učitavanja stranice je izvrstan dodatak ostatku popisa čimbenika koji određuju rang stranice na Googleu, iz dva glavna razloga:

1. Brzina učitavanja stranice izuzetno je važno za korisničko iskustvo. Istraživanja pokazuju da sat otkucava u umu prosječnog korisnika dok čeka da se otvori stranica. S povećanjem brzine korištenja interneta općenito, porasla su i očekivanja u pogledu brzine. možete pročitati Google post na tu temu interno testiranje brzina i njen utjecaj. Tako,

2. Brzina učitavanja stranice je čimbenik koji programer može mjeriti, pratiti i optimizirati. Mnogo u Google algoritam izvan naše kontrole, ali možemo poboljšati ovaj pokazatelj. U nastavku je navedeno nekoliko alata koje možete koristiti za analizu brzine web stranice, kao i 6 savjeta za poboljšanje brzine učitavanja i ranga stranice.

Kako Google određuje brzinu?

Postoje dvije glavne metode za analizu učitavanja stranice:

1. Odgovor Google botu. GoogleBot je agentski program koji indeksira veze po cijelom webu, kategorizira stranice i sadržaj te sve to šalje Googleu, koji obrađuje podatke koristeći vlastiti algoritam. Google bot jednostavno prikuplja informacije, ne analizira ih niti procjenjuje. Međutim, ima neka ograničenja u pogledu toga koliko potpuno indeksira određenu stranicu, budući da je potrebno puno vremena za skeniranje milijardi stranica. Ovo je jedan od razloga zašto se preporučuje imati čist kod, staviti dobar sadržaj na vrh stranice i staviti dupli kod (kao što je CSS) u zasebne datoteke.

2. Vrijeme učitavanja do Google podaci Alatna traka. Google je vrlo agresivan u promicanju i popularizaciji svojih besplatnih alata. Jedan od razloga za to je mogućnost da Google koristi svoju nadzornu ploču kao platformu za analizu pojedinačnih web-mjesta i stranica.

Alati za mjerenje brzine učitavanja stranice

Ima ih mnogo besplatni alati i dodaci za mjerenje performansi stranice. Evo nekih od najboljih, po našem mišljenju:

1. Ako imate Google Webmaster račun (a morate ga imati), tada možete koristiti poseban alat u odjeljku Labs. On će vam dopustiti da primate Generalna ideja o tome koliko se brzo vaše stranice učitavaju u odnosu na stranice drugih web-mjesta u statistici.

2. Brzina stranice je dodatak za Firebug / Firefox preglednike koji otkriva koliko se stranica učitava i daje preporuke kako to popraviti.

3. YSlow je još jedan dodatak za Firebug / Firefox koji analizira brzinu i daje preporuke.

Što ova promjena algoritma znači za vas

Poboljšanje brzine učitavanja stranice nije toliko kritično koliko je, recimo, ispravno naslovne oznake, URL struktura, jedinstveni sadržaj ili kvalitetne ulazne veze. No, uz sve ostale stvari jednake, stranica koja se brže učitava ima prednost. nedvojbeno brze stranice prikladnije za korisnike, što znači povećanje posjeta, smanjenje pokazatelja nepotrebnih pogleda i povećanje broja pregleda po posjeti. U svakom slučaju, najbolje je dati sve od sebe da se vaše stranice brzo učitavaju.

6 načina za povećanje brzine učitavanja stranice i povećanje ranga

1. Optimizirajte svoje slike: velike slike mogu se izrezati, komprimirati i brže učitati.
2. Umjesto pozadinskih slika, samo koristite boje: to će se brže učitavati.
3. Koristite predmemoriju: predmemorija je pogodna za korisnike, budući da se slike i druge statične datoteke preuzimaju samo pri prvom posjetu, a pri sljedećim posjetama više nije potrebno.
4. Učitavajte vanjski Javascript i pozive posljednje: najgore što možete učiniti je natjerati posjetitelje da čekaju da se sav sadržaj učita u isto vrijeme. Kad god je moguće, provjerite je li vaš sadržaj učitan prvi, a vanjski sadržaj nakon toga.
5. Koristite zasebne datoteke za ponavljajući kod: zasebne datoteke se najčešće koriste s tablicama CSS stilovi i omogućuju vam da olakšate html-kod stranice (manje redaka koda), a također pružate središnju datoteku koju je lako pronaći za unošenje promjena u važne dijelove koda (na primjer, u stilske tablice).
6. Koristite CSS stilove umjesto HTML tablice: Prije učitavanja same proračunske tablice, web preglednici (IE, Firefox, itd.) čekaju da se učita sav njezin sadržaj. CSS čini ovaj proces bržim (i lakšim za ažuriranje).

1. Odaberite jedan od gore navedenih alata i instalirajte ga.
2. Testirajte brzinu učitavanja za glavnu stranicu i nekoliko drugih stranica različitih vrsta.
3. Odredite koje se komponente mogu poboljšati. Raspravite o tome sa svojim tehničkim osobljem i webmasterom.
4. Za usporedbu, pokrenite iste testove sa stranicama konkurenata.

Nadam se da će vam sve gore navedeno pomoći da ubrzate učitavanje stranica vaše stranice – i korisnici i tražilice će to cijeniti.

Pozdrav dragi čitatelji! Nedavno sam dobio komentar u kojem mi je postavljeno pitanje: koja je moja tajna brzog učitavanja stranice? Odlučio sam ne odgovarati komentarom (pisati previše), nego napisati koristan post na ovu temu za sve odjednom. Odnosno, danas ćemo govoriti o tako važnom čimbeniku kao što je.

Što mislite zašto je potrebna stranica za brzo učitavanje? Razmišljajmo logično. Pišemo za ljude, ljudi bi trebali čitati naše postove i steći znanje. Naša web stranica ili blog je platforma za objavljivanje znanja! Pristup njima trebao bi biti otvoren i brz. Što ako vašoj web-lokaciji treba 15-20 sekundi da se učita? Bi li korisnik odlučio ostati na njemu? Odgovor je nedvosmislen – NE!

Dapače, posjetitelj više neće biti vaš, već vaš konkurent! Čak i ako je niže u Rezultati pretraživanja... Čak i ako pišete mega-sjajne članke, ali sve najbolje, jedva čekaš uspjeh.

Kao što sam već rekao: Morate uštedjeti vrijeme. Teče u jednom smjeru i ne može se vratiti! Možete dobiti natrag svoj novac ili bilo što drugo, ali nema šanse za vrijeme! Što ja to radim? I na to da treba poštivati ​​i svoje i tuđe vrijeme! Vi samo trebate napraviti nekoliko elementarnih koraka i vaša stranica/blog će se otvoriti puno brže, a time će se dodati više posjetitelja.

Brzina učitavanja web stranice — važan faktor prilikom postavljanja stranice. Potrebno je pokušati na bilo koji način, smanjiti vrijeme čekanja posjetitelja. Isto tako, tražilice "gledaju" na brzinu, a ako je mala (stranici se dugo učitava), onda je manje poštovanja. A ako bude manje poštovanja, onda ćete se naći daleko od TOP-a.

Sada ćemo shvatiti kako povećati brzinu učitavanja web stranice, ali prije toga ćemo analizirati nekoliko servisa u kojima možete provjeriti upravo tu brzinu.

Provjera brzine učitavanja web stranice

1) Brzina stranice na mreži je internetska provjera brzine web-mjesta od Googlea. Osim provjere brzine, servis daje popis preporuka za ubrzanje i optimizaciju stranice. Vrlo korisna stvar!

2) Pingdom alati - online usluga provjera brzine koja je dostojna niskog naklona. Prvi put kada sam odlučio testirati brzinu svog bloga, iskoristio sam ga. Također daje razne preporuke i savjete.

3) je treća usluga koja, po mom mišljenju, zaslužuje pažnju. Ovdje se prosječna brzina određuje generiranjem zahtjeva.

4) WebWait - naizgled jednostavno, ali vrlo zgodna usluga... Upišite adresu svoje stranice u poseban prozor, pričekajte neko vrijeme i rezultat je spreman. Čini mi se da ova usluga određuje najtočnije vrijeme.

Ovo su usluge za koje vam nudim provjera brzine učitavanja web stranice... Jeste li provjerili svoju stranicu? Sada je vrijeme da pređemo na glavnu stvar - ubrzanje stranice .

Kako ubrzati brzinu učitavanja web stranice?

Vrijeme je, razgovarajmo o ubrzanju učitavanja web stranice. Što mislite, od čega u većini slučajeva mala brzina učitavanje stranice? Naravno, zbog svih vrsta ukrasa, gadgeta, slika koje iskaču gdje god je to moguće, videa itd.

Da, naravno i zbog ovoga, ali ne samo. Brzina je također pogođena razni kodovi, skripte, cache i slično. Stoga je potrebno sve to što bolje optimizirati, sve treba biti profesionalno. Kako je? - pitaš. Jednostavno je, sad ću te naučiti!

1. Optimiziranje slika

Prvo što bih želio istaknuti je potreba za pravilnom optimizacijom slika. Ako ih ima mnogo različite slike, nije ih potrebno sve brisati kako bi se ubrzalo preuzimanje, samo ih treba ispravno optimizirati.

Odnosno, trebate promijeniti veličinu i težinu slike. Ako vam je potrebna slika veličine 300 × 225 na vašoj web-lokaciji, ali je imate 600 × 450 - promijenite je putem bilo kojeg grafički uređivač, npr Adobe photoshop ().

Također, osim veličine slike, trebate odabrati najviše manja veličina... Što je veća veličina slike, to je sporija brzina preuzimanja. Pogotovo oni sa sporom internetskom vezom. Stoga, pokušajte težinu učiniti što manjom, samo nemojte pretjerivati, inače će kvaliteta biti užasna!

Također morate napisati dimenzije u kodu slike, čak i ako je postavljen onako kako jest (u standardne veličine), potrebno je.

2. Optimizacija skripti i kodova

Kao što sam rekao, na brzinu utječu razne skripte i kodovi. Ali ne svi, već samo oni koji su napisani s greškama ili općenito netočno.

Nisam guru u području web programiranja, pa nažalost ne mogu savjetovati što treba učiniti od A do Ž. Ali mogu dati neke savjete koje sam i sam koristio i koristim.

Također je moguće premjestiti skripte na kraj stranice, a ne tako da je bila na početku. Za što? Pa prosudite sami: otvara se stranica, i prije svega počinje učitavati razne skripte, koje u početku uopće nisu potrebne, a za to treba vremena! Bolje je prvo pustiti stranicu da se učita, a zatim početi učitavati skripte. Ovako će biti puno brže.

CSS možete skratiti referencom i skratiti Java Script ovdje... Samo slijedite poveznice, napišite put do svojih datoteka, zatim kliknite na određeni gumb, spremite dobivenu datoteku na svoje računalo i prenesite je na web-mjesto, na primjer, putem ftp-a.

Ima ih još kratki kodovi koje zamjenjuju duge skripte i prirodno ubrzavaju učitavanje. Ali sada neću govoriti o njima, ova tema je zaseban članak. Usput, uskoro ću objaviti seriju članaka o zamjeni ovih skripti, kako to ne biste propustili, savjetujem vam da se pretplatite!

3. Omogućite Gzip kompresiju stranice

O ovoj metodi sam naučio relativno nedavno. Ali nakon što sam ga probala, bilo mi je samo drago. Doista, nakon omogućavanja kompresije, stranica se značajno ubrzava. Jedina negativna stvar je da postoji određeno opterećenje na hostingu.

Da biste omogućili Gzip kompresiju, trebate napisati sljedeće u .htaccess datoteku:

AddOutputFilterByType DEFLATE tekst / html tekst / običan tekst / xml aplikacija / xml aplikacija / xhtml + xml tekst / javascript tekst / css aplikacija / x-javascript BrowserMatch ^ Mozilla / 4 gzip-only-text / html BrowserMatch ^ Mozilla-gzip BrowserMatch bMSIE! Bez gzipa! Gzip-samo-tekst / html mod_gzip_on Da mod_gzip_item_include file \ .js $ mod_gzip_item_include file \ .css $

Još jednom, nakon omogućavanja gzip kompresije, brzina se značajno povećava! Stoga ne biste trebali preskočiti ovu stavku.

4. Predmemorija preglednika

Mnogi od vas znaju što je predmemorija preglednika. A tko ne zna, objasnit ću - ovo je nešto od privremene memorije, koja pohranjuje sve radnje koje ste izvršili u pregledniku.

Dakle, cache se može koristiti za ubrzavanje stranice. Odnosno, za nekoga tko je već na neki način posjetio vašu stranicu, brzina će biti veća. Sve će “letjeti”. A za one koji su došli prvi put, ova metoda neće raditi. A kad se vrati, sve će početi raditi.

Da bi sve ovo počelo raditi potrebno je u .htaccess unijeti sljedeće:

ExpiresActive On ExpiresByType aplikacija / javascript "pristup plus 1 godina" ExpiresByType tekst / javascript "pristup plus 1 godina" ExpiresByType tekst / css "pristup plus 1 godina" ExpiresByType slika / gif "pristup plus 1 godina" Istječe /acjTypeg "slika" ExpiresByType godina "ExpiresByType image / png" pristup plus 1 godina "Set zaglavlja Kontrola predmemorije: privatni set zaglavlja Kontrola predmemorije: javni BrowserMatch" MSIE "force-no-vary BrowserMatch" Mozilla / 4. (2) "force-no-vary

Nije sve tako teško kao što se čini. Nije li? Ovim sam htio reći da sada znamo kako provjerite i ubrzajte brzinu učitavanja web stranice Rusija, Tomska oblast, Tomsk, +7 952 160 36 17

Bok dečki!

Danas će biti jedan od kritične teme u interna optimizacija mjesto. Materijal je odličan, ali praktičan i od pomoći. Teške trenutke potkrijepila sam video tutorialima.

Razgovarajmo o tome kako ubrzati učitavanje vaše stranice pomoću 7 radnih metoda. Možda su svima poznati. Ali primijetio sam da ih ne koriste svi. A u kompleksu, još više, malo ljudi.

Općenito, opisat ću sve metode u sadržaju točku po točku, a zatim čitati i primjenjivati ​​sve u praksi.

Prije nego što ubrzam stranicu, želim reći nekoliko riječi o važnosti ove akcije i kako provjeriti brzinu učitavanja.

Odavno je poznato da je brzina učitavanja resursa jedan od čimbenika rangiranja u rezultatima pretraživanja. Ako uzmete apsolutno 2 identične stranice, ali će se jedna brže učitati, tada će i ona imati više pozicije u SERP-u. Ali to ne znači da će prvi biti na 30. poziciji, a drugi na 1. mjestu. Ne, samo će stranica s bržim učitavanjem imati nešto bolju poziciju.

Stoga, ako postoje neki laki načini da na bilo koji način prestignete naše konkurente, onda to trebate učiniti. Štoviše, postoji mnogo takvih metoda. Koristeći ih sve, ići ćemo u pravom smjeru u prestizanju naših konkurenata.

Što se tiče provjere brzine učitavanja web stranice, uvijek sam koristio uslugu čekati na webu... Nakon što odete na nju, samo trebate umetnuti adresu bilo koje stranice na svojoj web stranici i početi provjeravati.

Prema zadanim postavkama, usluga će provjeriti brzinu učitavanja stranice 5 puta kako bi odredila prosjek. Interval između zahtjeva bit će 5 sekundi. Ako želite promijeniti obje vrijednosti, tada sam na gornjoj slici istaknuo odgovarajuće postavke plavim okvirom. Prvi je broj provjera, drugi je interval između zahtjeva.

Upravo sam provjerio brzinu preuzimanja jednog od mojih članaka. Na temelju rezultata 5 testova, dobio sam prosječan rezultat od 0,82 sekunde.

Naravno, može biti teško postići malu vrijednost i ovisi o mnogim čimbenicima:

• Količina sadržaja na stranici;
• Broj učitanih skripti;
• Veličina grafike na stranici i na web mjestu u cjelini;
• Broj dodataka.

Stoga morate pokušati smanjiti utjecaj svih ovih čimbenika. Počinjemo dalje razgovarati o tome. Prijeđimo na prvi i, možda, najjednostavniji način.

Optimiziranje grafike

Nije tajna da je najznačajniji element svake stranice grafika. To uključuje i grafike na svakoj stranici i općenite grafike. Što se tiče grafike na svakoj stranici, to su grafike sadržaja - slike, screenshotovi, fotografije. Opća grafika je grafika koja ulazi u dizajn stranice. Sve to možemo optimizirati.

Ni u kojem slučaju ne smijete uključivati ​​grafike u punoj veličini u svoje članke. Ova se pogreška izgovara na stranicama posvećenim kulinarskim temama i fotografijama, kada se sve fotografije učitavaju u članke u punoj veličini.

Jedna fotografija snimljena DSLR fotoaparatom prosječne kvalitete bit će teška nekoliko megabajta. Ako takvu fotografiju učitate na stranicu, posjetitelj će je sve preuzeti prilikom ulaska na stranicu. Zamislite koliko bi vremena trebalo da se učita stranica da je objavljeno 10 velikih slika.

Odvojite vrijeme za ovaj trenutak kada objavljujete sadržaj. Jednom davno sam napisao članak o bez gubitka kvalitete. Materijal će vam biti vrlo koristan.

Što se tiče dizajna, pokušajte koristiti manje slika. Moguće je napraviti potpuno zdrav i organski dizajn koristeći CSS stilove. Čak će biti i najbolje. Ako pogledate vrlo popularne resurse, primijetit ćete da je njihov dizajn u biti Bijela pozadina S razdjelne linije... Ovo jako igra na ruku i ubija 2 muha jednim udarcem:

1. Smanjuje vrijeme utovara;
2. Poboljšava upotrebljivost potrošnje sadržaja.

Ako ne možete bez šarenih slika, onda će vam pomoći članak o smanjenju veličine slika (link iznad).

Predmemoriranje

Keširanje - možda bitni element u brzom učitavanju stranica web stranice. Posebno ovu funkciju korisno u slučaju velikog prometa, kada se u bazu podataka postavlja mnogo upita.

Da biste napravili predmemoriju na stranici (za WordPress), morate instalirati dodatak Hyper Cache. Pune upute nastavi čitati. Tamo sam sve prožvakao.

Također je moguće dodati neke kodove u .htaccess datoteku što će također omogućiti caching kao i gzip kompresiju. Iskreno, nisam primijetio njihov učinak na svojoj stranici. Možda zato što je moj blog već bio potpuno optimiziran. I ne vidim puno smisla u njima. I postoji jedan problem, jer nećemo moći očistiti predmemoriju. Tada neće biti vidljivih promjena na stranici. Stoga neću davati ove šifre da se kasnije ne biste razbijali kad se pojave problemi.

ne koristim ih. Keširanje s Hyper Cache dodatkom je više nego dovoljno.

Optimizacija učitavanja skripte

Ako je vaša stranica prilično funkcionalna (razni gumbi za društvene mreže, klizači, brojači posjećenosti itd.), onda na njoj postoji mnogo skripti.

Skripte su uvijek nepotrebne i veliki teret na stranici. Uvijek ih se riješite kad god je to moguće. Ako to nije moguće, onda ih možete učiniti da se učitavaju zadnjima, a također ih uklonite iz samog koda predloška kože.

Da biste učitali skripte na samom kraju učitavanja stranice, potrebno ih je postaviti na samo dno koda stranice, odnosno u podnožje. U WordPressu se to radi tako da se stavi u datoteku footer.php prije završne oznake..

Također možete postaviti skripte zasebna datoteka a ne u datoteci footer.php. A zatim učitajte ovu datoteku na kraj datoteke podnožja. Ovo je najbolji način za prijenos skripti na svoju stranicu.

Pokazat ću vam u praksi kako se sve to radi. Počet ću s video tutorialom.

Obično se većina skripti nalazi u datoteci header.php između oznaka a postavljaju se između oznaka... Kao primjer, prikazujem jednu skriptu iz moje datoteke zaglavlja.

Crvenim okvirom sam istaknuo dio koji nam treba. Kao što možete vidjeti, on je zatvoren u oznaci otvaranja i zatvaranja skripte, koji su istaknuti u plavim okvirima. Označio sam završnu oznaku crnim obrubom da pokažem gdje se nalazi sama skripta.

Da bismo ovu skriptu smjestili u zasebnu datoteku, moramo uzeti njen sadržaj (crveni okvir) i smjestiti je u novu datoteku koju kreiram s Notepad uređivač... Sadržaj nove datoteke izgledat će ovako.

Sada štedimo ovu datoteku js formatu i nazovite ga prijateljskim imenom. Nazvat ću ga "footer-scripts.js" kako bi bilo jasno da je ovo datoteka skripte koja se prikazuje u podnožju stranice.

Sada možete prenijeti ovu datoteku na stranicu kako bi skripte radile. Da biste to učinili, morate postaviti redak koda koji sadrži put do ove datoteke. Postavite kod u datoteku footer.php prije završne oznake/

Ovdje je moj redak koda.

U njemu ćete morati zamijeniti put do datoteke i njezin naziv, ako se zove drugačije. Radi lakšeg razumijevanja, dajem redak s naznakama.

Put do datoteke u ovom retku prikladan je za WordPress stranice. Ako imate stranicu na drugom motoru ili samo HTML stranicu, tada ćete sami morati promijeniti put.

Kada promijenimo redak, stavljamo ga u datoteku podnožja prije završne oznake tijela. Izgledat će kao na slici ispod.

Tako bi trebalo biti i s vama. Kao što vidite, osim ovog retka izlaze se i druge skripte. Stoga se zadnji utovaruju na mjesto utovara. Sam kod stranice postaje čišći i ugodniji za tražilice... Također igra ulogu u promociji.

Na taj način trebali biste se riješiti maksimalnog broja skripti u datotekama predložaka i pokušati ih ili potpuno izbrisati ili ih učitati kroz datoteku, kao što sam gore pokazao. Ovo je jedan od najboljih načina da ubrzate svoju web stranicu ako na njoj ima puno skripti.

Ako ne trebate smjestiti jednu skriptu u jednu datoteku, već nekoliko, onda samo spustite uvlačenje i stavite novi kod... Ali onda je bolje potpisati svaku skriptu kako se kasnije ne biste zbunili. Na primjer, možete preuzeti moju datoteku da biste je ciljali.

I još jedna napomena. Ne rade sve skripte u podnožju stranice. Neki rade samo kada su postavljeni u zaglavlje, odnosno u datoteku Header.php između oznaka. Na primjer, društveni gumb"Sviđa mi se" iz Vkontaktea ne radi u podrumu ako uzmete njegov kod iz društvena mreža... U tom slučaju, morat ćete smjestiti skriptu u zaglavlje.

Riješite se nepotrebnih upita u kodu predloška

Ovo je najviše težak način u ubrzavanju stranice koju pokreće neka vrsta motora, na primjer, WordPress. Njegova je bit u zamjeni linija php kod u datoteci predloška za već generirani kod kako biste se riješili nepotrebnog generiranja upita bazi podataka.

Trebamo datoteku header.php i sve unutar nje između oznaka ... Između ovih oznaka pohranjeni su php kodovi koji generiraju zahtjeve i prikazuju osnovne informacije. Cijelu stvar bit će lakše razumjeti uz pomoć video tutoriala koji sam pripremio u nastavku.

Sada opcija teksta.

Sve ću pokazati koristeći primjer niza koji generira zahtjev za prikaz kodiranja stranice. Redak u datoteci izgleda ovako.

Kao što vidite, ovo je php kod. Ako pogledate izvorni kod (ctrl + u) bilo koje stranice na stranici, vidjet ćete da ovaj php kod više nije tamo, ali će postojati HTML kod s navedenim kodiranjem.

Da biste se riješili ovog zahtjeva za generiranje kodiranja, trebate uzeti gotov niz iz izvornog koda i njime promijeniti php kod u datoteci predloška. Na kraju će biti ovako.

Riješili smo se jednog zahtjeva. Na isti način morate zamijeniti druge moguće linije. Naravno, ne može se sve učiniti, jer se ne ispisuje sve u izvornom kodu. Ali treba težiti tome maksimalan broj zamjene.

Također vam želim skrenuti pozornost na činjenicu da postoji kod za generiranje naziva stranice. Obično se sastoji od oznaka ... Ako namjeravate promijeniti naziv resursa, onda ili nemojte zamijeniti ovaj kod ili ne zaboravite promijeniti naziv kasnije u kodu datoteke, jer će se nakon zamjene naziv prikazati iz retka spremnosti s imenom. Naziv stranice neće biti generiran jer neće biti php koda. Razmotrite ovu točku.

Također, ne zaboravite izvršiti sve takve manipulacije s datotekama tek nakon toga. I učinite ih na računalu pomoću programa za uređivanje kako biste mogli poništiti izmjene. Za slične svrhe koristim Notepad.

Onemogući revizije

Opet ću te mučiti video tutorialom.

Revizije su automatsko spremanje kopije zapisa koje se izrađuju tijekom kreiranja zapisa u određenim intervalima.

Zapravo, ovo je korisna stvar, ali ponekad stvara puno smeća i učitava bazu podataka. Ne bih toplo preporučio onemogućavanje ove funkcije, jer ponekad štedi. Svjetlo može iznenada nestati, i što onda? A ako postoje kopije snimke, možete sigurno vratiti napredak. To se dogodilo više puta, znam iz vlastitog iskustva.

Sve sam ih onemogućio, ali ako ste početnik, ne preporučam da to radite. Bolje vrijeme s vremena na vrijeme očisti bazu podataka revizija, budući da njihova veliki broj stvara značajno opterećenje.

U korijenu motora nalazi se mapa WP-includes, koja sadrži datoteku default-constants.php. Morate ga otvoriti, u njemu pronaći sljedeći sadržaj.

if (! definiran ("AUTOSAVE_INTERVAL")) definira ("AUTOSAVE_INTERVAL", 60); / ** * @od 2.9.0 * / if (! definiran ("EMPTY_TRASH_DAYS")) definira ("EMPTY_TRASH_DAYS", 30); if (! definiran ("WP_POST_REVISIONS")) define ("WP_POST_REVISIONS", istina);

U vrijeme pisanja ovog teksta, sve ovo počinje od 277. retka. Sav ovaj kod odgovoran je za sigurnost naših zapisa. Sastoji se od 3 dijela, od kojih svaki počinje s if.

Prvi dio je odgovoran za interval za automatsko stvaranje revizije. Prema zadanim postavkama, vrijednost je 60 sekundi, odnosno jedna kopija zapisa stvara se svake minute. Zamislite da pišete članak više od jednog sata. Limenka zadanu vrijednost povećati, na primjer, do 10-20 minuta. Ova postavka radi samo kada su revizije omogućene.

if (! definiran ("AUTOSAVE_INTERVAL")) definira ("AUTOSAVE_INTERVAL", 600);

Postavite vrijednost u sekundama.

Drugi dio je odgovoran za vrijeme skladištenja izbrisani zapisi u košari. Kad izbrišemo zapise, oni idu u smeće. Standardno se tamo pohranjuju 30 dana, nakon čega se brišu. Ako postavite vrijednost na 0, zapisi se neće dodavati u smeće, već se odmah brišu bez mogućnosti oporavka.

if (! definiran ("EMPTY_TRASH_DAYS")) define ("EMPTY_TRASH_DAYS", 0);

Za rad revizija odgovoran je treći dio. Omogućeni su prema zadanim postavkama. Ako želite onemogućiti, tada se vrijednost true mora promijeniti u false ili postaviti na 0.

Pozdrav dragi čitatelji blog stranice. Vjerojatno ste već umorni od teme povećanja brzine učitavanja web stranice (), kojoj sam posvetio lavovski dio članaka objavljenih u siječnju. Ali što da radim, želim ocrtati sve što se shvatilo i učinilo da se ovaj blog ubrza, sve dok podmuklo sjećanje nije zbrisalo nijanse i bitne točke.

Danas želim pokušati sistematizirati sve što sam već napisao o optimizaciji brzine, kao i dodati bitne točke koje mogu malo smanjiti opterećenje hosting poslužitelja korištenjem ne dinamičke, već statičke Gzip kompresije.

Kako možete brzo povećati brzinu učitavanja svoje web stranice

Prvi put kada sam pokrenuo Page Speed ​​za početnu stranicu svog bloga, vidio sam ovu tužnu sliku:

Samo 72 boda od 100 mogućih i hrpa komentara označenih crvenom bojom. Istina, pošto sam slijedio gotovo sve preporuke koje mi je dao ovaj dodatak, početnu stranicu dobio od njega višu ocjenu od 94 boda.

Ali osim Page Speeda, možete vrlo jasno procijeniti brzinu učitavanja stranice i vidjeti sve učitane objekte u - Pingdomu i slično.

Isprva je učitano gotovo 90 objekata (ccs, js, slike) i svaki od njih trebao je poseban http zahtjev. Ali, analizirajući sve preuzete objekte koristeći gore navedene online usluge, kao i slijedeći savjete za brzinu stranice, uspio sam smanjiti njihov broj na tri desetke, što nije moglo ne utjecati na ukupnu brzinu:

Pa, sada se prisjetimo svih metoda po redu. I trebali biste započeti optimizaciju, vjerojatno, redoslijedom prikazivanja problematičnih područja u prozoru Page Speed, jer će to biti najučinkovitiji i ne teški koraci za implementaciju - ono što se naziva "jeftino i veselo".

Stoga sam prvu stvar (ccs, js, slike) napravio u preglednicima posjetitelja (tj. vas, dragi moji čitatelji).

Da, da, sa web postavke poslužitelj može kontrolirati ponašanje preglednika posjetitelja. U ovom slučaju, prvi govori drugom vrijeme tijekom kojeg bi se statični objekti trebali pohraniti u predmemoriju kako ih ne bi ponovno zatražili od poslužitelja.

Ovo je, na prvi pogled, beznačajna postavka, ali može učiniti čuda u povećanju brzine učitavanja stranica vašeg resursa za one posjetitelje koji su ga već jednom posjetili. u cacheu njihovih preglednika već postoje datoteke stilova i skripti, kao i slike iz sastava vašeg predloška, ​​koji će biti isti za sve stranice.

Nažalost, metode koje sam opisao koristeći .htaccess ne rade uvijek, zbog različitih razloga(nedostatak potrebnog modula i sl.), pa možete pokušati kontaktirati svog hostera po ovom pitanju jer će i njega to zanimati, jer optimalne postavke predmemorije u preglednicima korisnika će smanjiti opterećenje vašeg resursa na njegovom hostingu.

Sljedeći učinkovit korak za povećanje brzine učitavanja može biti kombiniranje vanjskih CSS stilskih datoteka ili JS skripti. Pročitajte o tome, i s čime sam shvatio.

Ali nisam mogao kombinirati vanjske scenarije, vjerojatno zbog nesporazuma, čak Osnove JavaScripta... Istina, imao sam samo dvije vanjske datoteke sa skriptama, tako da gubitak u brzini učitavanja stranice ne bi bio velik.

Ali osim kombiniranja vanjskih CSS stilova i skripti (ovo se radi kako bi se smanjilo ukupno objekata koji se mogu preuzeti, što će smanjiti broj http zahtjeva poslužitelju), te datoteke stila i skripte mogu se vrlo učinkovito komprimirati pomoću Gzipa (u stvari, to je isti Zip koji aktivno koristite na svom računalu).

Moguće je komprimirati CSS i Js datoteke nekoliko puta koristeći Gzip, ali možete dodatno smanjiti veličinu tih datoteka unaprijed optimizirajući njihov kod.

Dakle, morat ćete preuzeti na svoje računalo sve vanjske Css i Js datoteke uključene u učitavanje stranica (nakon što ih spojite, neće biti teško) i kreirati ih od svake od njih arhivska kopija s nastavkom .gz. To se može učiniti pomoću slobodni softver 7zip... Pokazat ću vam još jednim primjerom, jer je ovdje beskorisno teoretizirati.

Uzmimo glavnu tablicu stilova mog bloga, style.css, kao primjer. Nakon što ga spakiram u Gzip pomoću programa 7zip, imat ću style.css.gz arhivu.

Ali pošto neki preglednici neće htjeti uključiti datoteku stila s ekstenzijom .gz, tada iz nje uklanjamo završetak .gz i kao rezultat ponovno dobivamo style.css, ali koji je zapravo arhiva (još niste zbunjeni?).

Ali jednostavna zamjena izvorne datoteke style.css na poslužitelju (još nije Gzipped) s arhivom koju smo upravo stvorili, ali još uvijek nazvanu style.css, neće biti dovoljna.

Uostalom, neki preglednici još uvijek ne podržavaju kompresiju (obično su to stare verzije koje korisnici ipak još uvijek koriste), pa će pored style.css, koji će zapravo biti arhiva (sjetite se da smo iz nje uklonili ekstenziju .gz), trebamo staviti original ne komprimirana datoteka stilova.

Ali morat ćemo ga imenovati drugačije od style.css. Da biste to učinili, možete ga preimenovati, na primjer, na ovaj način: style.nogzip.css. Sada na poslužitelju, u mapi s temom WordPress, imat ću dvije stilske datoteke:

1. style.css - arhiva s ekstenzijom stripped.gz
2. style.nogzip.css - normalna nekomprimirana datoteka stila koja će se morati posluživati ​​preglednicima koji ne podržavaju kompresiju

Morat ćete izvršiti ovu operaciju za sve vanjske stilove i skripte (Css i Js) koje se učitavaju zajedno sa stranicama vašeg resursa. Imao sam ih samo četiri: onaj glavnog stila, u koji sam dodao i svojstva nekih WordPress dodataka, kao i datoteku skripte iz mape teme i dvije vanjske skripte iz.

Sada, da bi statička kompresija radila za vanjske stilove i skripte, trebate urediti .htaccess iz korijenske mape vašeg resursa i zamijeniti kod odgovoran za Gzip sljedećim modificiranim kodom:

RewriteEngine na RewriteCond% (HTTP: prihvaćanje kodiranja)! Gzip RewriteCond% (HTTP_USER_AGENT) Konqueror RewriteRule ^ (. *) \. (Css | js) $ $ 1.nogzip. $ 2 Zaglavlje dodaj Vary User-Agent Skup zaglavlja Kodiranje sadržaja: gzip Skup zaglavlja Kontrola predmemorije: privatno Zaglavlje je poništilo kodiranje sadržaja

Ako preimenujete izvorne datoteke stilovi i skripte koristili su svoja imena koja nisu style.nogzip.css, tada ćete u odgovarajućem retku koda morati zamijeniti masku $1.nogzip.$2 svojom. Općenito, to je sve.

Sada poslužitelj neće komprimirati Css i Js svaki put u hodu, već će preglednicima odmah poslati vašu unaprijed komprimiranu kopiju, a u slučaju preglednika koji ne razumije Gzip - originalnu verziju datoteke slična stilu .nogzip.css.

Na prvi pogled, doći će do blagog povećanja brzine učitavanja stranice i smanjenja opterećenja vašeg resursa na hostingu. Ali nakon par dana imala sam neugodu. Očigledno i pogled WordPress administratorsko područje dramatično se promijenio - styling je otpao.

Ali problem je brzo riješen izvođenjem gore opisanih manipulacija sa stilskom datotekom koja se koristi na administrativnoj ploči. U mom slučaju to je bio colors-classic.css iz mape:

/ wp-admin / css

Zatim sam želio primijeniti statičku Gzip kompresiju za HTML datoteke, koje server također komprimira u letu, stvarajući dodatno opterećenje. Ovdje sam pronašao prilično jednostavno rješenje za WordPress. Činjenica je da ga koristim jako dugo.

U njegovim postavkama postoji područje "Kompresija", koje je, kao što sam u početku mislio, odgovorno za kompaktno postavljanje predmemoriranih stranica na hard disk hostinga. Činilo mi se da će arhiviranje predmemoriranih stranica procesoru pojesti nepotrebno vrijeme i sigurno ga isključiti.

Ali nakon što sam malo potražio informacije na temu Gzipa html kompresiju stranicama, promijenio sam mišljenje o ovim postavkama kompresije u dodatku Hyper Cache.

Čini se da označavanjem okvira "Omogući kompresiju" time omogućujemo preliminarnu kompresiju predmemoriranih stranica bloga pomoću Gzip algoritma.

Ne usuđujem se to reći sto posto, ali nakon aktiviranja kompresije Hiper postavke Cache, već duže vrijeme bilježim smanjenje opterećenja na poslužitelju. Općenito, čini se da se, kao i uvijek, škrinja upravo otvorila.

Usput, ako je vaš projekt izgrađen na bazi Joomle, tada postoji nekoliko vrlo dobrih (prema recenzijama korisnika) komponenti za njega koje vam omogućuju korištenje metoda koje sam opisao kako biste povećali brzinu učitavanja web stranice. moguće, ali u isto vrijeme sve će biti puno lakše, jer mnogo se radi automatski uz minimalne troškove postavljanja.

Ni sam još nisam testirao ove komponente, ali čim budem spreman, sigurno ću pisati o njima. Za sada ću samo dati linkove na ove komponente za Joomlu: jFinalizer i WEBO Site SpeedUp.

Optimiziranje grafike i smanjenje broja zahtjeva

Također, optimizacija grafike može imati vrlo značajan utjecaj na brzinu preuzimanja. Kao što sam ranije napisao,. Ali to će biti prikladno samo u slučaju malog broja njih.

Osobno sam ga koristio za batch optimizaciju, o čemu sam već pisao pobliže. Također možete koristiti još jednu vrlo popularnu online uslugu za komprimiranje fotografija bez gubitka kvalitete sa - Smush.it. Ali stupanj kompresije fotografija u PunyPNG-u činio mi se višim, vjerojatno zbog korištenja uspješnijih skripti.

Kopirao sam mapu sa slikama svog bloga na svoje računalo i sve ih učitao (u serijama od 15, jer postoji takvo ograničenje u PunyPNG-u) na ovu internetsku uslugu, a zatim preuzeo opću arhivu koja sadrži već optimizirane slike s mog bloga .

Općenito, nakon pola sata uspio sam komprimirati PNG slike u prosjeku za oko 7 posto, odnosno 5 posto.

Kao rezultat toga, ukupna veličina svih slika korištenih na mom blogu smanjena je za nekoliko megabajta, što će nedvojbeno utjecati i na povećanje brzine učitavanja stranice i malo će smanjiti opterećenje na hosting poslužitelju.

Pa posljednja, a ujedno i jedna od najvećih učinkovite načine ubrzanje, može doći do smanjenja broja http zahtjeva koji će se formirati prilikom učitavanja stranica vašeg resursa. Možete ih smanjiti smanjenjem broja objekata preuzetih uz web stranicu. Već smo na početku ovog članka govorili o kombiniranju vanjskih Css i Js datoteka samo u tu svrhu.

Ali lavovski dio zahtjeva uvijek ide na učitavanje grafike. To može biti pozadinske slike koje su spomenute u datoteci stila ili slike koje su izravno postavljene u Html kodu stranice.

Da biste smanjili njihov broj, morate analizirati je li potrebno učitati ovu ili onu sliku zajedno sa stranicom. Na ovaj način sam se riješio nekoliko desetaka dodatnih http zahtjeva. Isto pozadinske slike iz sastava predloška, ​​koji se ipak pokaže nužnim za funkcioniranje vašeg resursa, može se kombinirati u tzv. Kao rezultat toga, umjesto desetak zahtjeva, trebate postaviti samo jedan.

Općenito, povećanje brzine učitavanja stranice neminovno će dovesti do barem malog, ali povećanja opterećenja na hostingu, što uz veliki promet može biti posljednja kap. Sada, s 5000 tisuća posjetitelja dnevno, opterećenje procesora poslužitelja približava se maksimalno dopuštenom.

Već sam počeo razmišljati o tako radikalnom koraku, kako svoj blog učiniti gotovo statičnim, u čijoj je korijenskoj mapi uobičajeno html datoteke, i cjelina WordPress motor radit će u zasebna mapa... Dakle, opterećenje će biti minimizirano.

To se može učiniti u WordPressu pomoću čudesnog dodatka Really Static. Istina, njegova verzija još nije narasla na jednu, ali recenzije o njegovom radu su iznimno pozitivne. Zapravo, to je potpuni analog poznate Maxsite Cache skripte, koju, na primjer, koristi Mikhail Shakin na svom blogu.

Cijena smanjenja opterećenja bit će gubitak neke funkcionalnosti, ali mislim da su ispravne postavke za ažuriranje predmemorije (u u ovom slučaju bit će običan HTML stranice, kao i na mjestima s početka ovog tisućljeća), sve te nedostatke moći će se svesti na minimum. U svakom slučaju, ne primjećujem nikakav zločin u Shakinu kada čitam njegov blog.

Ako netko već ima iskustva sa WordPress dodatak Zaista statično, bit ću vam jako zahvalan ako ostavite svoje mišljenje o tome u komentarima. Hvala na pažnji. Članak je tiho došao do kraja. Vrijeme je da ga dotjerate i pripremite za objavljivanje.

Sretno ti! Vidimo se uskoro na stranicama blog stranice

možete pogledati više videozapisa ako odete na

Možda ćete biti zainteresirani

Gzip kompresija za ubrzanje učitavanja web stranice - kako ga omogućiti za Js, Html i Css pomoću .htaccess datoteke
Stvaranje CSS sprijtovi v online generator Sprites Me za smanjenje zahtjeva poslužitelja
Mjerenje i povećanje brzine stranice u GTmetrixu, kao i konfiguriranje učitavanja jQuery biblioteke iz Google CDN-a
Kako doći do brze web stranice - optimizacija (komprimiranje) slika i skripti, kao i smanjenje broja HTTP zahtjevi
Optimiziranje i komprimiranje CSS-a u brzini stranice - kako onemogućiti vanjske datoteke stilova i kombinirajte ih u jedan kako biste ubrzali učitavanje

Optimizacija brzine web-mjesta uvijek je prioritet, jer postoji velika konkurencija između web-mjesta i morate stalno poboljšavati svoj resurs. Za optimizaciju brzine web stranice brinu se i vlasnici web stranica (blogeri) i velike tvrtke koji su zaručeni SEO promocija, budući da shvaćaju da je to jedan od osnovnih parametara.

Na ovaj trenutak postoji velika količina usluge za analizu brzine učitavanja web stranice i identificiranje problematičnih područja, no unatoč tome, većina stranica još uvijek nije optimizirana na odgovarajući način.

U ovom članku i popisu za provjeru nastojat ću se ne vezati uz određeni CMS, već pisati na način da rješenja budu prikladna za bilo koju stranicu.

Želio bih skrenuti vašu pozornost: ako svoju web-lokaciju provjerite samo u usluzi Google PageSpeed ​​Insights, tada ćete u procesu proučavanja kontrolne liste shvatiti da je veliki broj parametara tamo skriven i nije prikazan, unatoč činjenici da još uvijek utječe na opterećenje stranice ubrzati.

Korak 1. Odredite "opseg" optimizacije brzine web stranice

Pod "Okvirom za optimizaciju brzine web-mjesta" mislim na količinu CSS, JS, medija i drugih datoteka koje se učitavaju na vašu stranicu.

Nakon što smo definirali "okvir", znat ćemo finale do kojeg trebamo ići. A usluga koju je stvorio Jonathan Fielding pomoći će nam pronaći podatke "" - www.performancebudget.io.

Pogledaj mali video o radu s ovim stranicama, gdje sam jasno pokazao što trebate odabrati da biste odredili " okvir za optimizaciju brzine web stranice":

Faza 2. Saznajte stvarnu brzinu stranice

Kao što sam gore napisao, Google PageSpeed ​​Insights to dobar alat za testiranje optimizacije brzine stranice, ali ipak "daje" samo površne savjete. Najprije možete provjeriti s ovim alatom, a zatim prijeći na detaljniju statistiku koju daju sljedeće usluge:

• WebPagetest
• GTmetrix

Budite oprezni kada provodite testiranje pomoću ovih usluga, jer se vrijeme učitavanja može razlikovati zbog činjenice da su poslužitelj vaše stranice i poslužitelj na kojem se izvodi test udaljeni jedan od drugog.

Usluga WebPagetest omogućuje vam odabir testnog poslužitelja i preglednika. Ova usluga prikazuje u obliku dijagrama kojih resursa (CSS, JS) ima najviše u postotku na vašoj stranici. Ono što me najviše raduje je detaljne statistike na zahtjev u obliku grafikona. Tu je i informacija o tome na koje se datoteke primjenjuje GZIP kompresija i odmah postaje jasno je li sve točno navedeno u postavkama .htaccess.

Ali usluga GTmetrix omogućuje vam da vidite grafikon preuzimanja datoteka, pa također prikazuje detaljne savjete za optimizaciju svake nijanse na web mjestu. I ovdje je sve raščlanjeno na detaljnije točke optimizacije.

Znajući stvarne informacije o vašoj web-lokaciji, sada možete usporediti ovu brojku s onim gdje je prikazan okvir za optimizaciju brzine stranice.

I tek sada možete u potpunosti iskoristiti kontrolnu listu u nastavku. U ovoj kontrolnoj listi razmatram samo one metode optimizacije koje od vas ne zahtijevaju dodatna ulaganja u novcu, već je potrebna samo želja i malo ustrajnosti da se prođe i optimizira svaka stavka.

(Kontrolni popis) Samooptimizirana brzina web stranice

1. Optimizacija slike

1. Na stranici koristite slike točno one razlučivosti koja vam je potrebna.

   Često postoje situacije kada se koriste slike u kojima je razlučivost velika (na primjer, 800x600px), a na stranici se koristi samo minijatura (na primjer, 300x225px). Osobito često data greška prilikom izrade galerija. Koristite samo odgovarajuću razlučivost slike za svoju situaciju.

2. Kombinirajte sve ikone (ako je SVG, onda u SVG spriteu) u jednu sliku (sprite).

   To će smanjiti broj zahtjeva prema poslužitelju. Sada postoje online rješenja: css.spritegen.com, iconizr... Tako i rješenja za kolektore (za Gulp - gulp-svg-sprites, za Grunta - grunt-svg-sprite, za Webpack - Webpack SVG sprite loader).

3. Optimizirajte slike: PNG, JPG, SVG.

   Ovdje postoje oba online rješenja: TinyPNG, Kraken.io... Tu su i automatizirana rješenja za sakupljače: Gulp - gulp-imagemin, gulp-pngquant; Roktati - grunt-contrib-imagemin; Webpack - imagemin-webpack-plugin.

4. Odgađanje slika bez lijenog učitavanja ili jQueryja - https://varvy.com/pagespeed/defer-images.html

2. Smanjite broj zahtjeva

1. Koristite SVG i PNG sprijtove.

   O tome sam pisao u odjeljku "Optimizacija slike" koji se nalazi iznad.

2. Stavite sve zajedno CSS datoteke u jednu.

   Kao što sam rekao ranije, to će smanjiti broj zahtjeva prema poslužitelju. Izgradite dodatke (za Gulp - gulp-concat-css, za Grunta - grunt-concat-css, za Webpack - css-concat-loader).

3. Kombinirajte sve JS datoteke u jednu ako je moguće.

   Izgradite dodatke (za Gulp - gulp-concat-js, za Grunta - grunt-contrib-concat, za Webpack - webpack-uglify-js-plugin).

4. Smanjite broj upita baze podataka što je više moguće.

   Sve što se može učitati bez upita bazi podataka, učitajte bez korištenja - statično. Budući da je potrebno vrijeme za zahtjeve i odgovore, logično bi bilo da ovaj pokazatelj smanjimo što je više moguće.

3. Optimiziranje CSS-a i JS-a

1. Komprimirajte sve CSS datoteke.

   Online rješenja: CSS kompresor, CSS minififikator gulp-clean-css; Roktati - grunt-contrib-cssmin; Webpack - clean-css-loader.

2. Komprimirajte sve JS datoteke.

   Usluge online: JavaScript alat za kompresiju, JS Minifier... Izrada dodataka: Gulp - gutljati-ružiti; Roktati - grunt-contrib-compress; Webpack - dodatak spomenut u zadnjem odlomku također komprimira JS.