Veebisaidi kiiruse optimeerimine: kuidas seda teha aastal 2020 # samm-sammult

Veebisaidi kiiruse optimeerimine: kuidas seda teha aastal 2020 # samm-sammult

Veebisaidi kiiruse optimeerimine: kuidas seda teha aastal 2020 # samm-sammult
СОДЕРЖАНИЕ
02 июня 2020

Umbes kümmekond aastat tagasi teatas Google, et selle saidi kiirus mõjutab veebiotsingu paremusjärjestust. Ehkki postitus ei selgitanud kiiruse mõju paremusjärjestusele, mõistsid kuulutust lugenud veebimeistrid, et veebisaidi kiiruse optimeerimine peaks olema nende arengukavade tipus.


Lisaks SEO eelised kiiruse optimeerimisel, lehe laadimisajad on olulised selle määramisel, kui palju kasutajaid teie veebisaidile jääb. HubSpot teatas sellest konversiooni langus on seotud lehe laadimisaegade pikenemisega – laadimisaja ühe sekundiline viivitus võib põhjustada ümberarvestuse vähenemise ~ 20-30%!

Veebisaidi kiiruse optimeerimise juhend

Viimase paari aasta jooksul on lehe keskmine suurus kasvanud. Tegelikult 2018. aastal, keskmiselt oli lehe maht üle 2 MB! Märkimisväärse osa selle lehe laadimisest moodustavad pildid, staatilised failid ja videod.

Lihtsalt öeldes on teie veebisaidi suurusel ja kogu saidi kiirusel oluline tähtsus! Isegi pidevalt kasvava lehekoormuse korral on asju, mida saate oma saidi asjade käitlemise parandamiseks ära teha. Selles postituses käsitletakse seda kõike.

Veebisaidi kiiruse optimeerimine: mida peate enne alustamist

Selles postituses eeldatakse, et teil on juba kaks peamist asja hoolitsetud:

  • Kasutate optimeeritud teemat, mis ei tekita WordPressi enda peal palju paisumist.
  • Olete piisavalt kiire hostis.

Kui märgite need kaks ruutu, võite liikuda järgmistesse jaotistesse, et uurida täielikku loetelu ülesannetest, mida saate endale võtta, et veenduda oma veebisaidi laadimisaegade minimaalsuses.

Veebisaidi kiiruse optimeerimisega alustamine

Veebilehe anatoomia

anatoomia

Veebilehtede kiiruse optimeerimise trikk on mõista, mis veebilehele läheb. Vaatame kõige populaarsemaid komponente:

  • HTML-kood, mis annab veebilehele struktuuri ja sisu – isegi kui WordPress juhib teie saidil asuvat osapoolt – võtab vaid andmebaasis oleva sisu – kogu sisu – ja teisendab selle staatiliseks HTML-väljundiks
  • Staatilised failid, mis aitavad disaini, funktsionaalsust ja interaktiivsust (CSS, JavaScript)
  • Taustapildid, logod ja sisu

Lehe renderdamiseks taotleb brauser veebilehe iga elemendi – lehe enda – HTML-i, staatiliste failide, piltide ja välise sisu kujul. Seetõttu arv HTTP päringud mängib olulist rolli ka veebisaidi kiiruse optimeerimisel.

Uurige oma seisukorda: veebisaidi kiiruse optimeerimise tööriistad

Enne kui asume kasutama konkreetseid tehnikaid, mis aitavad teil oma veebisaiti optimeerida, laske meil korraks üle vaadata tööriistad, mis aitavad veebilehtede kiirust analüüsida.

Kui olete algaja, kes otsib juhusliku testimise tööriista, võite kaaluda selle kasutamist Pingdomi tööriistad sviit oma veebisaidi kiireks hindamiseks. Täielikuma lahenduse saamiseks võite minna üle Google’i lehekiiruse statistika.

Pingdomi kiiruskatsePingdomi tööriistad kiiruskatseteks

