Google PageSpeed ​​Insights alat je koji vam omogućuje brzo i jednostavno testiranje brzine stranice. Da biste potvrdili, unesite URL i kliknite Analiziraj kako biste brzo dobili detaljno izvješće o brzini web-lokacije od Googlea o razlozima usporavanja ove stranice na temelju dvije opcije s preporukama za njegovo rješavanje.

Savršena procjena mjesta

Prema Googleu, sustav provjerava izvedbu stranica za verzije za mobilne uređaje i radne površine, jednom izdvaja URL-ove s mobilnim agentom, a drugi pomoću agenta računala za stolna računala. PageSpeed ​​se kreće od 0 do 100 bodova. Viši rezultat, naravno, je bolji, a procjena od 85 ili više odličan je pokazatelj brzine Googleove web-lokacije. Ako vlasnik u svom izvješću vidi puno crvene i žute boje, to je zbog činjenice da na stranici postoje ozbiljni problemi s preuzimanjem. Alat će ih prijavitiproblemi, iako poruke o pogreškama mogu biti teško razumljive. Evo što programer može dobiti u poruci usluge:

Izbjegavajte preusmjeravanja odredišne ​​stranice kako biste osigurali da je Google testirao brzinu web-lokacije. Ako stranica nije odmah dizajnirana, rezultat može biti nekoliko preusmjeravanja na stranice optimizirane za različite uređaje.

Uključite kompresiju. Današnji preglednici poslužuju manju alternativnu verziju stranice za korisnike Interneta. S omogućenim gzip kompresorom, ove se stranice mogu smanjiti za 90%.

Smanjivanje CSS-a, HTML-a, javascripta. To se odnosi na uklanjanje nepotrebnih podataka. Loše kodiranje može biti uzrok loše izvedbe web-lokacije i može se eliminirati na više različitih načina.

Prioritet gore opisanog sadržaja. Brzina otvaranja stranica ne ovisi samo o brzini učitavanja stranice. To se odnosi i na "percipiranu produktivnost". Ako je kod strukturiran pogrešno, rezultat može biti smanjenje uočene izvedbe u umu korisnika, čak i ako je brzina preuzimanja web-lokacije normalna.

Ubrzajte vrijeme odziva poslužitelja. To je vrijeme potrebno poslužitelju da počne preuzimati sadržaj stranice korisniku, što može usporiti brojne čimbenike u skladu s Googleovim zahtjevima. Ako želite da stranica bude munja i pruži dobru brzinu, bolje je platiti pristojan web hosting.

Uklonite javascript s blokiranjem prikazivanja. Java dopuštakoristiti neke moćne alate treće strane i interaktivne elemente stranice. Problem je u tome što Java također zaustavlja analizu HTML koda.

Caching preglednika nakon provjere brzine stranice Google Page Speed. Preporučuje se da zabilježite ne više od sedam dana, a za nepromijenjene stavke jednu godinu.

Optimizacija slika. Testeri u Googleovom blogu posebno upozoravaju na prijetnje slike za brzinu web-lokacije.

Ubrzano učitavanje stranica

