Huomautus: Seuraava artikkeli auttaa sinua: Kuinka testata verkkosivustoasi Google Lighthousen avulla?
Kuinka testaat verkkosivustoasi Google Lighthousella?
Tämän testin avulla voit verrata verkkosivustoasi monista näkökohdista, jotka kattavat lähes kaiken ja nähdä kuinka onnistunut verkkosivustosi suunnittelija on noudattanut ammatillisia periaatteita ja toteuttanut standardeja. Luet tätä artikkelia
1. Avaa Google Chrome incognito-ikkunassa2. Ota käyttöön DevTools-ympäristö3. Siirry Lighthouse4-välilehteen. Napsauta Analysoi sivun lataus -painiketta.5. Katso testitulos Valmis
Tämän artikkelin ja koulutuksen päätavoitteena on oppia mittaamaan verkkosivuston nopeutta ilman lisäjärjestelyjä ja selityksiä ja testata sitä missä tahansa halutussa paikassa ilman työkaluja. Tämä opetusohjelma koskee verkkosivustojen tulosten ja arvioiden saamista Google Lighthousesta. Jos sinulla ei ole tietoa tästä työkalusta ja testistä, voit lukea Google Lighthousen johdantoartikkelin ja jatkaa sitten tätä opetusohjelmaa.
Jotta voit oppia testaamaan ensimmäisen sivun nopeutta ja suorituskykyä, sinun on tiedettävä ja kiinnitettävä huomiota muutamaan kohtaan, jotka yritän tuoda esiin hyvin lyhyesti ja nopeasti.
Ensinnäkin minun on sanottava, että tämä testi suoritetaan Google Chrome -selaimella, Googlen omalla selaimella. Selaimen työkalu on upotettu DevTools-osioon, jota käytämme myöhemmin. Tutustumme häneen. Tarvitset siis vain Kerpak-selaimen ja yhteyden Internetiin; Et tarvitse mitään muuta.
1. Avaa Google Chrome incognito-ikkunassa
Sinun on avattava selaimesi ja avattava Verkkosivusto, josta haluat suorittaa nopeustestin. Tyypillisesti tämä testi suoritetaan jokaisen verkkosivuston pääsivulla. Ei kuitenkaan ole haittaa tiedosta, että tätä testiä ei sovelleta koko verkkosivustolle ja se tarkistaa jokaisen avaamasi sivun erikseen. Sinulla on esimerkiksi tämä vaihtoehto, tuotelistaussivu. Avaa verkkosivusto ja seuraa testiä. Ymmärtääksesi tämän prosessin täysin avaamalla haluamasi verkkosivuston ensimmäinen sivu
Verkkosivuston pääsivu voi olla verkkosivuston yleinen testi, koska se on yleensä laajin sivu ja pääsivulle sijoitetut tilat ja elementit ovat aina samanlaisia kuin yläosassa oleva laaja osio Hero-osiossa ja muissa kaupunginosissa . Ne, joissa on pyörivä liukusäädin alareunassa, näkyvät enimmäkseen pääsivulla, joten pääsivulta testaus on loogisempaa kuin millään muulla sivulla.-
On myös hyvä muistaa suhteellisen tärkeä seikka: jotkin selaimeesi asennetut laajennukset eivät välttämättä vaikuta tähän testiin ja voivat vaikuttaa negatiivisesti vastaanottamiisi numeroihin. On kuitenkin olemassa ratkaisu, jota voit käyttää eristetyssä ympäristössä. Ota vaikeutesi pois ilman näiden laajennusten vaikutusta. Avaa vain Googlen luoma uusi ikkuna nimeltä “Incognito Window” ja aloita testi nimettömänä kirjautumatta sisään.
Voit avata sivuston nimettömässä tai yksityisessä ympäristössä napsauttamalla kolmen pisteen kuvaketta selaimen yläosassa ja valitsemalla Uusi. Incognito-ikkuna avatusta valikosta.
2. Ota DevTools-ympäristö käyttöön
Selaintasi käytetään yleensä Internetin surffaamiseen ja tehokkaasti käyttämiesi verkkosivustojen vieraamiseen päivittäin. Chrome-selaimessa on kuitenkin piilotettu osio nimeltä DevTools ja ohjelmoijien ja verkkosivustojen suunnittelijoiden erikoistuneempia töitä varten tarkoitettu ympäristö, joka tarjoaa käyttäjälle muutamia lisäominaisuuksia, jotka mahdollistavat lisäkoodin ja toiminnot latauksen aikana. Sivu ja joidenkin periaatteiden testaus ja monet muut asiat on sijoitettu tähän osioon, joiden kanssa sinulla ei ole mitään tekemistä ja tarvitset vain erityisen lainauksen nimeltä Lighthouse.
Jos haluat tarkastella tätä osaa tai kehittäjätyökaluihin liittyvää Windowsia, sinulla on kolme vaihtoehtoa suorittaa jokainen niistä. Tämä vie sinut tähän ympäristöön ja selitän sinulle kaikki kolme menetelmää:
1. Napsauta kolmea pistettä selaimen yläosassa, avaa Lisää työkaluja -valikko ja valitse Kehittäjän työkalut -alivalikko2. Avaa haluamasi sivusto, napsauta hiiren kakkospainikkeella kyseisen sivuston osaa ja valitse “Tarkista” -vaihtoehto, tämän valikon viimeinen vaihtoehto3. Näppäimistön F12-näppäimen painaminen tuo näkyviin DevTools-osion
Kaikki kolme edellä mainittua polkua johtavat samaan tulokseen: näet lisää asetuksia, niin sanotun kehitysympäristön, joka sisältää erilaisia välilehtiä, joista jokainen suorittaa tietyn tehtävän, ja yksi niistä on tarvitsemamme Goga Lighthouse.
3. Siirry Lighthouse-välilehteen
Kun aktivoit DevTools-ympäristön, joten avaa kehitysvälilehdet, huomaat, että on monia osioita, kuten konsoli, verkko, kohde, lähde ja joitain muita, jotka eivät välttämättä näy sinulle. Tämä on Lighthousen ensimmäinen näkymä ja sen pitäisi sijaita sisään. Paina näiden välilehtien lopussa olevaa >>-merkkiä. Voit sitten nähdä muut olemassa olevat laskut, joita ei voi nähdä, ja valita niistä Lighthouse-vaihtoehdon.
Etsimällä, valitsemalla ja avaamalla Lighthouse-välilehden olet 99% oikeilla jäljillä ja tarvitset vain yhden klikkauksen saadaksesi testituloksen. Samalla polulla on toinen välilehti nimeltä “Suorituskyky”. Nimi saattaa johtaa sinua harhaan, mutta meillä ei ole mitään tekemistä tämän välilehden kanssa ja sitä käytetään muuhun työhön. Joten etsi suoraan Lighthouse ja valitse se.
4. Napsauta Analysoi sivun lataus -painiketta.
Olettaen, että olet suorittanut oikein kaikki aktivoimasi välilehden vaiheet. Tässä tapauksessa sinun pitäisi helposti nähdä sininen painike, jonka otsikko on “Analysoi sivun lataus” -painike. Voit painaa tätä painiketta muokkaamatta muita olemassa olevia asetuksia. Odota selaimen perusteellista tarkistusta ja saat tuloksen.
Siellä näkemiäsi asetuksia ja vaihtoehtoja voidaan tarvita muissa tilanteissa testin vastaanottamiseen, mutta et näe muutoksia ja hyväksyt samat oletusasetukset ja luotat Googleen. Ainoa vaihtoehto, joka voi olla hyödyllinen sinulle, on Laite-vaihtoehto, joka suorittaa tämän testin erikseen pöytäkoneille ja mobiililaitteille.
Toisaalta, koska toistuvasti sanotaan, että suurin osa minkä tahansa verkkosivuston tiedoista tulee mobiililaitteilta, sinun tulee myös kiinnittää enemmän huomiota mobiilivalmiisiin tuloksiin ja harkita mobiililaitteita oletuksena, jolla on yleensä alhainen pisteitä mobiililaitteiden nopeustestissä. Se kestää kolme, mutta mielestämme tarkka mobiilitestipohja on tärkeämpi.
5. Katso testitulos
Sinun on odotettava noin minuutti tai vähemmän saadaksesi halutun tuloksen Googlen analytiikka tehdään Lighthouse-työkalussa ja tulos näytetään. Näissä tuloksissa on viisi ympyrää, jotka on lueteltu sinulle viiteen eri luokkaan, jotka ovat suuria ja selvästi näkyvissä testin alussa. Käyn nämä viisi osiota läpi hyvin yleisesti ja lyhyesti, jotta tunnet nämä luokat mahdollisimman hyvin.
Suorituskykytesti
Tehoalue on tärkein tulos, jota sinun pitäisi lisätä. Toisin sanoen tämän testin todellinen arvo on tässä osiossa. Suorituskyky-osiossa käsitellään verkkosivuston monimutkaisimpia toimintoja ja prosesseja latauksen aikana ja otetaan huomioon monet asiat erittäin tarkasti ja millisekuntien sisällä, joita jokainen yritys ja henkilö voi parantaa ja työskennellä tämän pistemäärän nostamiseksi. EI
Useimmat verkkosivustot ovat 50–60 ja ne näytetään oranssina. Jos pistemääräsi on 50–90, oranssi tarkoittaa, että parannusta tarvitaan ja sinun tulee yrittää parantaa. Tietenkin, jos et ole verkkosivujen suunnittelija, ponnistuksesi on turhaa ja tämä osa tulee pyytää kokonaan yritykseltä, joka suunnitteli verkkosivuston sinulle.
Yli 90 pistemäärä, josta saamme Googlelta vihreän pisteen, ensimmäisellä ympyrälläsi, eli suorituskyky, vaatii korkeita kustannuksia, ja vain harvat ihmiset tai tiimit voivat saavuttaa vihreän pisteen Googlelta.
Esimerkiksi kuinka kauan käyttäjän on odotettava toimiakseen interaktiivisesti sivuston kanssa. Sinulle on täytynyt tapahtua, että avasit paikan ja valikkoa napsautettuasi mitään ei tapahtunut ja muutaman sekunnin kuluttua valikko voidaan yhdistää; Tämä on sama aika kuin Time to Interactive, jolloin joudut odottamaan, että tiedot latautuvat ja sivusto muuttuu interaktiiviseksi.
Monissa muissa tapauksissa se on esimerkiksi “Total Blocking Time”, jotka ovat skriptejä, jotka pitävät sivun ladattuna ja pakottavat käyttäjän odottamaan näiden skriptien latautumista, tai “Cumulative Layout Shift”, jotka ovat ulkonäön ja sisällön hyppyjä. latauksen aikana, esimerkiksi “Aluksi” -tilassa. , mitään ei näy. Kun elementit on ladattu sivulle, niitä siirretään alaspäin, kunnes ylimmät elementit tulevat näkyviin, mikä on erittäin tärkeää tässä osiossa.
On olemassa monia pieniä testejä, joista vain kolme mainittiin yllä, ja kaikkien näiden testien tulokset yhdessä, jotka liittyvät verkkosivustosi koodaukseen, arkkitehtuuriin ja tekniikoihin, ovat täysin verkkosivustosi suunnitteluyrityksesi vastuulla ja ovat Monimutkaisia. On monia asioita, joita on parannettava, eikä niitä voida vain korjata ja ohittaa.
Esteettömyystesti
Esteettömyys saattaa olla sinulle tuntematon, ja jotkut konsortiot ovat asettaneet jotkin standardit, joten teknologia-alan verkkosivustot tai muut laitteet on suunniteltava ja rakennettava kaikille, myös vammaisille. Ne ovat käyttökelpoisia.
Esimerkiksi ihmisille, jotka ovat värisokeat ja eivät pysty erottamaan tekstin ja taustan värien eroa, värimaailman tulisi olla sellainen, että lukija on kontrastisen taustan edessä tai sen tulee olla myös sokeiden käytettävissä. tietyissä osissa standardin kanssa. On olemassa ennalta määritellyt selitykset, jotta sokea voi ymmärtää verkkosivuston painikkeita äänellä.
Jos ostoskorin painiketta ei ole määritelty kulissien takana ja koodauksessa, sokea ei yksinkertaisesti voi avata sitä. Jos nämä standardit kuitenkin täyttyvät, laitteet voivat lukea ne kyseisen henkilön puolesta.
Esteettömyysosiota tai verkkoapua voidaan säätää yksinkertaisella ja tavallisella tavalla, eikä tämän pistemäärän alentaminen ole sinulle tuskallista tai kallista.
Parhaan käytännön testaus
Ohjelmoinnin maailmassa on käsite nimeltä “parhaat käytännöt”, jota käytetään jopa muilla toimialoilla. Sen sanotaan olevan paras tapa tehdä mitä tahansa työtä, ja on monia tapoja ratkaista ongelmia ja joillakin vanhimmilla on jo tietyt ja tarkat menetelmät. Auttaisi, jos noudatat suosituksia, etkä keksi pyörää itse uudelleen ja kiinnität niihin huomiota parhaan tuloksen saavuttamiseksi.
Haluaisin antaa joitakin yleisiä ja yksinkertaisia esimerkkejä näistä menetelmistä; Voimme huomauttaa, että kuvan pituuden ja leveyden suhdetta tulee kunnioittaa ja että verkkosivulla olevaa valokuvaa ei saa venyttää, koska leveys tai korkeus aiheutti sen ja muutti sen sisältöä. Tai vielä nopeampi: jos jätät kuvan alhaisella resoluutiolla ja pikselit ovat merkittyjä ja huonolaatuisia, et noudata parhaita käytäntöjä. Toinen erityinen ja yleinen asia on, että verkkosivustosi täytyy latautua HTTPS-muodossa käyttäjälle ja HTTP-tilassa oleva sivusto on haavoittuvainen, minkä katsotaan myös olevan tämän parametrin vastainen.
SEO testi
Olemme saapuneet suloiseen SEO-aiheeseen. Tämä pistemäärä, joka näytetään sinulle otsikon SEO alla, tarkistaa muun muassa verkkosivuston perusvaatimusten ja tarpeiden olemassaolon. Onko verkkosivustollasi esimerkiksi otsikko tai metaotsikko? Jos laitoit valokuvan sivulle, oletko kirjoittanut tarpeeksi kuvauksen tai alt-tunnisteen kyseiselle valokuvalle? Onko sivulla rikkinäinen linkki, joka johtaa käyttäjän virheeseen, tai sivulla linkki, joka ei tee mitään ja on tylsä?
Kuten tiedät, näillä asioilla ei ole mitään tekemistä verkkosivustosi suunnittelun ja verkkosivustosi tietojen, uudelleenjärjestelyjen ja teknisen rakenteen kanssa, eikä SEO yleensä tarkista verkkosivustosi infrastruktuuria. Voit lukea nämä raportit ja korjata virheet tapauskohtaisesti. Voit myös tehdä tästä ympyrästä vihreän ja saavuttaa jopa 100 pistettä.
PWA-testaus
Ainoa välilehti, joka on poistettu käytöstä ja ei-aktiivinen sinulle ja useimmille tuloksille, ja sinun ei tarvitse huolehtia, on PWA tai Progressive Web App, joka tarkoittaa “progressiivista verkkosovellusta”, eikä kaikkia verkkosivustoja käytetä sovelluksena ollenkaan. , eikä siihen ole tarvetta. Näin ei tarvitse olla. Olet luultavasti vieraillut verkkosivustoilla, jotka pyytävät sinua lisäämään verkkosivuston “Lisää aloitusnäyttöön” -sovelluksena, joka lisätään matkapuhelimeesi sovelluksen, PWA:n, tapaan. Uskon, että on mahdollista, että tämän osion tarkistus poistetaan Lighthouse-standardeista, koska se ei ole yleinen eikä koske kaikkia verkkosivustoja.
Tietenkin tämä osio arvioidaan erikseen, ja tämä testi ei vaikuta negatiivisesti sivuihin, jotka eivät ole PWA:ta ja joilla ei ole sovellustilaa, ja ne näytetään harmaina ja passiivisina. Joten älä huoli; Ohita koko tämä osio ja ohita se.
Diplomi
Kaikki nämä kohdat ovat olennaisia; Sinun tulisi yrittää tehdä kaikista neljästä ympyrästä vihreitä. Siinä on hienovarainen kohta: jos kiinnität huomiota, voi olla erittäin kannattavaa ja hedelmällistä kiinnittää erityistä huomiota ensimmäiseen ympyrään, “Suorituskyky” -osioon, koska se on käytännössä ainoa asia, joka ei ole sinun hallinnassasi. Tämä ei ole mahdollista ilman vähän opiskelua ja aikaa. Ota selvää siitä, jotta voit lisätä pisteitä. Muut osat tulevat lähelle 100:aa pienellä kärsivällisyydellä.