Lisaks neile, kui otsite kiiret varianti brauseri pistikprogrammi kujul, võite proovida YSlow, mis testib veebisaite ja pakub brauserist soovitusi. Lisaks GTmetrix tööriist kasutab aruannete jaoks YSlowi testitulemusi.

�� Kui soovite oma saidi kiiruse testimiseks rohkem võimalusi, loetletakse see postitus 5 parimat kiiruskontrolli tööriista.

Enne selles postituses loetletud tehnikate läbimist veenduge, et kasutate oma veebisaiti mõnel siin loetletud tööriistal, et saaks seda kasutada võrdlusalusena. Niipea, kui olete veebisaidi kiiruse optimeerimise teinud, pöörduge kindlasti uuesti tööriista juurde ja kontrollige, kas kiirusel on parandusi.

1. samm: optimeerige staatilisi faile

Selle juhendi esimene samm keskendub staatiliste failide optimeerimisele – kõige populaarsemalt stiililehtede (CSS-failid) ja skriptide (JS-failid) kujul.

(a) Liigutage CSS peaga, JS allapoole

Esimene optimeerimine on veenduda, et stiililehed läheksid teie lehe struktuuri jaotisesse, samal ajal kui kõik skriptid viiakse otse teie lehe sulgemissildi kohale. Selle loogika on lihtne:

  • Üldiselt on stiililehed väiksema suurusega kui skriptid
  • Kui stiililehed on sildisse laaditud enne, kui brauser lehe põhiosa renderdab, on kõigil lehel renderdatud elementidel sobiv stiil
  • Skriptide funktsionaalsus tuleb üldjuhul mängu siis, kui lehe sisu on laaditud, nii et skriptid saab üldiselt panna alumisse ossa

See tava tagab, et teie veebisaidi külastajad ei jäta lehte laadides pettumust.

Skriptide osa kiireks haldamiseks saate installida WordPressi pistikprogrammi Scripts to Footer. See töötab autopiloodil ja teeb seda tööd hästi.


Skriptid jaluse juurde Skriptid jaluse juurde

Autor (id): Joshua David Nelson

Praegune versioon: 0.6.4.1

Viimati värskendatud: 15. aprillil 2020

skriptid-to-footerphp.0.6.4.1.zip


94% hinnangud


20 000 rohkem kui installimisi


3.1.0 Nõuab

(b) Minimeerimise seadistamine

Minimeerimine on faili nende osade eemaldamine, mis pole selle täitmiseks vajalikud. Näiteks pole teie stiililehtedel või skriptides täitmiseks vajalikud järgmised toimingud:

  • taande tühikud
  • kommentaarid
  • pikkade funktsioonide ja muutujate nimed
  • kasutamata kood

Minimeerimine aitab oluliselt kaasa staatiliste failide mahu vähendamisele. Oma faile saab minimeerida, kasutades sellist teenust nagu Minimeeri, või ühe neist installimine minimeerimise pluginad WordPressis.

c) Kasutage asünkroonset laadimist

Veebibrauser renderdab ja taotleb ressursse järjestikku, nagu need veebilehel kuvatakse. Seda nimetatakse sünkroonseks laadimiseks. Brauseri vaikimisi funktsioone saate siiski muuta, kasutades asünkri atribuut laadida ressursse kohe, kui need on saadaval. Näiteks saate skripti laadida asünkroonselt järgmiselt:

Siin on pluginate loend, mis aitavad teil WordPressis asünkroonset laadimist.

(d) Kasutage GZIP-pakkimist

GZip-pakkimine on meetod ressursside tihendamiseks HTTP-päringute kaudu. GZip-pakkimisega saadab server ressursside tõmblukustatud failid, mille brauser veebilehe renderdamise ajal lahti pakkib.

Ressursi tihendamiseks ja lahtipakkimiseks vajalik aeg ja ressursid kaaluvad üles väiksema faili serverist kliendile ülekandmisel salvestatud aja ja ribalaiusega. See tehnika mitte ainult ei laadi lehti kiiremini, vaid säästab ka serverikulusid.

