Google PageSpeed ​​Insights je radikalno ažuriran, šta će se promijeniti? PageSpeed ​​Insights: Brzina učitavanja kao faktor rangiranja Procijenjena ulazna latencija.

Pozdrav, dragi čitaoci blog stranice. Danas želim s vama razgovarati o tako važnoj temi kao što je brzina učitavanja web stranice. Vjerovatno ste već čuli da, uz mnoge druge faktore koji utječu na promociju web projekta, pretraživači su nedavno počeli i to da uzimaju u obzir. A kočnice na stranici zaista iritiraju posjetitelje, posebno one koji su na to navikli.

No, za mnoge webmastere brzina učitavanja nije tema o kojoj biste trebali odmah početi razmišljati o tome, obično se odlaže za kasnije, a javljaju se hitni problemi u vezi s popunjavanjem resursa jedinstvenim materijalima i njegovim poboljšanjem internom optimizacijom; prednjače, već čitav niz faktora koji utiču. Kako kažu, lanac je jak onoliko koliko je jaka njegova najslabija karika...

Online servisi za mjerenje brzine učitavanja web stranice

U svakom slučaju, tako sam se donedavno osjećao kada sam pokušavao da ubrzam svoj resurs. Ali palo mi je na pamet da je bolje ne čekati neugodne trendove (naime, pad prometa od , jer je to kritičnije za brzinu učitavanja), nego odmah ispraviti očiti nedostatak.

Samo trebate shvatiti da je brzina kojom se vaša web stranica, blog ili forum učitavaju vrlo važan pokazatelj. Ako vaš projekt ne ide dobro s ovim pokazateljem, to može dovesti do prilično neugodnih posljedica. A najvažniji od njih je da posjetitelji mogu odbiti raditi s vašim resursom, jer... Učitavanje stranica traje jako dugo. Osim toga, pretraživači, posebno Google, to uzimaju u obzir kada procjenjuju ukupnu korisnost određenog resursa.