Provjera brzine Googleove web-lokacije je dobrovoljna. Prema Googleu, web-lokacija može izgubiti do polovice svojih posjetitelja prilikom podizanja sustava. To znači da žele vrijeme preuzimanja biti kratko i ugodno kako bi se povećalo korisničko sučelje. Međutim, MachMetrics izvješća pokazuju da je vrijeme učitavanja stranice još uvijek presporo. To su vrijedne informacije, ali se vlasnik web-lokacije mora usredotočiti na poboljšanje ocjene.
U ovom slučaju, morate obratiti pozornost na popis ponuda koji su dostupni na Googleu. Naučivši ove savjete i promatrajući kako će se vrijeme učitavanja stranice promijeniti, općenito možete dobiti bržu web-lokaciju. Da biste testirali brzinu preuzimanja Google Speeda, koristite značajku PageSpeed ​​Insights koja funkcionira s pravilima za brzinu i upotrebljivost. Ponude za izvedbu temeljit će se na Googleovim redovito ažuriranim pravilima kako bi zadovoljile najnovije vrhunske web-prakse. To znači da poboljšanje ocjena danas ne možejamčiti visoku ocjenu u šest mjeseci ili godinu dana. Ne pravi nepotrebne promjene za mobilne uređaje ili stolna računala, ako je problem sam. Google korisničko sučelje za ovaj sustav je fantastično jednostavno. Sadrži odjeljke "Moguće optimizacije" i "Pronađene optimizacije".
Nije lako provjeriti brzinu preuzimanja web-lokacije Google Speed ​​u kategoriju "Pronalaženje optimizacije" jer je potvrđena stranica već u skladu s Googleovim zahtjevima, iako se s vremenom može promijeniti. U međuvremenu, morate se usredotočiti samo na mogućnosti optimizacije. Kratke rečenice na popisu možete pronaći na Googleu kao što su "Minimiziraj HTML" ili "Prioritet vidljivog sadržaja". Većina programera sučelja razumije što to znači, i oni znaju kako riješiti problem odmah. Ako neiskusni vlasnici web-mjesta to ne znaju, jednostavno mogu kliknuti na tekst "Pokaži kako popraviti" u svakoj predloženoj optimizaciji kako bi proširili svoje znanje i saznali sve osnovne korake za rješavanje problema. I to morate učiniti sa svakom optimizacijom, tako da programeri mogu u potpunosti iskoristiti PageSpeed ​​Insights.

Postupak mjerenja

Mjeri vremena učitavanja stranice. Nakon procjene brzine web-lokacije, Google provodi optimizaciju koju preporučuje Googleov PSI. Opet znači vrijeme učitavanja stranice. Ako web-lokacija ubrzava, zadržite promjene. U suprotnom ih poništite. Ponavljajte sve dok se ne popune svi prijedlozi PSI-ja. Ovaj proces suđenja iPogreške su glomazne, ali ako postoji nadzor brzine, tada se uklanja polovica problema. Google koristi vrijednost PageSpeed ​​Insights za nultu vrijednost u odnosu na parametre koji najvjerojatnije uzrokuju kašnjenje u pokretanju. Prilikom rješavanja tih specifičnih problema programer će imati web-lokaciju s bržim preuzimanjem. Opet, procjena nije sveznajuća. "Najbolja praksa" jednostavno znači da se PageSpeed ​​Insights usredotočuje na ono što je vjerojatno da će promijeniti situaciju, a široko se koristi za povećanje produktivnosti. Analiza se može razlikovati. Naposljetku, korištenje preporuka PageSpeed ​​Insights bolje je od napuštanja web-lokacije i slobodnog surfanja internetom.

Preusmjeravanje odredišne ​​stranice

Nakon provjere brzine preuzimanja stranice na Googleu, PageSpeed ​​Insights otkriva da postoji više od jednog preusmjeravanja s ovog URL-a na web-lokaciji na konačnu odredišnu stranicu. Kao primjer možete pogledati preusmjeravanje na sljedeći način: example.com - & gt; https://example.com - & gt; https://www.example.com. Umjesto toga, ispravna verzija trebala bi biti: example.com - & gt; https://www.example.com. Često postoji lanac preusmjeravanja u množini, jer postoje dva dijela koda, od kojih svaki obrađuje svoj dio preusmjeravanja. Recimo da jedna kodna datoteka obrađuje preusmjeravanje https, a druga je ručno preusmjeravanje sa starih URL-ova na nove stranice. Da biste ispravili neuspjeh, prikupite preusmjeravanja u jednu "funkciju".
Web-lokacije često sadrže sljedeće vrste preusmjeravanja:

Protokol (HTTP -> HTTPS).

Domena (youtu.be- & gt; youtube.com).

Poddomena (youtube.com - & gt; www.youtube.com).

Stranica youtube.com/old-url - & gt; youtube.com/new-url).