GZip-pakkimine on osa vähestest WordPressi vahemälupistikprogrammidest, näiteks WP kiireim vahemälu.

(e) Kasutage populaarsete raamatukogude jaoks Google CDN-i

Selles etapis on viimane optimeerimise tehnika: kasutada teie saidil kasutatavate tavaliste teekide allalaadimisel kas Google’i või Microsofti CDN-i. Põhjus on lihtne – nende CDN-de populaarsuse tõttu on tõenäoline, et külastajal on ressursis oma brauseris juba vahemällu salvestatud versioon.

2. samm: optimeerige pilte

Nagu eespool arutatud, on veebilehtede suuruse suurenemise peamiseks allikaks aastate jooksul kujutised.

Isegi kui heita pilk CodeinWP enda numbritele:

pildi laadimine

Seetõttu, piltidega tegelemine peaks teie veebisaidi kiirust märkimisväärselt parandama, ja see saab hakkama.

Pildid on veebisaidi jaoks hädavajalikud, kuid täiskvaliteediliste piltide kasutamist veebis ei soovitata. Pilte tuleks tihendada määral, mis vähendab drastiliselt, andes samal ajal õiglase visuaalse kvaliteedi.

Selle saavutamiseks võite teha paar toimingut ja pidage silmas veebisaidi kiiruse optimeerimist:

a) Laadige üles paraja suurusega pildid

Teie praegusel teemal on tõenäoliselt mõõtmete järgi maksimaalne pildi suurus, mida see suudab kuvada. Uurige välja, mis see on, ja laadige siis üles ainult need pildid, mis on maksimaalselt kaks korda suuremad.

Miks kaks korda? See võimaldab ka teemal kuvada piltide võrkkesta kvaliteediga versioone.

(b) Kasutage õiget tüüpi pilti

Kaks kõige sagedamini kasutatavat tüüpi pilti veebis on JPG ja PNG.

Nad pole sarnased.

  • JPG-pildid on mõeldud fotode ja muude keerukate piltide jaoks, milles on palju värviteavet
  • PNG-pildid sobivad suurepäraselt graafika jaoks, millel on vähe värviteavet, näiteks liidese ekraanipildid.

Näide PNG-pildistteemad

c) Enne üleslaadimist optimeerige kohalikud pildid

Enne piltide üleslaadimist oma saidile saate kasutada erinevaid tööriistu.

tinypng
imageoptim

(d) Laadige oma pildid laisalt

Teine piltide optimeerimise tehnika on laisk laadimine – tava, kus pilti ei laadita enne, kui külastaja selle vaatamiseks alla kerib..

lazyloadi demoLaisk laadimismonstratsioon CodeinWP-s

Siin on täielik juhend piltide laiska laadimise kohta saidile.

(e) Hankige pildi optimeerimise pistikprogramm

Viimaseks peaksite oma WordPressi saidi jaoks saama kvaliteetse pildi optimeerimise pistikprogrammi. Sõltuvalt sellest, kumba kasutate, võite suurema osa oma pildi optimeerimise vajadustest teha autopiloodil.

Siin on Võrreldakse 6 parimat pildi optimeerimise pistikprogrammi.

Kui vajate kiiret soovitust, tutvuge meie omadega Optimole. See pakub lisaks CDN-le vabas plaanis ka väga tõhusat piltide tihendamist! Optimole annab oma peamistele konkurentidele vastu ka mõned tähetulemused:

PNG optimeerimise tulemused

PluginOriginal PNG SizeAfter OptimizationOptimization% Compression
Optimole301 KB34 KB88,7%Kadunud ja kadudeta
Kujutage ette301 KB67 KB77,7%Kaotatud
TinyPNG301 KB79,7 KB73,5%Kaotatud
ShortPixel301 KB90,4 KB69,96%Kaotatud
Smush301 KB247 KB17,9%Kadudeta
EWWW301 KB257,4 KB14,6%Kadudeta

