Kas mõni järgmistest kõlab tuttavalt: teie veebisait näib alati olevat loid, lehed laaditakse juhuslikult koos lehe ümber põrkuvate elementidega või tundub, et te ei genereeri (ja ei hoia) ootuspärast orgaanilist liiklust?
Ükskõik milline neist sümptomitest võib olla märk sellest, et peate oma WordPressi veebisaidi põhilisi veebielemente kontrollima.
Core Web Vitals on 2020. aasta Google'i algatus, mis aitab veebisaitide omanikel ja otsingumootoritel jõuda samale lehele kasutajakogemuse parandamise osas.
Seega ei mõjuta see, kuidas teie veebisait nende mõõdikute põhjal saavutab, otseselt teie edetabelit otsingumootorites, vaid võib anda teile ka ülevaate sellest, kas külastajate arvates on teie veebisaidi kasutamine meeldiv või masendav.
Kuid mis täpselt on veebisaidi põhilised veebipõhised funktsioonid? Miks need olulised on? Ja kuidas saate veenduda, et teie veebisaitide põhilised veebipõhised näitajad on nullis?
Selles lõplikus juhendis käsitleme kõike, mida peate teadma selle kohta, kuidas oma WordPressi veebisaidi põhilisi veebielemente praegu ja tulevikus parandada.
Siin on kokkuvõte, mis aitab teil artiklis navigeerida:
Mis on põhiveebitalid?
Nagu arvata võis, on keeruline keeta midagi nii subjektiivset nagu kasutajakogemus objektiivsete mõõdikuteni, mida saab mõõta ja võrrelda.
See on aga täpselt see, mida Google teha püüab, vähemalt mis puudutab seda, kuidas veebisaidi jõudlus kasutajakogemust mõjutab.
Omades sõnad: "Web Vitals on Google'i algatus, et pakkuda ühtseid juhiseid kvaliteedisignaalide kohta, mis on veebis suurepärase kasutuskogemuse pakkumiseks hädavajalikud."
Google on välja töötanud oma peamised veebipõhised elutähtsad mõõdikud, et keskenduda kasutajakogemuse kolmele erinevale tahule.
- Laadimisaeg/kiirus: See on kõige otsesem tahk, mis viitab otseselt lehe ja selle sisu laadimise kiirusele/aeglasele. Rohkem kui pooled mobiilikasutajad hülgavad lehe, mille laadimiseks kulub rohkem kui 3 sekundit. Selles kiires maailmas muutuvad kasutajad üha kannatamatumaks, muutes veebisaitide aeglase laadimise peamiseks pettumuseks.
- Interaktiivsus: Interaktiivsetel elementidel, näiteks nuppudel, on sageli viivitatud reageerimisajad, kuna sisu laaditakse taustal. Mida varem teie lehe elementidega suhelda saab, seda parem on üldise kasutajakogemuse jaoks.
- Visuaalne stabiilsus: Mõnikord hüppavad aeglase või optimeerimata veebilehe laadimisel elemendid ekraanil ringi, kuna need laaditakse vales järjekorras või lihtsalt seetõttu, et mõne elemendi laadimine võtab palju kauem aega kui teistel. See võib põhjustada kasutajate valesid toiminguid ja lihtsalt halb välja näha.
Google on loonud kolm peamist veebipõhist põhielementi, mis on seotud kõigi nende teguritega. 2020. aasta alguses kasutusele võetud veebipõhiste põhielementide praegune komplekt on järgmine.
Suurim sisukas värv (LCP)
See on suurim element, mis laaditakse veebisaidi lehe nähtavale alale (kõik, mida näete enne alla kerimist). LCP mõjutab otseselt teie veebilehe kiirust koormus.
Google soovitab LCP-ks 2.5 s, mis tähendab, et selle aja jooksul peaks laadima suurim element.
Näiteks alloleval pildil on lillakas taustapilt LCP:
Paljudel kaasaegsetel veebisaidilehtedel on LCP tavaliselt täislaiuses esiletõstetud pilt, mis kaasneb lehe või ajaveebi artikliga.
Kuna see on praegu nii populaarne tava, on see tavaline WordPressi saidi põhiveeb, mis vajab täiustamist. Seega mõjutavad LCP-d enamasti aeglaste serverite või suure failisuurusega elementide kasutamine, mille laadimine võtab kaua aega.
Google ise loetleb järgmised LCP-d mõjutavad peamised tegurid:
- Aeglane serveri reageerimisaeg
- Renderdust blokeeriv JavaScript ja CSS
- Ressursi laadimisajad
- Kliendipoolne renderdamine
Esimese sisendi viivitus (FID)
Lihtsamalt öeldes mõõdab see aega, mis kulub interaktiivsete elementide sündmuste käivitamiseks. Näiteks kui kaua kulub kasutajal esimest korda lingil või nupul klõpsamisel aega, enne kui toimingu saab lõpule viia?
Võib esineda viivitusi, kuna brauser on hõivatud sisu laadimisega (nt lehe elemendid või JavaScript või koodi käivitamine ajal, kui kasutaja klõpsab nupul või lingil.
Google mõõdab ainult esimest sisendi viivitust, kuna interaktiivsusega seotud probleemid kipuvad ilmnema lehe esmasel laadimisel.
Google soovitab aega alla 100 ms (või 0.1 s). FID hõlmab interaktiivsus veebipõhiste elutähtsate näitajate aspektist.
FID-i mõjutab peamiselt teie lehe JavaScript või CSS, eriti kui laaditakse koodi käivitamisel lehe laadimisel.
Kumulatiivne paigutuse nihe (CLS)
CLS püüab mõõta ootamatuid muudatusi lehe paigutuses lehe laadimise ajal. Hea näide on leht, millel on kaks nuppu üksteise all.
Nii nagu soovite puudutada alumist nuppu, laaditakse ekraani ülaossa veel üks element, mis paneb teid kogemata puudutama esimest nuppu.
Oleme kõik kogenud seda probleemi ja pettumust, mis kaasneb vale toimingute tegemise või valele lingile navigeerimisega.
Siin on näide Google'ist. Sel juhul laaditakse nupp juba laaditud halli ja rohelise sektsiooni vahele, liigutades rohelist jaotist allapoole:
Kuigi kontseptsioon on lihtne, võib matemaatika pisut keeruliseks muutuda. CLS arvutab iga elemendi jaoks elemendi suuruse ja nende läbitava vahemaa osana kogu ekraani suurusest.
Seejärel korrutatakse need kaks väärtust, et saada iga elemendi üldine mõjuskoor. Seejärel liidetakse need mõjuskoorid kokku, et saada lehe kogu CLS, mille väärtus on vahemikus 0 kuni 1.
Google soovitab veebisaitidel püüda CLS-i 0.1 või vähem.
Miks on teie põhiveebi Vitals teie WordPressi veebisaidi jaoks olulised?
On mitmeid põhjuseid, miks teie WordPressi veebisaidi põhilised veebielemendid võivad olla edukad või ebaõnnestunud. Seetõttu kutsuvad nad neid kasutajakeskseteks jõudlusmõõdikuteks.
Täiendades oma põhilisi veebielemente, pakute paremat kasutuskogemust ja muudate oma veebisaidi kasutajasõbralikumaks.
Ainuüksi see on oluline mitmel põhjusel:
- Vähendage oma põrkemäära, hoides oma veebisaidil rohkem kasutajaid
- Jälgige oma kasutajatele esmakordseid ja püsivaid muljeid
- Looge oma veebisaidist usaldusväärne ja usaldusväärne pilt
- Muutke rohkem külastajaid klientideks
- Pakkuge oma uutele ja olemasolevatele kasutajatele nauditavamaid kogemusi
Kui teie veebisaidi laadimine võtab kaua aega, kipuvad kasutajad selle lihtsalt hülgama ja järgmisele lehele minema. Tegelikult, 53% mobiilikasutajatest hülgama veebisaidi, mille laadimiseks kulub rohkem kui 3 sekundit.
Siiski on veel üks põhjus, miks peamised veebipõhised elutähtsad näitajad on teie veebisaidi edu jaoks üliolulised: Google kasutab neid nüüd ka järjestussignaalina, kui järjestab veebilehti oma otsingumootori tulemuste jaoks.
See tähendab, et teie WordPressi veebisaidi põhiveebi vitalsi skoor mõjutab otseselt teie asetust Google SERP-is.
Nagu te ilmselt teate, on kõrge asetus Google'is (ja eriti esimesel lehel) üks parimaid viise orgaanilise liikluse suurendamiseks.
Kuidas testida oma WordPressi veebisaidi põhilisi veebielemente
Nüüd, kui teil on hea ettekujutus sellest, millised on peamised veebipõhised elutähtsad näitajad ja miks need on olulised, vaatame lühidalt tööriistu, mida saate oma veebisaidi toimivuse tuvastamiseks kasutada.
Neid tööriistu kasutades saate avastada nii praegused probleemid kui ka võimalused oma skoori parandamiseks.
Keskendume tööriistadele, mis on enamiku veebisaitide omanike jaoks hõlpsasti juurdepääsetavad ja kasutatavad, et saaksite neid juba täna oma veebisaidi täiustamiseks kasutama hakata.
Valguskoda
LightHouse on otse Chrome'i sisseehitatud veebiarendaja tööriist, mida saate kasutada oma WordPressi veebisaidi põhiliste veebifunktsioonide testimiseks.
LightHouse'ile pääsete juurde mis tahes veebisaidil, vajutades „F12”. See avab sellise lehe, kus vasakul on veebisaidi eelvaade ja paremal LightHouse'i konsool:
LightHouse'i jõudlusauditi tööriista saate avada, klõpsates nuppu „>>” ülemisel ribal ja seejärel "Majakas." See viib teid allolevale lehele.
Oma toimivusmõõdikute testimiseks veebipõhiste elutähtsate näitajate osas peaksite kontrollima "Esitus" kasti ja seejärel valige, kas soovite testida lehte mobiili või lauaarvuti jaoks. Klõpsake "Loo aruanne" tulemuste saamiseks:
Teie skoor näeb välja selline ja näete allpool üksikute mõõdikute jaotust.
LightHouse tõstab teie skoorist allpool ka võimalusi, kus saate oma lehe toimivust parandada.
Allpool on rohkem diagnostilisi tulemusi. Need tegurid võivad aidata teil oma WordPressi veebisaidi põhilisi veebielemente veelgi optimeerida, parandades üldist jõudlust ja optimeerimist.
Lighthouse ei hinda FID-i otseselt. Kuid kogu blokeerimisaeg (TBT) ja aeg interaktiivseks (TTI) on FID-ga väga tihedalt seotud. Nende mõõdikute täiustamine peaks parandama ka teie FID-i.
Näiteks osutab see tegelikult teie suurimale LCP-elemendile, teie lehe üldisele suurusele, suured paigutuse nihked ja põhilõime ülesanded, mis võivad interaktiivsust takistada.
PageSpeed Insights
PageSpeed Insights on veel üks hõlpsasti kasutatav tööriist. Kõik, mida pead tegema, on minna PageSpeed Insights ja kleepige link analüüsitavale veebilehele:
Tulemused on väga sarnased LightHouse'i omaga. Peamine erinevus seisneb selles, et PageSpeed Insights pakub ka reaalseid tulemusi piisava liiklusega veebisaitidele.
Nagu näete, mõõdab PageSpeed Insights otse teie FID-i ja näitab tegelikult, millisesse protsentiili teie veebisait jääb.
Samuti annab see teada, kas teie veebisait on viimase 28-päevase perioodi jooksul reaalmaailma andmeid kasutades läbinud veebipõhiste elutähtsate näitajate koondhinnangu või mitte.
Google leiab, et veebisaidid, mis jäävad kõigi mõõdikute puhul vähemalt 75. protsentiili alla, läbisid hindamise.
Selle alt leiate samu laboripõhiseid tulemusi, mida LightHouse pakub, samuti täiustamis- ja diagnostikavõimalusi:
Lisaks individuaalsetele punktisummadele peaksite püüdma saavutada ka üldhinnet 75+.
Google Search Console
Samuti saate oma veebisaidi toimivusaruannete loomiseks kasutada Google'i otsingukonsooli. Esmalt peate siiski looma konto ja läbima oma veebisaidi konsoolis registreerimisprotsessi.
Seotud lugemine: Kuidas kasutada GTmetrixit oma veebisaidi kiiruse testimiseks?
Kuidas parandada oma WordPressi veebisaidi põhiveebi elutähtsaid andmeid
Oluline on mõista, et paljud neist parandustest aitavad parandada rohkem kui ühte CWV mõõdikut. Seetõttu on oluline oma CWV optimeerimisele terviklikult läheneda, et saada parimaid tulemusi ja pakkuda parimat kasutuskogemust.
Sellest hoolimata näitame, kus konkreetne optimeerimine konkreetsele CWV-le otse rakendub:
Parandage serveri aeglast reageerimisaega
See on esimene ja peamine probleem, mida peaksite oma veebisaidi toimivuse parandamisel alati lahendama. Pole tähtis, kui hästi te oma lehti optimeerite, kui teie veebisait on majutatud aeglases serveris, töötab see ikkagi halvasti.
Võimalik, et serveri reageerimisaegade parandamisel on LCP-le suurim mõju. Mida kiiremini asjad serverist laaditakse, seda tõenäolisem on, et ka teie LCP laadib kiiresti.
Kuid see toob kaudselt kasu ka kõigile teistele mõõdikutele, vähendades lihtsalt laadimise koguaega.
Tavaliselt saate aru, kas teie server on aeglane, kui enamik teie veebisaidi lehti laaditakse aeglaselt, kui esi- või tagaküljel on jõudlus pidevalt aeglane.
Kui kasutate oma toimivuse auditeerimiseks mõnda ülaltoodud tööriistadest, on see ka hea näitaja, kui "Serveri esialgne reageerimisaeg oli lühike" langeb punasesse:
Majutusressursside ülekasutamine
Samuti saate oma hostimise armatuurlaual kontrollida oma ressursside kasutamist, et näha, kas kasutate üle ressursse (nt protsessorit, RAM-i, I/O toiminguid, kordumatut külastuse eelarvet või ribalaiust).
Nende lävede lähedal töötamine toob paratamatult kaasa aeglasema jõudluse. Kui saavutate või ületate need läved, võib teie host teie kontot tahtlikult piirata. Eriti tõenäoliselt juhtub see jagatud hostimisteenuste puhul.
Näiteks siin on ekraanipilt ressursside kasutamisest a Bluehost konto:
Paljud neist parimad WordPressi hostimise pakkujad pakkuda mitmeid jagatud hostimise ja ka VPS-i pakette, nt A2Hosting, Bluehost, GoDaddyja HostGator.
Võite kasutada ka suure jõudlusega WordPressi spetsiifilist pakkujat, näiteks WPEngine or Kinsta mis on pisut kallimad, kuid pakuvad palju rohkem skaleeritavaid WordPressi pakette.
Näete, et enamik protsente on endiselt suhteliselt tervislike vahemike piires.
Selle probleemi lahendamiseks on kaks võimalust.
- Vähendage oma veebisaidi jalajälge: Kui teil on probleeme arvutusressurssidega, võite oma veebisaidi optimeerimisel mõningaid muid siin loetletud parandusi näha. See tähendab tarbetu koodi, pistikprogrammide, teemade või muu, mis võib teie ressursikasutust piirata, eemaldamist. Mitme veebisaidi käitamine ühel jagatud hostimiskontol võib avaldada tohutut mõju ja peate võib-olla mõne veebisaidi kasutusest kõrvaldama või teisaldama teisele kontole/serverisse.
- Täiendage oma kontot: Ülekasutatud ressursid võivad olla märk sellest, et olete oma arvelduskonto piiridest välja kasvanud. Võib-olla on õige aeg oma plaani uuendada või kaaluda spetsiaalsete ressurssidega hostimisele üleminekut (nt VPS või spetsiaalne server). Kuigi kaks viimast varianti on kallimad, tasub investeerida, kui arendate veebiäri.
Kasutage CDN-i
CDN (Content Delivery Network) on ülemaailmne serverite võrk. Kui registreerite oma veebisaidi CDN-iga, levitab see teie veebisaidi sisu mitmele serverile erinevates piirkondades.
Kui selle piirkonna kasutaja külastab teie veebisaiti, laadib see sisu lähimast serverist, parandades lehe laadimisaega.
Hea uudis on see, et enamik hostimisteenuseid pakuvad täna tasuta CDN-i. Kõige tavalisem on populaarse CDN-i tasuta tasand CloudFlare.
Seega kontrollige kõigepealt, kas teie kontol on CDN ja kas see on konfigureeritud. Tugi peaks teid selles aitama.
Seejärel saate hõlpsasti üle minna esmaklassilisele CDN-kontole, et tagada veelgi suurem ribalaiuse kättesaadavus, suurem kiirus ja turvalisus.
Seotud lugemine: Kuidas WordPressi saiti kiirendada?
Hoidke oma varad vahemällu
Vahemällu salvestamine tähendab veebisaidi sisu (nt HTML-failide) salvestamist servaserveritesse, kus külastajad sellele tavaliselt juurde pääsevad.
See hoiab ära selle, et veebisaiti tuleb iga kord nullist uuesti luua. Veebisaidi registreerimine CDN-is peaks juba teie vahemällu parandama.
Trikk seisneb selles, et soovite, et külastajad saaksid teie veebisaidi vahemällu salvestatud versiooni seni, kuni teie veebisaidil midagi ei värskendata, kuid soovite, et nad saaksid uue versiooni kohe, kui oma saidil muudatusi teete.
Seda võib olla keeruline käsitsi teha, eriti kui soovite kasutada brauseri vahemällu salvestamist.
Kui teil on WordPressi veebisait, on teie parim valik kasutage vahemällu salvestamise pistikprogrammiNagu WP raketi, Vahemälu võimaldaja, Komeedi vahemäluJne
Kolmanda osapoole sisu eellaadimine
Kui laadite sisu kolmandate osapoolte veebisaitidelt enne oma LCP-d (või isegi kui LCP-d), peaksite selle võimalikult kiiresti kõrvaldama.
Esiteks saate tuvastada, kas kolmanda osapoole sisu mõjutab teie lehti, kui PageSpeed Insights tõstab esile järgmise probleemi.
Sel juhul laadime ainult kolmanda osapoole fonte, seega on kõik korras.
WordPressis põhjustavad selle probleemi tavaliselt kolmanda osapoole pistikprogrammid, näiteks Google Analytics, WooCommerceJne
Ilmselge lahendus oleks lihtsalt pistikprogrammi või kolmanda osapoole koodi eemaldamine, kui see pole vajalik. Reeglina ei tohiks kunagi jätta kasutamata pistikprogramme oma WordPressi installi installimata.
Siiski saate oma veebisaidi lehtedele lisada ka järgmise kohandatud märgistuse.
<link rel="preconnect" href="https://example.com" />
Või:
<link rel="dns-prefetch" href="https://example.com" />
Saate lihtsalt asendada href domeeni kasutatava teenuse domeeniga, saate brauserit oma kavatsusest teavitada.
Näiteks YouTube'i videote eellaadimiseks võite lihtsalt vahetadahttps://youtube.com.” Leiate sagedamini kasutatavaid eellaadimisdomeene siin.
Mõned vahemällu salvestamise pistikprogrammid, näiteks WP raketi, võimaldab teil hõlpsasti kasutatavalt armatuurlaualt eellaadida ka kolmanda osapoole sisu.
Optimeerige oma JavaScripti ja CSS-i
JavaScript- või CSS-failide laadimine võib samuti viivitada teie lehel LCP-elemendi laadimiseks ja renderdamiseks kuluvat aega.
Brauser lükkab HTML-lehe renderdamise edasi, kui see kohtab väliseid stiililehti või JavaScripti sildid enne sisu.
JavaScripti ja CSS-i mõju oma veebilehtedele piiramiseks saate kasutada mitmeid lahendusi.
- Kõrvaldage renderdamist blokeerivad ressursid
- Minimeerige CSS ja JavaScript
- Kombineerige CSS-failid ja JavaScript-failid
- Optimeerige CSS- ja JavaScript-failide edastamist
JavaScripti ja CSS-i optimeerimine toob teie FID-le enamasti kasu, kuna see eemaldab põhilõimes käivitava koodi, mis takistab teie veebisaidi interaktiivsust.
Kuid see mängib rolli ka LCP laadimisaegade vähendamisel, kuna võite esmalt kõrvaldada üksused, mis blokeerivad LCP laadimist.
Taaskord juhib PageSpeed Insights abivalmilt tähelepanu sellele, kas saate selles osas parandada, millised on probleemi põhjustanud täpsed failid/päringud ja millised on võimalikud säästud:
Näiteks näeme siin mitmeid CSS- ja JavaScript-faile, mis blokeerivad lehe sisu renderdamist.
Võite näha ka neid viipasid CSS-i ja JavaScripti minimeerimiseks:
Või need võimalused kasutamata CSS-i ja JavaScripti eemaldamiseks:
Kui kasutate Lighthouse'i jõudlusauditi tööriistana, võite näha ka järgmist: "Eemalda kasutamata JavaScript”:
Mõne ülaltoodud piltidel oleva võimaluse korral näete potentsiaalset säästu millisekundites.
See on oluline, kuna see näitab aega, mille jooksul käivitav kood võib blokeerida peamise lõime, mis renderdab teie veebisaidi lehte ja aitab otseselt kaasa FID-ile.
WordPressi veebisaidi omanikuna on teie parim panus lasta pistikprogrammil teha teie eest raske töö, et optimeerida oma WordPressi veebisaidi põhilisi veebielemente.
Kui teil pole veebiarenduse kogemust, võite oma veebisaidi funktsionaalsust või välimust tõsiselt mõjutada, kui muudate selle aluseks olevat koodi käsitsi.
Taaskord selline plugin nagu WP raketi (tasuline) või Autoptimize (tasuta) on selle võimalusega sisseehitatud.
See annab teile järgmised võimalused:
- Vähendage CSS-i ja JavaScripti faile
- Kombineerige CSS-faile ja kombineerige JavaScripti faile
- Välistage mittevajalikud/kasutamata CSS-failid
- Lükka failid edasi, et need enam renderdamist ei blokeeriks
Siin on näide automaatse optimeerimise liidest koos saadaolevate sätetega. CSS-i ja HTML-i jaoks on sarnased valikud:
Võimalik, et nende funktsioonide kasutamine võib teie lehe välimust häirida. Seega kontrollige alati üle, mis efekt sellel on, ja seejärel lubage/keelake seaded vastavalt.
Suurema osa sellest saate teha ka käsitsi, muutes märgistust, kuigi peate teadma, mida teete, et vältida lehtede renderdamise segamist.
Samuti on täpsemaid parandusi, mis ei põhjusta suurema tõenäosusega suuri probleeme, näiteks Vältige pärand-JavaScripti esitamist tänapäevastele brauseritele ja „eemalda JavaScripti kimpudest duplikaadid” kuid te peaksite jõudlustesti käivitamisel lihtsalt silma peal hoidma nendel võimalikel probleemidel.
Kuidas parandada oma CLS skoori
CLS on suhteliselt ainulaadne WordPressi põhiveeb, kuna see ei sõltu tegelikest laadimisaegadest ega veebisaidi kiiruse parandamine. Selle asemel tugineb see rohkem headele tavadele, et tagada teie lehe elementide õiges järjekorras laadimine.
Üldine veebisaidi sisu laadimisaegade kiirendamine võib aga tajutavat CLS-i vähendada. Selle põhjuseks on asjaolu, et kui teie lehed laaditakse väga kiiresti, märkavad kasutajad vähem ebastabiilsust ja vähem tõenäoliselt segab see neid teie veebisaidi kasutamist.
Allpool kirjeldame mõnda konkreetset viisi, kuidas saate oma WordPressi lehtedel CLS-i vähendada. Kõigi muude aspektide vaatamiseks peaksite siiski lugema kogu Google'i juhendit CLS-i optimeerimise kohta.
Andke oma piltidele ja videoelementidele suuruse atribuudid
Enne piltide ja videote külastajatele vaatamiseks lehele laadimist proovib brauser neile ruumi eraldada.
Õige suurusega kasti eraldamiseks vajab see aga elemendi kõrguse ja laiuse väärtusi. Kui brauser suudab luua iga elemendi jaoks õige suurusega kasti, laaditakse need samas kohas ja hoiavad vaate stabiilsena.
WordPress peaks kõigi teie piltide jaoks automaatselt tagama kõrguse ja laiuse atribuudid. Kuid veendumiseks peaksite seda veel kord kontrollima.
Selleks vaadake lihtsalt avaldatud lehte, millel on mõned pildid. Paremklõpsake mis tahes pilti ja seejärel klõpsake nuppu "Kontrolli:"
See avab akna aluseks oleva HTML-iga, mille pildispetsiifiline märgistus on esile tõstetud. Näete, et sellel pildil on laius = "1024" ja kõrgus = "683" täpsustatud:
Piirake dünaamilise sisu kasutamist
Kuigi pildid ja videod on siin kõige levinumad rikkujad, peaksite olema ettevaatlik ka manuste (nt vidinate või videomanuste), iframe'ide, reklaamide ja muu dünaamilise sisu suhtes.
Eriti tüütu on reklaamid, mis ilmuvad ekraani ülaosas ja kogu muu lehe sisu allapoole liigutamine. Kui peate neid kasutama, peaksite veenduma, et need laaditakse esmalt või luuakse neile algusest peale ruumi.
On teada, et Google karistab dünaamilist sisu, mis takistab kasutajal lehe sisu kasutamist või vaatamist. Neid nimetatakse sageli "Sissetungivad vahereklaamid."
Tänapäeva suurepärane näide on tellimise hüpikaken, mis katab kogu lehe ja mis tuleb enne sisu vaatamist sulgeda.
Kui soovite seda tüüpi elemente kasutada, on kõige parem konfigureerida see sisselibistatava või külgribana, mis katab ainult osa lehest ega sisesta end teiste elementide vahele.
On palju hüpikaknaid ja WordPressi reklaamipluginad, mis võimaldavad teil seda tüüpi elemente konfigureerida. Näiteks, JetPopup, OptinMonster, Õitsemavõi isegi sisseehitatud Elementori hüpikakende koostaja.
Kahjuks pole samm-sammult viisi, kuidas seda teha. Peate lihtsalt tegema terve mõistuse otsuseid, mis põhinevad CLS-i juhised pakub Google.
Eellaadige fonte, et vältida FOIT-i ja FOUT-i
Nagu me tegime kolmandate osapoolte sisu puhul, peaksite ka valikulisi fonte eellaadima, et need ei segaks lehe sujuvat laadimise järjestust.
Probleem on selles, et mõnikord hakkab brauser laadima valmis elemente ja lükkab fondifailide laadimise hilisemaks. See toob kaasa olukordi, kus tekst on renderdamiseks valmis, kuid fonti pole veel laaditud.
See põhjustab nn nähtamatu teksti välku (FOIT). Või võib see põhjustada ka FOUT-i või stiilita teksti välku (FOUT).
Esimene tähendab, et seal on tühi ruum ilma tekstita, samas kui teine tähendab, et selle asemel laaditakse stiilita süsteemifont. See võib halvimal juhul olla häiriv või parimal juhul lihtsalt halb välja näha.
Saate seda teha käsitsi, kuid rakendamine võib olla brauserispetsiifiline, mis tähendab, et peate võib-olla tegema seda mitmel erineval viisil ja jätkama selle värskendamist, kui brauserid muudavad oma tehnikaid.
WordPressi kasutajana on saadaval pistikprogrammid, mis teevad seda ka teie eest vaid paari klõpsuga. Siin on kõik viisid, kuidas saate oma veebisaidi jaoks fonte eellaadida.
Header.php:
- Avage oma WordPressi juhtpaneelilt välimus >>teemaredaktor.
- Klõpsake parempoolses faililoendis failil "header.php".
- Kopeerige ja kleepige see tekst:
<link rel="preload" href="https://fonts.google.com/specimen/Roboto" as="font" type="font/woff2" crossorigin="anonymous">
faili ja vahetage URL-is fondi, mida soovite kasutada.
On ka teisi premium-pluginaid, näiteks WP raketi mis võib teha sama, et te ei peaks oma veebisaidi koodiga jamama.
Sel juhul peate ainult sama lingi fondi kopeerima ja seejärel lisama selle pistikprogrammi armatuurlaual vastavale väljale.
Soovitame pigem investeerida pistikprogrammi, mis seda teie eest teeb, sest WordPressi veebisaidi failides oleva koodi kogemata eemaldamine või muutmine võib selle välimust ja funktsionaalsust tõsiselt kahjustada.
Boonusnäpunäited oma WordPressi veebisaidi põhiveebifunktsioonide optimeerimiseks
Nüüd, kui teate, milliseid toiminguid teha, et optimeerida oma WordPressi veebisaidi põhilisi veebielemente, vaatame mõnda muud head tava.
Optimeerige oma pildivarasid
Oma saidil tonnide kaupa piltide kasutamine on lõbus ja mäng, kuid vähesed mõtlevad oma WordPressi saidi veebipõhiste põhifunktsioonide optimeerimisel piltide kasutamise mõjule.
Niisiis, mis on suur asi?
Noh, 2018. aasta kõnes tuvastas Google ise, et pildid on üks peamisi veebisaitide lehti aeglustavaid tegureid. Google ütleb ka, et piltide optimeerimine on üks kõige suurema potentsiaaliga viise teie veebisaidi toimivuse parandamiseks.
Aasta andmetel HTTPArhiiv, on pildiandmed mobiilsetel lauaarvutite veebisaitidel kasvanud üle 50% ja mobiiliveebisaitidel üle 150%.
Veelgi enam, pildid mõjutavad peaaegu alati otseselt kahte veebipõhist elutähtsust.
- LCP: Tavaliselt on lehe nähtava ala suurim element pilt.
- CLS: Kui pilte ei kasutata õigesti, võivad need avaldada lehe stabiilsusele tohutut mõju, nagu näete "Kuidas parandada oma CLS-i skoori" ülal.
Nagu öeldud, on pildid kaasahaaravate, atraktiivsete ja kaasaegsete veebisaitide loomisel väga vajalik osa, nii et tõenäoliselt ei taha te neist täielikult lahti saada.
Selle asemel peaksite neid kasutama targalt ja optimeerima need võimaluse korral veebipõhiste elutähtsate funktsioonide jaoks. Seda saate teha mitmel viisil.
- Reageerivad pildid: Reageerivad pildid tähendavad, et muudate kujutiste suurust vastavalt vajadusele erinevate ekraanisuuruste jaoks, näiteks lauaarvuti, tahvelarvuti ja mobiili jaoks. Väiksematel ekraanidel kenasti kuvamiseks on vaja palju madalama kvaliteediga pilte ilma visuaalse kvaliteedi kadumiseta, mis vähendab laadimisaegade mõju. Tänapäeval on WordPressis sisseehitatud reageerivad pildid. Siiski peaksite tagama, et teie teemad/pluginad neid toetaksid ega rikuks reageerivat kujundust. Kui soovite oma lehtedel galeriisid, kuid hoiate oma pildid tundlikuna, kasutage populaarseid pistikprogramme, nagu JärgmineGEN, Moduleeribja Envira.
- Laisk laadimine: Laisklaadimine tagab, et lehe kohal olevad pildid laaditakse esimesena ja alumised pildid laaditakse ainult siis, kui nendeni keritakse. See parandab LCP-d ja kasutajakogemust. Tänapäeval on enamikul brauseritel sisseehitatud laisk laadimine ja ka WordPress toetab seda. Jällegi peaksite lihtsalt veenduma, et miski teie WordPressi installis ei segaks seda ega kasutaks JavaScripti laisaks laadimiseks. Saate seda kontrollida ka Lighthouse'i kaudu.
- Esitage pilte järgmise põlvkonna vormingutes: Mõned uuemad vormingud, nagu WebP ja JPEG-200, on piltide kodeerimisel tõhusamad, vähendavad koormust ja muudavad nende laadimise kiiremaks. Saate pilte käsitsi nendesse vormingutesse teisendada, kasutades tarkvara nagu PhotoShop, veebipõhiseid tööriistu või isegi WordPressi pistikprogramme.
- Kasutage pildipluginat või CDN-i: Eespool tutvustasime CDN-e, kuid on ka pildipõhiseid CDN-e. Nendel CDN-idel võib olla sisseehitatud reageerimisvõime, intelligentne piltide tihendamine (mis vähendab suurust, säilitades samal ajal kvaliteeti), aeglane laadimine, vahemällu salvestamine, vormingu teisendamine ja palju muud ning veel üks CDN-i kiht, et pilte kiiremini edastada. ShortPixel, Imgix, Kujutage etteja Pilvine on vaid mõned WordPressi-spetsiifiliste pistikprogrammide valikud.
Nagu näete ülaltoodud ekraanipildilt, on meil laisk laadimine, laius ja kõrgus ning "srcset" kõigi tundlike pildisuurustega:
Keskenduge mobiilile
Veel üks asi, mida peaksite kaaluma, on keskenduda oma veebipõhise põhifunktsiooni optimeerimisele mobiiliveebisaidi külastajatele. Põhjus on lihtne: mobiilse interneti liiklust on ametlikult ületanud töölaua liiklust.
See tähendab, et mobiilse publiku jaoks on olulisem teenindada kui lauaarvutite jaoks. See suundumus jätkub ka lähitulevikus mobiilside kasuks.
Google ise on mobiili olulisust tunnistanud esimene mobiiltelefoni indekseerimine. See tähendab, et Google seab otsingutulemuste jaoks prioriteediks lehed vastavalt veebisaidi mobiiliversioonile.
Õnneks on nii Lighthouse'il kui ka PageSpeed Insightsil võimalus kasutada ka mobiili.
Hea uudis on see, et enamik parandusi parandab tulemust nii lauaarvutites kui ka mobiilseadmetes. Siiski võib juhtuda, et konkreetne teema või pistikprogramm põhjustab probleeme just lauaarvutis või mobiilis.
Sel juhul peate proovima probleemi põhjani jõuda ja lahendama selle tööriistade Lighthouse või PageSpeed Insight abil.
Looge tervislikum ja parem WordPressi veebisait põhiveebi optimeerimise abil
Me läbisime just palju maad ja võite tunda end pisut ülekoormatuna. Peamine on aga sügavalt sisse hingata ja need WordPressi põhiveebi optimeerimised samm-sammult läbi töötada.
Kui olete asja selgeks saanud, muutub see lihtsalt teie veebisaidi hooldusrutiini üheks osaks.
Alustuseks testige oma veebisaidi seisundit PageSpeed Insightsi või Lighthouse'i kaudu. Tehke mõned täiustused ja testige uuesti, et näha, kas sellel oli mõju. Loputage ja korrake.
Pidage meeles, miks te seda teete: loote oma veebisaidi edu saavutamiseks, muutes külastajad õnnelikumaks ja asetades otsingumootorites kõrgemale.
See loob lumepalliefekti, mis mitte ainult ei meelita rohkem külastajaid, vaid hoiab ka neid.
Õnneks kasutades WordPressi koos fantastiliste pistikprogrammidega, nagu WP raketi, Kujutage ette, Elementorjne, teete oma elu palju lihtsamaks.
Kas olete proovinud optimeerida oma WordPressi veebisaidi põhilisi veebielemente? Kas teil õnnestus oma skoori tõsta või veebisaidi üldist toimivust parandada?
Milliseid aspekte oli teil raskem/lihtsam teha? Andke meile allolevates kommentaarides teada.
Muud juhendiga seotud artiklid:
- juurdepääs
- konto
- tegevus
- Ad
- kuulutused
- PIIRKOND
- ümber
- artikkel
- kaubad
- audit
- kättesaadavus
- BEST
- parimaid tavasid
- suurim
- Natuke
- Blogi
- Kast
- brauseri
- äri
- helistama
- juhtudel
- Põhjus
- põhjustatud
- muutma
- Kroom
- suletud
- kood
- kommentaarid
- ühine
- arvutustehnika
- arvab
- sisu
- sisu
- jätkama
- Konverteerimine
- Paar
- loomine
- Praegune
- armatuurlaud
- andmed
- dc
- tegelema
- viivitus
- edastamine
- tarne
- Disain
- arendaja
- & Tarkvaraarendus
- DID
- kaugus
- Domeenid
- Varajane
- serv
- toimetaja
- jms
- sündmused
- täidesaatev
- Kogemused
- silm
- ebaedu
- KIIRE
- Objekte
- FUNKTSIOONID
- esimene
- Esimest korda
- välklamp
- Keskenduma
- formaat
- tasuta
- täis
- lõbu
- tulevik
- Mängud
- GitHub
- Globaalne
- hea
- Google Search
- suur
- Green
- Kasvavad
- suunata
- Tervis
- siin
- Suur
- Esile tõstma
- Esiletõstetud
- Hosting
- Kuidas
- Kuidas
- HTTPS
- idee
- pilt
- mõju
- info
- algatus
- teadmisi
- tahtlus
- interaktiivne
- Internet
- investeerimine
- küsimustes
- IT
- JavaScript
- hüppama
- pidamine
- Võti
- suur
- viima
- juhtivate
- Finantsvõimendus
- LINK
- nimekiri
- koormus
- Pikk
- peamine
- Tegemine
- matemaatika
- mõõtma
- Meetrika
- mobiilne
- liikuma
- võrk
- uudised
- pakkuma
- Internetis
- Online Business
- avatud
- Operations
- Võimalus
- valik
- Valikud
- et
- orgaaniline liiklus
- Muu
- teised
- omanik
- omanikud
- maalima
- jõudlus
- photoshop
- plugin
- pluginad
- populaarne
- preemia
- ennetada
- Eelvaade
- kvaliteet
- tõstma
- RAM
- Lugemine
- põhjustel
- vähendama
- aru
- Aruanded
- ressurss
- Vahendid
- vastus
- Tulemused
- jooksmine
- säästmine
- Ekraan
- Otsing
- otsingumootor
- Otsingumootorid
- turvalisus
- Teenused
- teenindavad
- komplekt
- kehtestamine
- jagatud
- suunata
- lihtne
- SUURUS
- So
- tarkvara
- Lahendused
- LAHENDAGE
- Ruum
- kiirus
- Kaubandus-
- Stabiilsus
- algus
- edu
- toetama
- Toetab
- süsteem
- Tablett
- Puuduta
- ütleb
- test
- Testimine
- Tulevik
- teema
- aeg
- nõuanded
- ülemine
- liiklus
- reisima
- paljastama
- us
- Kasutajad
- väärtus
- Video
- Videod
- vaade
- Watch
- web
- veebisait
- veebilehed
- lühiülevaade
- jooksul
- WordPress
- Töö
- maailm
- väärt
- XML
- youtube