Ako web-lokacija radi na mobilnoj verziji - u drugoj domeni, poddomeni ili podmapi - to će uzrokovati nepotrebno preusmjeravanje za sve mobilne korisnike. Opći primjer: example.com - & gt; m.example.com. Još gore primjer: example.com - & gt; www.example.com - & gt; m.example.com. Google preporučuje stvaranje web-lokacije prilagođene potrebama korisnika, tako da se isti sadržaj prikazuje za sve uređaje - jednostavno se povećava i izvršava drugačije, ovisno o širini zaslona uređaja. Alat koji možete koristiti u ovom slučaju je usluga status.io, gdje možete jednostavno unijeti jedan ili više URL-ova da biste provjerili kako će biti preusmjereni.

Optimiziranje slika

Ako test brzine za Google Site Download ima minimalni rezultat, programer mora slijediti sljedeće smjernice kako bi postigao visoke rezultate:

Slika je najčešći uzrok niske brzine PageSpeed.

Na većini web-mjesta, slike čine više od 50% preuzetog sadržaja, tako da možete značajno poboljšati situaciju optimiziranjem slika.

U pravilu, većina slika na web-mjestu treba biti manja od 100 KB. Pozadine u punoj veličini često su više, pa je potrebna optimizacija. Evo, Google je razmislio. Omogućuje vam učitavanje već optimiziranih slika na dnu izvješća PageSpeed. Onda ih sve što trebate učiniti je da ih preuzmete.

​​

Ako koristite WordPress, onda je WP Smush izvrstandodatak za te svrhe. Ona također uključuje mogućnost automatskog mijenjanja veličine slike i komprimiranja.

Unutarnji i vanjski resursi

Postoje dvije vrste resursa koji mogu učitati stranicu. Domestics su resursi na mjestu koje kontrolira programer. Vanjski - to su resursi koje programer preuzima iz drugih izvora na Internetu i ne kontrolira ih. Najnoviji se najčešće prikazuju u bloku "Izuzmi". Evo što možete učiniti da vizualizirate resurse blokiranja ako je Googleova analiza brzine web-lokacije pokazala loše rezultate:

Interni resursi koji se često mogu spojiti u jedan jednostavnim preuzimanjem optimiziranih javascripta i CSS datoteka na dnu izvješća PageSpeed. Ili ako postoji CMS, na primjer, WordPress, oni koriste ti-mize plugin za obradu kombiniranih stavki.

Neki resursi u spajanju mogu prestati s radom, stoga se pobrinite da promjene budu reverzibilne.

Vanjski izvori koji se mogu izvršiti interno. Ako preuzimate fontove s Interneta, bolje je to učiniti s poslužitelja.

Neki interni resursi koji se mogu ukloniti iz preuzimanja. Teme ili dodatci na web-lokaciji mogu učitati resurse koji im zapravo nisu potrebni jer ne koriste tu značajku. Na taj način na svoju web-lokaciju možete dodati kôd kako biste izričito zabranili preuzimanje tih resursa.

Neki resursi koji se mogu zamijeniti nečim drugim, što zahtijeva manje vremena za preuzimanje.

U nekim vanjskim resursima, programeri ne mogu ništa učiniti, onda se zaglavi.

Za predmemoriranje preglednika dodajte kôd u .htaccess datoteku ili kontaktirajte njihovu tvrtku za hosting da biste omogućili predmemoriranje preglednika za interne resurse.

Ako programer ne može učiniti ništa s vanjskim resursima i predmemoriranjem preglednika, bolje je potražiti pomoć stručnjaka.

Minimiziraj HTML i CSS

Kako bi se povećala brzina stranice nakon Googleovog testiranja, minimizirali su HTML i CSS. To se postiže uklanjanjem dodatnih datoteka na web-lokaciji. Ovaj dodatni materijal obično je tabulatori, razmaci i nove linije - sve što omogućuje osobi da čita, a to je stvarno važno za računalo. Postoje tri glavne vrste podataka koje možete učiniti manje:

HTML;

CSS;