JPG optimeerimise tulemused

PluginOriginal JPG SizeAfter OptimizationOptimization% Compression
ShortPixel518 KB169 KB67,36%Kaotatud
TinyPNG518 KB248,6 KB52%Kaotatud
Optimole518 KB274 KB47%Kadunud ja kadudeta
Kujutage ette518 KB338,7 KB34,64%Kaotatud
EWWW518 KB488,9 KB5,7%Kadudeta
Smush518 KB493 KB4,9%Kadudeta


Kujutise optimeerimine ja laisklaadimine Optimole poolt Kujutise optimeerimine & Lazy Load by Optimole

Autor (id): Optimole

Praegune versioon: 2.3.1

Viimati värskendatud: 21. aprillil 2020

optimole-wp.zip


96% hinnangud


50 000 + installida


WP 4.7 + Nõuab

3. samm: optimeerige HTTP-taotlusi

Varem postituses arutasime, et kui kasutaja brauser hakkab veebilehte laadima, tehakse tegelikud ülekanded üksikute HTTP-taotluste kaudu. Iga ressurss tuuakse ühe taotlusega. Seega pikendab selliste taotluste arvu suurenemine teie veebilehe laadimisaegu.

saidi taotlusedVeebilehe HTTP-päringud

a) Failide kombineerimine

Esimene ülesanne HTTP taotluste koormuse minimeerimiseks on sarnaste ressursside ühendamine. Ressursside minimeerimisel saate sarnaseid faile omavahel kombineerida. Näiteks saab kõik stiililehed (CSS-failid) ja kõik kohandatud JavaScripti failid ühendada üksikuteks failideks. See vähendab taotluste arvu, mida klient peab kõigi ressursside laadimiseks tegema.

Jälle need WordPressi minimeerimise pistikprogrammid aitab teil seda teha.

(b) Minimeeri DNS-i otsingud

Kui HTTP-päring tehakse domeenile nagu www.codeinwp.com, tehakse serveri IP-aadressi leidmiseks DNS (domeeninimesüsteemi) otsing. Järelikult peaks teie eesmärk olema ka minimeerida DNS-i otsingute arvu kõigis taotlustes, et kiirendada veebisaidi laadimist.

Siin on a lahe giid Kinsta poolt kuidas seda teha.

(c) Luba elushoidmine

Ilma optimeerimiseta saadab brauser iga ressursi kohta ühe HTTP-päringu. See ühendus suletakse, kui allalaadimine on lõpule viidud. Seejärel esitab brauser serverile uue ressursi taotluse. Elavana hoidmine on tehnika, mis ei lõpeta päringut, kui ressursi allalaadimine on lõpule viidud.

Elusoleku lubamise saate lubada järgmistel viisidel:

(d) Minimeeri ümbersuunamised

Ümbersuunamine on käsk viia klient automaatselt ressursi ühest asukohast teise. Iga ümbersuunamine pikendab teie veebilehe laadimisaegu ja kui see pole tingimata vajalik, peaksite vältima oma koodis ümbersuunamisi.

e) Kasutage CDN-i

CDN (sisu edastamise võrk) on laiades geograafilistes kohtades asuvate veebiserverite kogum, mis edastab klientidele sisu kiiresti ja tõhusalt.

Ressurssi taotlev klient saab ressursi serverist, mis on geograafiliselt kliendi asukohale kõige lähemal. See tagab, et taotletud sisu jõuab kliendini võimalikult lühikese aja jooksul!

Meil on eraldi ressurss, kus võrreldakse WordPressi saitide populaarseimaid CDN-lahendusi ja teavet selle kohta, kuidas vahtima hakata.

4. samm: vahemällu salvestamine

Ilma vahemällu jaotiseta ei saa eksisteerida ühtegi veebisaidi kiiruse optimeerimise juhendit. Mõned tehnikad, mida me varem arutasime, näiteks GZip-pakkimine ja minificaiton, on tänapäeval osa paljudest vahemälulahendustest..