Da biste razumjeli koliko se brzo učitavaju stranice vašeg resursa, možete koristiti, na primjer, mogućnosti ovoga, detaljno opisane u članku na navedenom linku. Ili možete koristiti usluge koje su dizajnirane za to. U nastavku ću dati nekoliko takvih primjera.

  • Pingdom - ovdje samo treba navesti adresu stranice čiju brzinu učitavanja želite mjeriti (ovo ne mora biti glavna stranica, jer brzina učitavanja internih stranica nije ništa manja, a često čak i važnija).

    Kao rezultat, prikazat će se dijagram vremena preuzimanja pojedinačnih objekata web stranice, kao i njihov URL i težina. Što je manje predmeta opterećeno i što je svaki od njih lakši, to bolje. Na primjer, u tu svrhu ja:

  • spojio neke slike iz teme stranice u
  • i također, ako je moguće, smanjen za
  • osim toga ima smisla
  • Zapravo, možete pratiti neke probleme i historiju mjerenja brzine vaše stranice na susjednim karticama gornjeg menija Pingdoma.

    U iskačućem prozoru, od vas će biti zatraženo da kopirate trajni link do završenog testa i pošaljete ga e-poštom ili Twitterom. Također se možete pretplatiti na dostupnost na dnu prozora. Ako se vaš resurs smanji (postane nedostupan posjetiteljima), tada će vam biti poslana poruka e-poštom ili SMS-om na vaš mobilni telefon. Ali ova usluga se plaća, iako postoji mogućnost besplatne probe.

    Za vašu web lokaciju, kao i za pregled Traceroute, morat ćete odabrati karticu “Ping and Traceroute” na samom vrhu stranice. Unesite URL bez http u dostavljeni obrazac, potvrdite izbor u polju za potvrdu “Traceroute” ili “Ping” ispod ovog obrasca i kliknite na “Test now”.

  • WebPageTest - kao i obično, unesite URL stranice koju testirate (ne nužno glavnu). Servisu je potrebno neko vrijeme da izračuna brzinu učitavanja svih elemenata stranice, nakon čega proizvodi vrlo vizualan dijagram (tačnije, čak dva - za prvi prolaz i za drugi, kada se neki od elemenata stranice učitaju iz pretraživača skladiste):

    U prvom dijagramu obratite pažnju na položaj ljubičaste okomite linije - to će biti vrijeme završetka renderiranja stranice. Druga vertikalna linija (plava) će značiti puno vrijeme punjenja. Dobro je ako je prvi red na 1-1,5 sekundi od učitavanja stranice, a drugi red prije 4 sekunde. Zatim se sljedeći paragrafi mogu čitati „za referencu“. Ako web-lokaciji treba više od 4 sekunde da se učita, onda morate brinuti o ispravljanju ove situacije.

  • Google PageSpeed ​​Insights je alat za programere iz samog Google-a. Daje procjenu brzine učitavanja vaše stranice (ili bolje rečeno, optimizacije ove brzine) na skali od 100. 100 je ideal koji je nedostižan, ali dobiti 80-90 je sasvim moguće, pogotovo što servis daje vrlo detaljne preporuke za ispravljanje uočenih nedostataka.

    Kao što možete vidjeti iz gornjeg snimka ekrana, Google PageSpeed ​​Insights daje sveobuhvatnu procjenu - za računarski pretraživač i za mobilni. Osim toga, u nastavku ćete pronaći procjenu lakoće korištenja vašeg resursa na raznim gadžetima. Ako se još niste potrudili, tada će rezultat biti vrlo nizak (a na snimku ekrana vaše web stranice desno u prozoru pametnog telefona sve će biti jasno vidljivo).

    Ali najvažnije je da Google PageSpeed ​​Insights daje preporuke kako povećati rezultat vaše stranice, tj. kako to ubrzati. Treba krenuti, naravno, od samog vrha, jer će ove korekcije dati najveći doprinos ubrzanju.

    Na primjer, imao sam problem sa podešavanjem gzip kompresije i postavljanjem vremena keširanja za statičke fajlove (slike, css fajlove i skripte) u korisničkim pretraživačima, jer Apache radi u sprezi sa nginxom, ali ne znam kako da radim sa to. Morao sam pisati tehničkoj podršci Infobox-a sa zahtjevom da sve podese - oni su to uradili, a nisu ni uzeli novac (hvala njima!). Inače, u početku su postavili vrijeme skladištenja keša na 1 sat, ali Google PageSpeed ​​Insights se i dalje žalio:

    Morao sam da se udubim u uputstva za ovu onlajn uslugu i tamo pročitam da je minimum potreban 1 dan skladištenja statike u kešu. Zamolio sam tehničku podršku hostinga za 1 sedmicu rezerve, što su i učinili. Sada je ocjena malo porasla i Google nema većih zamjerki na moj resurs u smislu brzine učitavanja, što je dobro.

  • Test my Site je nova usluga, ponovo od Google-a. U osnovi, on se fokusira na procjenu mobilne verzije vaše web stranice, uključujući i po kriteriju brzine učitavanja:

    Jednostavno i ukusno, kako kažu. Možete se pretplatiti na newsletter za promjene.

  • GTmetrix - opet "bez daljeg" unesite URL željene stranice i pričekajte malo da se analiza završi. Kao rezultat toga, dobit ćete izvještaj generiran na osnovu podataka iz dva dodatka preglednika - Page Speed ​​(pročitajte o radu s njim u nastavku) i YSlow. Zapravo, na vama je da odlučite kojim podacima vjerovati i čije preporuke slijediti.

    O tome sam već pisao pobliže i stoga se neću ponavljati, da ne zatrpavam ionako glomazan članak (ako pročitate do kraja, možete se smatrati herojem).

  • Ping Admin je sličan online resurs za mjerenje vremena odgovora servera iz različitih dijelova naše ogromne planete.

  • Host Tracker je skoro isti, samo su zemlje različite.
  • ByteCheck - omogućava vam da izmjerite TTFB (Time To First Byte) vrijednost za vašu stranicu, na koju se često obraća pažnja tokom optimizacije. Ovo je vrijeme kada pretraživač prima prvi bajt podataka sa servera. Što je veća TTFB vrijednost, server sporije obrađuje resurse, što je loše. Pročitajte savjete za optimizaciju učitavanja web stranice.
  • Load Impact nije u potpunosti vezana za brzinu, ali je također važna usluga. Omogućava vam da testirate kapacitet učitavanja vaše stranice i da li se smanjuje brzina učitavanja stranice. Veoma korisna stvar.
  • Web Page Speed ​​je online servis sa dizajnom iz ranih devedesetih, ali prilično informativan ako se prilagodite nedostatku upotrebljivosti. Ispod su opće preporuke za ispravljanje situacije.
  • Da li je zaista važno pratiti brzinu učitavanja stranice?

    No, vratimo se s mjerenja brzine na traženje mogućnosti za povećanje. , ranije je postojala eksperimentalna kartica "Performanse web lokacije", gdje je data procjena brzine učitavanja stranice.

    Općenito, nema ničeg kriminalnog u brzini učitavanja koja je tamo naznačena, ali činjenica da se moj blog stranica učitava sporije od 84 posto svih web resursa na internetu je već zvono na koje je trebalo odgovoriti. Ali pošto Google misli da je moj blog autsajder u smislu brzine, onda je vrijedno ozbiljno shvatiti ovaj problem i ozbiljno se pozabaviti pitanjem kako ga povećati.

    Zapravo, nije bilo potrebe smišljati nešto posebno, jer sam Google predlaže najoptimalnije rješenje. Preciznije, on predlaže korištenje alata koji će vam, zauzvrat, pomoći da shvatite što točno treba učiniti kako biste malo (ili puno) ubrzali svoju web stranicu. Govorim o online servisu Page Speed ​​(ranije su postojale i istoimene ekstenzije pretraživača za FireFox i Chrome, koje sam uglavnom koristio).

    Odmah da rezervišem da ovaj alat radi na prilično složenim i ne sasvim razumljivim stvarima za obične webmastere, koje se uglavnom odnose na zamršenosti i nijanse rada web servera. Ako nikada niste administrirali server, to će biti teško.

    Postoji izlaz - stresite svog hostera na izvršavanje radnji koje Page Speed ​​propisuje. Da li se slaže ili ne, drugo je pitanje. Nisam se usudio, jer je nezgodno davati pristup serveru bilo kome (eto koliko sam nepovjerljiv).

    Na glavnoj stranici, PageSpeed ​​čak predlaže instaliranje modula na vaš server ako radi Apache ili Nginx (što je moj slučaj):

    Ali još uvijek ne razumijem kako se to radi, jer uopće ne razumijem administraciju servera i nikada nisam radio sa sistemima sličnim Unixu. Ovo je mnogo teže nego instalirati program ili učitati dodatak u WordPress. Još jedan nivo uranjanja. Hoster se takođe nije usudio da mu smeta zbog ovoga. Generalno, nisam testirao ovaj modul - moguće je da ste ga već isprobali i imate šta da kažete...

    Općenito, po prvi put sam koristio Page Speed ​​kao ekstenziju preglednika (sada, koliko razumijem, ne funkcionira). Ranije je bio integriran u programerske alate u Firefoxu i Chromeu. Istina, prvo sam (prije nekoliko godina) samo nakratko pogledao koji mi je savjet dao, i, gotovo ništa ne razumjevši, odlučio sam da to nije za mene, nakon čega sam s laganim srcem izbrisao PageSpeed plugin kao nepotreban i stran element mom umu.

    Činjenica je da čak i kada sam shvatio na šta se ovaj dodatak žali, nisam zapravo znao šta je potrebno učiniti da se sve ovo popravi i nekako ubrza moj blog. Općenito, odmah sam pronašao puno važnijih stvari koje moram obaviti, u usporedbi s kojima mi se gužva miša s postavkama web servera (pogotovo što ih ne razumijem) činila sitničavom i beznačajnom.

    Istina, svojevremeno sam i rješenje sigurnosnog problema odložio i kao rezultat toga platio gubitkom svega tog novca. Imajući u vidu šta se desilo, pre neki dan sam odlučio da se uvučem i pokušam da krenem dalje sa problemom povećanja brzine učitavanja sajta, uprkos tome koliko mi je ovo pitanje bilo neshvatljivo i teško.

    Ukratko, ponovo sam instalirao Page Speed ​​u Mazilu (sada više ne moram ovo da radim), pogledao na šta se tačno žali, i ipak sam uspio neke stvari poboljšati i nadam se na barem malo povećaj brzinu.

    P.S. Sada se Page Speed ​​može koristiti samo na mreži i više ga nije potrebno instalirati u pretraživač (u svakom slučaju, ovaj dodatak nije kompatibilan s novim verzijama Chromea), iako to ne mijenja suštinu.

    Dakle, ranije ste morali da instalirate dodatak u svoj pretraživač, ali sada sve što treba da uradite je da odete ovde, unesete URL stranice koju želite da analizirate (različite vrste stranica mogu imati različite probleme sa brzinom učitavanja, tako da ima smisla da biste provjerili sve opcije u ovom alatu) i kliknite na plavo dugme „Analiziraj“.

    Nakon što sačekate rezultate procesa verifikacije, vidjet ćete prozor sličan onom koji sam već prikazao na snimku ekrana iznad u tekstu (u odlomku 3 opisa online servisa za provjeru brzine učitavanja web stranice). To. kao rezultat toga, vidjet ćete čitavu listu pritužbi koje ova online usluga ima na vaš resurs, odnosno na brzinu učitavanja. U isto vrijeme, on će vam dati neke upute o optimizaciji rada web servera u vezi sa motorom koji koristite.

    Štaviše, na samom vrhu prozora Page Speed ​​će se nalaziti komentari i preporuke koje ćete prvo htjeti pogledati i promijeniti („popravite ih bez greške“), jer će to dati najveći učinak u smislu povećanja učitavanja brzina i neće zahtijevati previše napora s vaše strane. Dozvolite mi da vam dam primjer analize jednog od mojih manjih projekata, na koji baš i ne stignem:

    One. preporuke i otkriveni problemi, označeni crvenim pravougaonikom sa uskličnikom i koji se nalaze na samom vrhu liste, najvažniji su i preporučljivo je krenuti u optimizaciju sa njima (jeftino i veselo, kako kažu), čime se postiže najveći efekat.

    Problemi označeni narandžastom bojom zahtijevat će više truda s vaše strane da ih ispravite, ali možda neće rezultirati značajnim povećanjem brzine. Jao i ah, za sada ih možete staviti u zadnji plan i nastaviti s prioritetnim zadacima koji će značajno ubrzati projekat.

    Moja početna slika prije nekoliko godina (čak i kada koristim dodatak - sada se ista stvar može vidjeti na http://gtmetrix.com/, jer koristi PageSpeed ​​API) za https://site je bila ovakva:

    Tada sam odlučio da počnem od prve tačke „Upotreba keširanja pretraživača“ (sada se zove „Koristi keš pretraživača“), jer bi prema logici Page Speed ​​ove preporuke trebalo da dovedu do najvećeg ubrzanja mog bloga.

    Ako kliknete na spojler pored ovog natpisa, pojavit će se lista raznih datoteka koje ne ispunjavaju optimalne zahtjeve za keširanje statičkih objekata (skripte, CSS fajlovi, slikovni fajlovi koji se koriste na web stranici) u korisničkim pretraživačima (tj. čitačima) :

    One. Kako bismo povećali brzinu učitavanja, PageSpeed ​​Insights nam savjetuje da optimalno konfiguriramo keširanje različitih elemenata web stranica u korisničkim preglednicima tako da se ovi statični elementi ne bi ponovo učitavali sa servera prilikom pregleda drugih. U teoriji, sve ovo zvuči prilično zbunjujuće, jer nemam pojma o mehanizmima keširanja koje koriste pretraživači (pročitajte o tome i kako to očistiti).

    Osim toga, optimiziraćemo keširanje statičkih objekata koristeći mehanizme samog vašeg hosting servera. Prilično je zbunjujuće, ali ja ću vam ponuditi gotova rješenja koja se nalaze na ruskom internetu, a vi ćete ih isprobati na djelu i odlučiti koje će najbolje funkcionirati na vašem hostingu.

    Optimizacija keširanja pretraživača i provjera njegovog rada

    Istina, ovo nije išlo na mom trenutnom hostingu, jer sada imam kombinaciju Apache i nginx (treba da konfigurišem potonje, što mi je hoster uradio na meni nepoznat način). Ali ako imate čisti Apache, metoda predložena u nastavku može raditi.

    Uopšteno govoreći, pokušaćemo da utičemo na server na kojem se hostuje vaš projekat na način da izdaje komande pretraživačima u cilju optimizacije keširanja statičkih elemenata. To ćemo učiniti koristeći prilično poznat alat za upravljanje udaljenim serverom - datoteku .htaccess. Da li znate za postojanje takve stvari?

    Obično živi u root folderu. Naravno, sve što je dole opisano će raditi samo na serverima koji rade na Apache-u, ali u pravilu ih je većina. Nakon povezivanja na vaš resurs putem FTP-a (), otvorite korijenski folder (obično PUBLIC_HTML ili HTDOCS) i provjerite da li postoji .htaccess fajl u njemu.

    Od sada sve radite na vlastitu odgovornost i rizik. Stoga, obavezno preuzmite kopiju ove datoteke na svoj računar kako biste, ako se nešto dogodi, mogli brzo vratiti nazad.

    Ako .htaccess nije vidljiv, pokušajte u programu FileZilla, odaberite “Server” - “Force hidden files” iz gornjeg menija. Ako se ni nakon toga ne pojavi u korijenu, onda kreirajte praznu tekstualnu datoteku na svom računalu u bilo kojem uređivaču koji vam odgovara (koristim NotePad Plus Plus), nazovite ga nečim i kopirajte ga u korijen.

    Nakon toga preimenujte ovaj fajl u .htaccess u FileZilla. Sada ćete morati da ga otvorite radi uređivanja i da mu dodate kod ispod. Ali prvo da objasnim malo.

    Najpopularniji načini za omogućavanje ove opcije na web serveru koji pokreće Apache je korištenje modula mod_headers ili mod_expires. Kod u nastavku će vam pomoći da omogućite statičko keširanje u pretraživaču ako online usluga ima barem jedan od ovih Apache modula instaliranih na vašem serveru.

    Prvo ću dati kod za modul mod_headers. Imajte na umu da koristi provjeru da li vaš hoster ima ovaj modul. Ako se ne pronađe, kod se neće izvršiti i neće uzrokovati greške. Međutim, još jednom toplo preporučujem da prvo kopirate originalnu (prije dodavanja koda ispod) .htaccess datoteku na svoj računar kako biste izbjegli incidente.

    #cache html i htm fajlovi za jedan dan Header set Cache-Control "max-age=43200" #cache css, javascript i tekstualne datoteke za jednu sedmicu Header set Cache-Control "max-age=604800" #cache flash i slike za mjesec Zaglavlje je postavljeno Cache-Control "max-age=2592000" #onemogući keširanje Header unset Cache-Control

    Možete obrisati komentare (njihovi redovi počinju heš znakom), ali oni ni na koji način neće uticati na rad koda.

    Također će biti moguće dodati blok koda dizajniran za mod_expires modul, koji opet koristi provjeru prisutnosti na vašem serveru, što garantuje sigurnost korištenja ovog dijela koda:

    ExpiresActive On #default cache je 5 sekundi ExpiresDefault "pristup plus 5 sekundi" #cache flash i slike za mjesec ExpiresByType image/x-icon "pristup plus 2592000 sekundi" ExpiresByType image/jpeg "pristup plus 2592000 Bpngy sekundi" pristup plus 2592000 sekundi" ExpiresByType image/gif "pristup plus 2592000 sekundi" ExpiresByType application/x-shockwave-flash "pristup plus 2592000 sekundi" #cache css, javascript i tekstualne datoteke za jednu sedmicu Expires/cssspe textBcssT "sekunda" ExpiresByType text/javascript "pristup plus 604800 sekundi" ExpiresByType application/javascript "pristup plus 604800 sekundi" ExpiresByType application/x-javascript "pristup plus 604800 sekundi" #cache html i htm datoteke za jedan dan "ExpiresByType plus 604800 sekundi" #cache html i htm datoteke za jedan dan " #cache xml datoteke deset minuta ExpiresByType application/xhtml+xml "pristup plus 600 sekundi"

    Komentari se ponovo mogu brisati kasnije.

    Ako ne uspije, ali se nadate čudu, evo još nekoliko varijacija istog koda, ali pokušajte ih jednu po jednu, a ne sve odjednom:

  • ExpiresActive On ExpiresByType application/javascript "access plus 1 godina" ExpiresByType text/javascript "access plus 1 year" ExpiresByType text/css "access plus 1 year" ExpiresByType image/gif "access plus 1 year" ExpiresByType "access plus 1 godina" ExpiresByType "access plus 1 godina" godina" ExpiresByType image/png "pristup plus 1 godina"
  • Set zaglavlja Kontrola predmemorije: privatno Set zaglavlja Kontrola predmemorije: javna
  • BrowserMatch "MSIE" force-no-vary BrowserMatch "Mozilla/4.(2)" force-no-vary
  • FileETag MTime Size ExpiresActive na ExpiresDefault "pristup plus 1 mjesec"
  • Sada, nakon što ste umetnuli kod u .htaccess koji vam omogućava da povećate brzinu optimiziranjem keširanja u pretraživaču na strani posjetitelja, i sačuvali napravljene promjene, ponovo provjerite svoju stranicu resursa u PageSpeed ​​Insights i uvjerite se da je problem otišao:

    Kao što vidite, u mom slučaju, “Koristite keš pretraživača” više nije kritična mana koja usporava učitavanje, a ikona pored ove napomene promijenila se u narandžastu, ali ne i zelenu. Nažalost, nisam u mogućnosti utjecati na usluge trećih strana odakle moja stranica učitava statički sadržaj (kao što su Yandex, Google, Feedburner i Aptulaik).

    Q.E.D. Tako smo, upravo tako, otkrili jedan od najznačajnijih i najznačajnijih problema koji se nalazi u Page Speedu.

    Kako omogućiti kompresiju statičkih objekata na serveru

    Takođe, vrlo čest problem na koji se GTmetrix servis žali je nedostatak kompresije fajlova na serveru prije nego što ih prenese u pretraživače korisnika.

    Koristi se u ovom slučaju, o čemu sam već pisao. Ako analizirate ne direktno kroz PageSpeed ​​Insights, već kroz GTmetrix, tada se u području PageSpeed ​​"Omogući kompresiju" naziva "Omogući gzip kompresiju", a u YSlowu se zove "Komprimiraj komponente pomoću gzipa".

    Da bi se omogućila ova ista Gzip kompresija na hostingima na kojima se koristi Apache server, biće dovoljno dodati odgovarajući dio koda u .htaccess fajl (to je datoteka za kontrolu udaljenog servera). Apache ima dva modula za kompresiju i jedan od njih će instalirati vaš hoster (iako to nije činjenica).

    Najčešći - počnimo s njim. Ponovo dodajemo provjeru prisutnosti ovog modula u kodu kako ne bismo dobili grešku 500 za cijelu stranicu.

    AddOutputFilterByType DEFLATE text/html text/plain text/xml application/xml application/xhtml+xml text/css text/javascript application/javascript application/x-javascript

    Nešto manje popularan, kod za omogućavanje Gzip kompresije za potrebne tipove datoteka izgledat će ovako:

    mod_gzip_on Da mod_gzip_dechunk Da mod_gzip_item_include fajl \.(html?|txt|css|js|php|pl)$ mod_gzip_item_include mime ^text\.* mod_gzip_item_include mime ^application/x-excludegep.* mod_gzipclude.* m_exclude rspheader ^ Kodiranje sadržaja:.*gzip.*

    Zapravo, pokušajte provjeriti stranicu u PageSpeed ​​Insights nakon instaliranja koda. Ako problem nestane, smatrajte da ste sretnici. Zbog prisutnosti Apache-a sa nginxom, sve ovo mi nije pomoglo (hoster je rekao da je nginx odgovoran za statiku, u ovoj situaciji ga je potrebno konfigurirati - ne znam kako je to učinio).

    Sretno ti! Vidimo se uskoro na stranicama blog stranice

    Možda ste zainteresovani

    Mjerenje i povećanje brzine stranice u GTmetrixu, kao i podešavanje učitavanja jQuery biblioteke sa Google CDN-a
    Gzip kompresija za ubrzanje učitavanja stranice - kako to omogućiti za Js, Html i Css koristeći .htaccess datoteku
    Kako maksimizirati brzinu učitavanja web stranice i optimizirati opterećenje servera
    Ubrzanje web stranice - što radi, kako to izmjeriti i kako sami ubrzati web stranicu
    Kreiranje CSS sprijtova u Sprites Me online generatoru za smanjenje broja zahtjeva prema serveru
    CSS optimizacija i kompresija u Page Speed ​​- kako onemogućiti vanjske datoteke stilova i spojiti ih u jednu da ubrzate učitavanje
    Kako doći do brze web stranice - optimizacija (kompresija) slika i skripti, kao i smanjenje broja Http zahtjeva

    PageSpeed ​​Insights (PSI) izvještava o performansama stranice na mobilnim i desktop uređajima i daje prijedloge o tome kako se ta stranica može poboljšati.

    PSI pruža i laboratorijske i terenske podatke o stranici. Laboratorijski podaci su korisni za otklanjanje grešaka u performansama, jer se prikupljaju u kontrolisanom okruženju. Međutim, možda neće obuhvatiti uska grla u stvarnom svijetu. Podaci sa terena korisni su za hvatanje istinskog, stvarnog korisničkog iskustva - ali imaju ograničeniji skup metrika. Pogledajte za više informacija o 2 vrste podataka.

    Rezultat učinka

    Na vrhu izvještaja, PSI daje rezultat koji sumira performanse stranice. Ovaj rezultat se određuje trčanjem radi prikupljanja i analize o stranici. Rezultat od 90 ili više se smatra brzim, a 50 do 90 smatra se prosječnim. Ispod 50 se smatra sporim.

    Podaci o terenu u stvarnom svijetu

    Kada PSI dobije URL, on će ga potražiti u (CrUX) skupu podataka. Ako je dostupno, PSI prijavljuje (FCP) i (FID) metričke podatke za porijeklo i potencijalno URL specifične stranice.

    Klasifikacija brzo, prosječno, sporo

    PSI takođe klasifikuje terenske podatke u 3 segmenta, opisujući iskustva koja se smatraju brzim, prosečnim ili sporim. PSI postavlja sljedeće pragove za brzo / prosječno / sporo, na osnovu naše analize CrUX skupa podataka:

    Brzo Prosječno Sporo
    FCP (1000ms, 2500ms) preko 2500ms
    FID (50ms, 250ms] preko 250ms

    Uopšteno govoreći, brze stranice su otprilike u prvih ~10%, prosječne stranice su u sljedećih 40%, a spore stranice su u donjih 50%. Brojevi su zaokruženi radi čitljivosti. Ovi pragovi se odnose i na mobilne i na desktop i postavljeni su na osnovu ljudskih percepcijskih sposobnosti.

    Distribucija i odabrana vrijednost FCP i FID

    PSI predstavlja distribuciju ovih metrika tako da programeri mogu razumjeti raspon FCP i FID vrijednosti za tu stranicu ili porijeklo. Ova distribucija je također podijeljena u tri kategorije: brza, prosječna i spora, označena zelenim, narandžastim i crvenim trakama. Na primjer, kada vidite 14% unutar narančaste trake FCP-a ukazuje na to da 14% svih uočenih FCP vrijednosti pada između 1.000 ms i 2.500 ms. Ovi podaci predstavljaju zbirni prikaz svih učitavanja stranica u prethodnih 30 dana.

    Iznad distributivnih traka, PSI prijavljuje 90. percentil First Contentful Paint i 95. percentil First Input Delay, predstavljene u sekundama i milisekundama. Ovi percentili su tako da programeri mogu razumjeti najfrustrirajuća korisnička iskustva na njihovoj web lokaciji. Ove metričke vrijednosti polja klasificirane su kao brze/prosječne/spore primjenom istih pragova prikazanih gore.

    Oznaka sažetka podataka polja

    Ukupna oznaka se izračunava iz metričkih vrijednosti polja:

    • Brzo: Ako su i FCP i FID Brzi.
    • Sporo: Ako je bilo koji FCP ili FID spor.
    • Prosjek: Svi ostali slučajevi.
    Razlike između podataka polja u PSI i CrUX

    Razlika između podataka na terenu u PSI u odnosu na Chrome izvještaj o korisničkom iskustvu na BigQueryju je u tome što se PSI-jevi podaci ažuriraju svakodnevno za period od 30 dana. Skup podataka na BigQueryju ažurira se samo mjesečno.

    Laboratorijski podaci

    PSI koristi Lighthouse za analizu datog URL-a, generirajući ocjenu učinka koja procjenjuje performanse stranice prema različitim metrikama, uključujući: , i .

    Zašto su terenski i laboratorijski podaci u suprotnosti? Podaci polja kažu da je URL spor, ali laboratorijski podaci kažu da je URL brz!

    Podaci polja su istorijski izveštaj o tome kako je određeni URL izveden i predstavljaju anonimizirane podatke o performansama korisnika u stvarnom svetu na različitim uređajima i mrežnim uslovima. Laboratorijski podaci se zasnivaju na simuliranom učitavanju stranice na jednom uređaju i fiksnom skupu mrežnih uslova. Kao rezultat toga, vrijednosti se mogu razlikovati.

    Zašto je 90. percentil izabran za FCP, a 95. percentil za FID?

    Naš cilj je osigurati da stranice dobro funkcioniraju za većinu korisnika. Fokusirajući se na 90. i 95. percentil vrijednosti za naše metrike, ovo osigurava da stranice ispunjavaju minimalni standard performansi u najtežim uvjetima uređaja i mreže.

    Zašto FCP u v4 i v5 ima različite vrijednosti?

    V5 FCP gleda na 90. percentil dok v4 FCP prijavljuje medijanu (50. percentil).

    Šta je dobar rezultat za laboratorijske podatke?

    Svaki zeleni rezultat (90+) smatra se dobrim.

    Zašto se rezultat učinka mijenja od trčanja do trčanja? Nisam ništa menjao na svojoj stranici!

    Varijabilnost u mjerenju performansi se uvodi preko brojnih kanala sa različitim nivoima uticaja. Nekoliko uobičajenih izvora metričke varijabilnosti su dostupnost lokalne mreže, dostupnost klijentskog hardvera i sukob klijentskih resursa.

    Još pitanja?

    Ako imate pitanje o korišćenju PageSpeed ​​Insights-a koje je specifično i na koje možete odgovoriti, postavite pitanje na engleskom na Stack Overflow-u.

    Ako imate općenite povratne informacije ili pitanja o PageSpeed ​​Insights, ili želite započeti opću diskusiju, pokrenite nit na mailing listi.

    Povratne informacije

    Je li ova stranica bila od pomoći?

    Da Odlično! Hvala vam na povratnim informacijama. Ako imate konkretno pitanje na koje se može odgovoriti o korištenju PageSpeed ​​Insights-a, postavite pitanje na engleskom na mailing listi Stack Overflow-a. Ne Žao mi je što to čujem. Ako imate konkretno pitanje na koje se može odgovoriti o korištenju PageSpeed ​​Insights, postavite pitanje na engleskom na Stack Overflowu. Za opća pitanja, povratne informacije i diskusiju, pokrenite nit u

    Brzina učitavanja stranice je sada veoma moćan signal za pretraživače. A za korisnike je to značajan faktor na koji je teško ne obratiti pažnju ako ima problema s njim. Poboljšanjem brzine stranice, ne samo da možete dobiti prednosti rangiranja, već i dobiti više povjerenja i stope konverzije. Ispod je lista najkorisnijih alata koji će vam pomoći da analizirate i identifikujete najslabije tačke vašeg sajta u smislu brzine.

    1. Google PageSpeed ​​Insights

    Google-ov alat za brzinu učitavanja stranica. Prikazuje vrijednost od 0 do 100 za desktop i mobilne uređaje. Odmah ukazuje na slabe tačke sajta i daje preporuke za optimizaciju brzine.

    2. Pingdom Tools

    Daje procjenu brzine, prikazuje broj poziva prema serveru i prosječno vrijeme učitavanja. Tabela sažetka će detaljno prikazati podatke za svaki zahtjev prema serveru (stilove, skripte, slike, itd.). Lako je procijeniti šta tačno na sajtu usporava učitavanje.

    3.WhichLoadFaster

    Učitajte dva sajta za poređenje (sebe i konkurenta), vizuelno posmatrajte koji se brže učitava (zgodno za demonstriranje klijentima). Na kraju preuzimanja prikazuje se informacija koja je stranica pobijedila i koliko puta se brže učitavala.

    4. Test performansi web stranice

    Učitava stranicu dva puta, upoređuje broj pogodaka - otkriva koliko je dobro organizovano keširanje, prikazuje detaljnu statistiku za svaki test. Čuva snimke ekrana kako stranica izgleda svake sekunde nakon učitavanja. Takođe u prikladnom obliku pokazuje kojoj grupi zahtjeva je potrebno najviše vremena. Server se nalazi u Dallasu (SAD).

    5. GTmetrix

    Još jedan koristan alat za testiranje brzine stranice. Prikazuje mnogo sažetih informacija, također pohranjuje povijest tako da možete uporediti koliko se vaša brzina preuzimanja poboljšala ili pogoršala. Učitava Yahoo i Google preporuke za optimizaciju brzine, sortirajući ih po prioritetu. Test server se nalazi u Vancouveru (Kanada).

    6. Uticaj opterećenja

    Servis testira koliko sajt može da izdrži opterećenje (lagani DDOS). Emulira se nekoliko desetina korisnika i više od stotinu aktivnih veza. Budući da test traje nekoliko minuta, drugi alati se mogu koristiti tokom ovog vremena učitavanja za procjenu brzine učitavanja stranice tokom špica. Na kraju testa možete vidjeti grafikon kako se mijenja brzina preuzimanja ovisno o broju aktivnih korisnika.

    7. Monitis alati

    Analizira učitavanje web stranica sa različitih dijelova Zemlje - servera u SAD-u, Evropi i Aziji. Prikazuje zbirnu statistiku za svaki test.

    8.SiteSpeed.me

    Šalje zahtjeve analiziranoj stranici iz različitih data centara (oko 30 servera) i određuje brzinu za svaki od njih. Ističe najbolje, najgore i prosječne performanse u smislu vremena i brzine.

    9. PR-CY

    Masovna provjera brzine web stranice. Možete navesti do 10 adresa – na taj način upoređujući vrijeme učitavanja i veličinu dokumenta za svaki resurs.

    10. WebPage Analyzer

    Izvještaj o učitavanju stranice i svim dodatnim skriptama/stilovima/slikama. Jednostavan i često potreban alat.

    Ako koristite neke druge besplatne online alate za provjeru brzine učitavanja web stranice, podijelite ih u komentarima.

    Mnogi od vas su vjerovatno koristili divnu Googleovu uslugu: PageSpeed ​​Insights? Želite li dobiti željenih 100 od 100?

    Slika za privlačenje pažnje

    Ali to je na malom.

    Evo rezultata mog testa. Uzmimo bilo koju web stranicu, na primjer, uzeo sam besplatni gotov adaptivni predložak web stranice i prebacio ga na svoj hosting i počeo testirati: Rezultat prvog testiranja (link do web stranice):
    • brzina za mobilni - 79/100;
    • brzina za računar - 93/100;
    Nije loše ha?

    Žali se na:

    Obavezno ispravite:
    Uklonite JavaScript i CSS koji blokiraju prikazivanje sa vrha stranice.
    Broj blokirajućih CSS resursa po stranici: 3. Usporavaju prikaz sadržaja.
    Sav sadržaj na vrhu stranice prikazuje se tek nakon što se sljedeći resursi učitaju. Razmislite o odlaganju učitavanja ovih resursa, asinhronom učitavanju ili ugrađivanju njihovih najvažnijih komponenti direktno u HTML kod.
    Radimo neke male trikove. Prenosimo stilove iz datoteke u kod:
    Bio:


    postao:

    članak, na stranu, detalji, figcaption, slika, podnožje, zaglavlje, hgroup, nav, odjeljak ( display:block; ) /* i drugi stilovi */
    I - ura! - imamo bolje rezultate (link do stranice):

    • brzina za mobilni - 99/100;
    • brzina za računar - 99/100;
    I žali se samo na: Ispravite ako je moguće:
    Skratite HTML
    Kompresija HTML koda (uključujući ugrađeni JavaScript ili CSS kod) smanjuje količinu podataka radi bržeg učitavanja i obrade. Ali ovaj problem se može riješiti komprimiranjem koda. Nije vezano za ovu temu.
    I također ne zaboravljamo da još uvijek nismo riješili gore opisani problem:
    Sav sadržaj na vrhu stranice prikazuje se tek nakon što se sljedeći resursi učitaju. Razmislite o odlaganju učitavanja ovih resursa, asinhronom učitavanju ili ugrađivanju njihovih najvažnijih komponenti direktno u HTML kod. Koliko su težili u fajlu, toliko su težili i u kodu!

    A sada najvažnije pitanje: greška ili funkcija?
    Hvala ti!

    mob_info