javascript. Većina web-mjesta ima mnogo datoteka za preuzimanje. Ali možete ih kombinirati nekoliko kako biste ih smanjili, a gotovo uvijek možete ukloniti višak materijala. Ako programer koristi WordPress, to je vrlo dobar dodatak za to. Većina web-mjesta može koristiti HTML i CSS bez ikakvih problema. Bez obzira radi li rad JS-a, brzina stranice ovisi o tome koji se dodaci i teme koriste. Poznato je da komprimirana datoteka zauzima manje prostora od izvornika. Isto načelo vrijedi i za Internet: komprimirani podaci zauzimaju manje prostora. Dakle, glavna stvar - omogućiti kompresiju na web poslužitelju tako da može smanjiti veličinu datoteka, a zatim će se manje datoteke brže učitati na web-mjestu. To znači da će osobe koje posjećuju web-mjesto vjerojatnije primiti potrebne informacije iosjećati se ugodno. Na većini web-poslužitelja možete omogućiti gzip kompresiju s malim dodatkom datoteci .htaccess. Alternativno, možete se obratiti podršci za hosting.

"Percipirana" izvedba sadržaja

Vidljivi sadržaj dio je web-stranice koju korisnici vide na zaslonu prije pomicanja stranice dalje. Web stranice koje se vrlo brzo i jasno učitavaju često su velike kao i one spore. Korisnici vole stranice koje brzo prikazuju sadržaj. Ako programer pri analizi web-lokacije primi poruku o prioritetu vidljivog sadržaja u Google formatu, upotrijebite te mehanizme. Google nudi dvije glavne strategije kako bi to postigao, a oni pružaju prilično dobar plan za promjenu stranica. Jedan od najbržih, najjednostavnijih i najčešćih načina za poboljšanje percepcije korisnika o preuzimanju web-stranice jest da se osigura da HTML prikazuje sadržaj web-stranice prije nego što predstavi druge podatke. Evo primjera stranica s bočnom trakom. Ako se prvo spominje u HTML-u, učitava prvo prije glavnog područja sadržaja. Tipična bočna traka sadrži gumbe za promociju i društvene gumbe i drugi sadržaj koji je sadržaj treće strane. Stoga, ako se preuzme na glavni sadržaj, on zapravo prisiljava korisnika da čeka da vidi željeni sadržaj, što je vrlo loše. To se može promijeniti s jednom jednostavnom radnjom - da se dio sadržaja postavi prije dijela bočne trake, koji će korisnicima predstaviti glavnisadržaj, te daljnji pregled stranice - stvar po vlastitom izboru.

javascript s blokiranjem prikazivanja

Prilikom mjerenja brzine stranice Google PageSpeed ​​Insights, možete dobiti prijedlog za uklanjanje javascripta i CSS blokiranja. Većina web-stranica sadrži kombinaciju HTML-a, CSS-a, JavaScripta i PHP koda koji dodaju sadržaj, oblikovanje i interaktivnost web-lokaciji. Prilikom prikazivanja web-stranice, preglednik najprije preuzima skripte i CSS kod, a zatim prelazi u HTML. Kašnjenje u učitavanju skripti i CSS sprječava korisnike da vide bilo koji sadržaj na zaslonu, stoga pojam "prikazivanje blokiranja". Iako kašnjenje može biti samo milisekunda, stranica će izgledati "sporo" za korisnika. Postoje mnoge metode za fiksiranje blokiranja skripti i WordPress CSS-a koji optimiziraju vrijeme učitavanja stranice. Najlakši način je korištenje dodatka za predmemoriranje. Evo još dva pokušaja za razvojne inženjere: Popravite Render-Blocking Scripts i CSS za automatsku optimizaciju. Ty-mize je popularan izbor za automatsko optimiziranje vremena učitavanja WordPress stranice. To administratorima omogućuje korištenje naprednih tehnika optimizacije koda bez potrebe za stručnim znanjem. Administratori mogu iz izbornika opcija odabrati smanjenje vremena učitavanja stranice, odbacujući promjene ako dođe do nepredvidivih događaja:

Da biste započeli, prijavite se na upravljačku ploču programa WordPress i odaberite Dodaci & gt; Dodaj novo.

Pronađite ti-mize, zatim instalirajte i aktivirajte dodatak.

Idite na Postavke & gt; Možete pregledati konfiguraciju dodatka.