Puhverdamine tähendab nähtust, kus ressursse hoitakse ajutises mälus, et seda vajadusel kiiresti hankida. Vahemällu salvestamise vorme on erinevaid:

  • Lehe vahemällu salvestamine: serverisse salvestatud lehe staatiline HTML-i versioon
  • Andmebaaside vahemällu salvestamine: serverisse salvestatud levinumate andmebaasipäringute (näiteks teie saidi 10 parima postituse) tulemused
  • Brauseri vahemällu salvestamine: oma lehe osade talletamine brauseris

Oleme selles postituses võrrelnud kõige populaarsemaid WordPressi vahemällu pistikprogramme. TL; DR: mine vaata WP rakett kui otsite terviklahendust. Kui eelistate midagi tasuta, siis siin on ka järgmine juhend kuidas seadistada W3 kogu vahemälu.

5. samm: optimeerige mobiiltelefonidele

Selle artikli varasemates osades arutasime optimeerimise tehnikaid, mis on olulised nii laua- kui ka mobiilseadmete jaoks. Kuid mobiilisisu tarbimine suureneb ja väiksema ekraaniga kaasnevad uued väljakutsed. Selles jaotises käsitletakse seega mobiilseadmete veebisaidi kiiruse optimeerimise meetodeid.

Mobiili optimeerimine tähendab tava tagada, et teie veebilehe mobiilikülastajad kogevad sama funktsionaalsust ja tõhusust kui nende töölauakaaslased. Järgmine loend sisaldab teatud hügieenifaktoreid mobiilseadmete veebisisu kureerimiseks:

  • Kasutage reageerivat veebidisaini, et erinevad seadmed saaksid veebilehe erinevad versioonid
  • Vältige välklambi ja hüpikute kasutamist, kuna mobiilseadmed ei pruugi seda toetada
  • Ärge positsioneerige selliseid suhteid nagu lingid üksteisele liiga lähedale

Lisaks neile teguritele on AMP (Accelerated Mobile Pages) projekt, mille eesmärk on luua kiire ja järjepidev sisu kõigis seadmetes.

Siin on juhend WordPressis AMP-ga alustamise kohta.


AMP

Autor (id): AMP projekti kaastöötajad


74% hinnangud


500 000 + installimist


WP 4.9 + Nõuab

Rohkem infot

amp.1.5.3.zip

Praegune versioon: 1.5.3

Viimati värskendatud: 15. aprillil 2020


74% hinnangud


500 000 + installimist


WP 4.9 + Nõuab

WordPress.org pistikprogrammi leht


AMP

Järeldus

Loodetavasti on see juhend andnud teile näpunäiteid selle kohta, mida peaksite tegema oma saidi üldise veebisaidi kiiruse optimeerimise taseme parandamiseks.

Lihtsalt kokkuvõtteks; vaatasime kõigepealt veebilehe anatoomiat, et käsitleda konkreetseid valdkondi, mida tuleks parandada. Seejärel liikusime edasi optimeerimise konkreetsete sammudeni:

  • 1. samm hõlmas staatiliste failide optimeerimist stiililehtede ja skriptide kujul
  • 2. samm tegeles piltide ja nende optimeerimisega
  • Kolmas samm oli seotud HTTP-taotluste optimeerimise tehnikatega
  • 4. samm arutas mõnda populaarset vahemälutehnikat
  • 5. samm hõlmas mobiilseadmete optimeerimist

Kas veebisaidi kiiruse optimeerimisel on teil midagi vaeva? Andke meile allpool toodud kommentaarides teada.

Ärge unustage liituda meie WordPressi saidi kiirendamise kursusega. Mõne lihtsa parandusega saate laadimisaega vähendada isegi 50–80%:

Kujundus, esitlus ja toimetamine Karol K poolt.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Это интересно
    Adblock
    detector