Na kartici Početakoznačite potvrdne okvire "Optimiziraj javascript kod" i "Optimiziraj CSS kôd", a zatim kliknite "Spremi izmjene".

Ponovno posjetite web-lokaciju pomoću Google PageSpeed ​​Insights alata i usporedite rezultate.

Alati za poboljšanje vremena utovara

Postoji nekoliko alata koji se mogu koristiti za poboljšanje brzine stranice ili samo kako bi se vidjelo kako stranica funkcionira:

Brzina stranice je klasična. Daje programerima sve ključeve i savjete za poboljšanje učitavanja stranice.

Test web stranice je Google alat. Nudi besplatnu provjeru brzine koja uključuje grafikone za optimizaciju stranica.

YSlow je plug-in koji brzo pokazuje kako stranica funkcionira i daje developerima informacije o tome kako povećati brzinu.

YUI Compressor - Ovaj alat pomaže komprimirati kod minimiziranjem javascripta i CSS-a.

OnCrawl - nudi jasan pregled produktivnosti stranice i pomaže vam da saznate koji bi trebali biti optimizirani.

Korištenje ključeva za razvojne programere za Chrome

Web-preglednik Google Chrome uključuje alate za razvojne programere. Pomažu u rješavanju problema pomoću HTML-a, CSS-a i [uklonjenih]. Da biste pristupili Alatima za razvojne programere na Microsoft Windows ili Linux, pritisnite Ctrl + Shift + I. Za isti, Apple Mac OS X klikne Option + Command + I. Kartica Network na ploči Alati za razvojne programere u Chromeu navodi sve veze za trenutnu. stranica. Da biste testirali određenu stranicu, otvorite Alate za razvojne programere i idite na nju. Osim toga, ako želite testirati trenutnu stranicu,samo ga ažurirajte. Chrome prikazuje informacije za svaku značajku stranice i njezin upit:

Ime ili URL traženog resursa.

HTTP metoda (GET ili POST).

Status.

HTTP statusni kôd koji je vratio poslužitelj.

Vrsta resursa MIME.

Inicijator - upućivač se šalje poslužitelju, obično se URL prikazuje na stranici.

Veličina resursa koji je preglednik primio (ako je stranica komprimirana od strane poslužitelja, ta je vrijednost manja od stvarne veličine datoteke).

Ukupno vrijeme za izdvajanje resursa, uključujući DNS pretraživanje i vrijeme preuzimanja.

Vremenski raspored - Vremenska crta je blok podataka koji privremeno pregledava svaki zahtjev.

Kada mišem prelazite preko ploče, pojavit će se skočni redak s detaljnom podjelom vremena pokretanja:

Zaključavanje - Uključuje vrijeme traženja DNS-a, SSL kupnju i vezu poslužitelja.

Slanje - uključuje vrijeme slanja zahtjeva sa svim podacima na poslužitelj.

Čekanje - uključuje vrijeme kada poslužitelj treba prikazati sadržaj koji će se posluživati ​​i početi ga slati pregledniku.

Prijem - Uključuje vrijeme potrebno za preuzimanje sadržaja.

Ponekad poslužitelj počne slati sadržaj na njegovo stvaranje. Na primjer, PHP skripta može početi slati HTML, iako još uvijek dinamički generira sadržaj stranice. Ova vrsta skripte može dovesti do netočnih rezultata isteklog vremena. Kombinacija vremena čekanja najvažniji je čimbenik u određivanju brzine gradilišta. Brzina povezivanja s Internetom također može utjecati na izvedbuprogrameri bi uvijek trebali usporediti vrijeme kada ocjenjuju kriterije izvedbe stranice. Na dnu kartice "Mreža" nalazi se sažetak postupka učitavanja stranice. Ovaj sažetak uključuje ukupan broj upita, veličinu stranice, uključujući njezine resurse, te pregled vremena koje je potrebno za prikaz stranice u pregledniku. Nakon analize performansi učitavanja stranica na web-lokaciji, vlasnik će imati bolju ideju o tome gdje može koncentrirati svoje napore na optimizaciju brzine.