Svetainės greičio optimizavimas: kaip tai padaryti 2020 m. # Žingsnis po žingsnio

Svetainės greičio optimizavimas: kaip tai padaryti 2020 m. # Žingsnis po žingsnio

Svetainės greičio optimizavimas: kaip tai padaryti 2020 m. # Žingsnis po žingsnio
СОДЕРЖАНИЕ
02 июня 2020

Maždaug prieš dešimtmetį „Google“ paskelbė, kad tas svetainės greitis paveiks interneto paieškos reitingą. Nors įrašas nepaaiškino greičio įtakos reitingams, skelbimą skaitantys svetainių valdytojai suprato, kad interneto svetainių greičio optimizavimas turėtų būti jų plėtros planų viršuje.


Be to SEO pranašumai dėl greičio optimizavimo, puslapio įkėlimo laikas yra svarbus nustatant, kiek vartotojų lieka jūsų svetainėje. „HubSpot“ praneša, kad konversijos sumažėjimas susijęs su pailgėjusiu puslapio įkėlimo laiku – Dėl vienos sekundės vėlavimo įkelti laiką konversija gali sumažėti ~ 20–30%!

Svetainės greičio optimizavimo vadovas

Per pastaruosius keletą metų padidėjo vidutinis puslapio dydis. Tiesą sakant, 2018 m, vidutiniškai puslapio dydis buvo didesnis nei 2 MB! Didelę šio puslapio dalį sudaro vaizdai, statiniai failai ir vaizdo įrašai.

Švelniai tariant, jūsų svetainės dydis ir bendras jūsų greitis yra labai svarbūs! Net ir nuolat didėjant puslapių apkrovai, galite padaryti dalykų, kuriuos galite patobulinti, kaip jūsų svetainė tvarkoma. Šiame įraše visa tai aptariama.

Svetainės greičio optimizavimas: ko jums reikia prieš mums pradedant

Šiame įraše daroma prielaida, kad jau turite du pagrindinius dalykus, kuriais pasirūpinote:

  • Jūs naudojate optimizuotą temą, kuri pati „WordPress“ viršuje nesukelia daug pūtimo.
  • Jūs esate pakankamai greitas kompiuteris.

Jei pažymėsite šiuos du langelius, galite pereiti prie šių skyrių ir išnagrinėti išsamų užduočių, kurias galite atlikti, sąrašą, kad įsitikintumėte, jog jūsų svetainės įkėlimo laikas yra minimalus.

Darbo su interneto svetainės greičio optimizavimu pradžia

Tinklalapio anatomija

anatomija

Patarimas, kaip optimizuoti savo tinklalapius pagal greitį, yra suprasti, kas patenka į tinklalapį. Pažvelkime į populiariausius komponentus:

  • HTML kodas, suteikiantis tinklalapio struktūrą ir turinį – net kai „WordPress“ vykdo vakarėlį jūsų svetainėje, tereikia paimti tai, kas yra duomenų bazėje – visą turinį – ir paversti jį statiniu HTML išėjimu
  • Statiniai failai, kurių dizainas, funkcionalumas ir interaktyvumas yra naudingi (CSS, „JavaScript“)
  • Fono paveikslėliai, logotipai ir turinys

Norėdami atvaizduoti puslapį, naršyklė prašo kiekvieno tinklalapio elemento – paties puslapio HTML, statinių failų, paveikslėlių, išorinio turinio forma. Todėl skaičius HTTP užklausos taip pat vaidina lemiamą vaidmenį optimizuojant svetainės greitį.

Sužinokite, kur stovite: svetainės greičio optimizavimo įrankiai

Prieš pereidami prie konkrečių metodų, kurie padės jums optimizuoti jūsų svetainę, leiskite mums šiek tiek laiko apžvelgti įrankius, kurie padeda analizuoti tinklalapių greitį..

Jei esate pradedantysis, ieškantis atsitiktinio testavimo įrankio, galite apsvarstyti jo naudojimą „Pingdom“ įrankiai komplektas, skirtas greitai įvertinti jūsų svetainę. Norėdami rasti išsamesnį sprendimą, galite kreiptis į „Google“ puslapio greičio įžvalgos.

„Pingdom“ greičio testas„Pingdom“ įrankiai greičio testavimui

Be tų, jei ieškote greito varianto naršyklės papildinio pavidalu, galite išbandyti YSlow, kuris išbando svetaines ir teikia pasiūlymus iš naršyklės. Toliau „GTmetrix“ įrankis ataskaitoms naudoja „YSlow“ bandymų rezultatus.

�� Jei norite daugiau galimybių patikrinti savo svetainės greitį, šiame pranešime pateikiami sąrašai 5 geriausi greičio tikrinimo įrankiai.

Prieš naudodamiesi šiame įraše išvardytais būdais, įsitikinkite, kad naudojate savo svetainę naudodamiesi vienu iš čia išvardytų įrankių, kad galėtumėte naudoti kaip etaloną. Kai tik optimizuosite svetainės greitį, būtinai grįžkite į įrankį ir patikrinkite, ar nėra greičio patobulinimų.

1 veiksmas: optimizuokite statinius failus

Pirmame šio vadovo etape dėmesys skiriamas statinių failų optimizavimui – populiariausia forma yra stiliaus lentelės (CSS failai) ir scenarijai (JS failai)..

a) Perkelkite CSS į galvą, JS – į apačią

Pirmasis optimizavimas – įsitikinkite, kad stiliaus lentelės patenka į jūsų puslapio struktūros skyrių, o visi scenarijai yra perkelti tiesiai virš jūsų puslapio uždarymo žymos. Logika yra paprasta:

  • Paprastai stiliaus lentelių dydis yra mažesnis nei scenarijų
  • Kai stiliaus lentelės įkeliamos į žymą prieš naršyklę pateikiant puslapio pagrindą, visi elementai, kurie pateikiami puslapyje, bus tinkamai išdėstyti
  • Scenarijų funkcionalumas paprastai pradedamas naudoti įkeliant puslapio turinį, taigi scenarijus paprastai gali būti dedamas apačioje.

Ši praktika užtikrina, kad jūsų svetainės lankytojai nepalieka nusivylę puslapiu laukdami, kol jis bus įkeltas.

Norėdami greitai tvarkyti scenarijų dalį, galite įdiegti „WordPress“ papildinį „Scripts to Footer“. Jis veikia autopilotu ir gerai atlieka darbą.


Skriptai į poraštę Skriptai į poraštę

Autorius (-ai): Joshua Davidas Nelsonas

Dabartinė versija: 0.6.4.1

Paskutinį kartą atnaujinta: 2020 m. Balandžio 15 d

scripts-to-footerphp.0.6.4.1.zip


94% reitingai


Daugiau nei 20 000 įdiegimų


3.1.0Reikalauja

b) nustatykite minifikaciją

Minifikavimas yra tas failo dalių pašalinimas, kurios nėra būtinos jo vykdymui. Pvz., Jūsų stiliaus lapuose ar scenarijuose vykdymas nėra būtinas:

  • tarpai įtraukai
  • komentarai
  • ilgosios funkcijos ir kintamųjų pavadinimai
  • nenaudojamas kodas

Mažinimas padeda labai sumažinti statinių failų dydį. Savo failus galite sutrumpinti naudodami tokią paslaugą kaip Mažinkite, arba įdiegti vieną iš šių mažinimo įskiepiai „WordPress“.

c) naudokite asinchroninį krovimą

Žiniatinklio naršyklė pateikia nuorodas ir užklausas iš eilės, kai tik jie rodomi tinklalapyje. Tai vadinama sinchroniniu krovimu. Tačiau šią numatytąją naršyklės funkciją galite pakeisti naudodami async atributas įkelti išteklius, kai tik jie bus prieinami. Pavyzdžiui, scenarijų galite įkelti asinchroniškai taip:

Čia yra papildinių, padedančių asinchroniškai įkelti „WordPress“, sąrašą.

(d) naudokite GZIP glaudinimą

„GZip“ glaudinimas yra būdas suspausti išteklius per HTTP užklausas. Su „GZip“ glaudinimu, serveris siunčia suglaudintus išteklių failus, kuriuos naršyklė išpakuoja teikdama tinklalapį.

Laikas ir ištekliai, reikalingi išteklių suspaudimui ir išskleidimui, yra nusveriami laiko ir pralaidumo, sutaupyto perduodant mažesnį failą iš serverio į klientą. Ši technika ne tik greičiau įkelia puslapius, bet ir sutaupo serverio išlaidas.

„GZip“ glaudinimas yra kelių „WordPress“ talpyklos papildinių, tokių kaip „WP Fastest Cache“, dalis.

e) Naudokite „Google CDN“ populiarioms bibliotekoms

Galutinis optimizavimo būdas šiame etape yra gauti „Google“ arba „Microsoft“ CDN, kai gaunamos visos įprastos jūsų svetainėje naudojamos bibliotekos. Priežastis yra paprasta – dėl šių CDN populiarumo tikėtina, kad lankytojas savo naršyklėje jau turi talpykloje esančią išteklių versiją..

2 veiksmas: optimizuokite vaizdus

Kaip aptarta aukščiau, pagrindinis šaltinis, per kurį metams bėgant didėja interneto puslapių dydis, yra vaizdai.

Net pažvelkite į savo „CodeinWP“ numerius:

vaizdo apkrova

Todėl, susidūrus su vaizdais, turėtų būti padarytas reikšmingiausias jūsų svetainės greičio pagerėjimas, ir daro.

Vaizdai yra būtini internetinei svetainei, tačiau naudoti aukštos kokybės vaizdus žiniatinklyje tikrai nerekomenduojama. Turėtumėte suspausti vaizdus tiek, kad drastiškai sumažintumėte dydį, tuo pačiu suteikdami teisingą vaizdo kokybę.

Jei norite, kad tai įvyktų, turite atlikti keletą dalykų: turėkite omenyje svetainės greičio optimizavimą:

a) Įkelkite tinkamo dydžio vaizdus

Jūsų dabartinei temai greičiausiai yra maksimalus vaizdo dydis, kurį ji gali parodyti – atsižvelgiant į matmenis. Sužinokite, kas tai yra, tada įkelkite tik tuos vaizdus, ​​kurie yra ne daugiau kaip dvigubai didesni.

Kodėl du kartus? Tai taip pat leis temai parodyti tinklainės kokybės vaizdų versijas.

b) Naudokite tinkamo tipo vaizdą

Du dažniausiai internete naudojami vaizdų tipai yra JPG ir PNG.

Jie nėra panašūs.

  • JPG vaizdai yra skirti nuotraukoms ir kitiems sudėtingiems vaizdams, kuriuose yra daug spalvų informacijos
  • PNG vaizdai puikiai tinka grafikai, turintys mažai informacijos apie spalvas, pavyzdžiui, sąsajos ekrano kopijoms.

PNG vaizdo pavyzdystemos

c) optimizuokite vaizdus vietoje prieš įkeldami

Yra įvairių įrankių, kuriuos galite naudoti prieš įkeldami bet kokius vaizdus į savo svetainę.

tinypng
imageoptim

(d) tingiai įkelkite savo vaizdus

Kita atvaizdų optimizavimo technika yra tingus įkėlimas – praktika, kai vaizdas nėra atsisiųstas tol, kol lankytojas neslinka žemyn norėdamas jį pamatyti..

„lazyload“ demonstracinė versijaJuokinga pakrovimo demonstracija „CodeinWP“

Čia yra visas vadovas, kaip tingiai įkelti vaizdus į savo svetainę.

e) Gaukite vaizdo optimizavimo papildinį

Paskutinis, bet ne mažiau svarbus dalykas – turėtumėte gauti kokybišką vaizdų optimizavimo papildinį savo „WordPress“ svetainei. Priklausomai nuo to, kurį galutinai naudosite, didžiąją dalį vaizdų optimizavimo poreikių galite atlikti atlikdami autopilotą.

Čia yra Palyginti 6 geriausi vaizdo optimizavimo papildiniai.

Jei jums reikia greitos rekomendacijos, peržiūrėkite mūsų Optimole. Tai suteikia labai efektyvų vaizdų glaudinimą, be to, nemokamai kompaktiniame diske! „Optimole“ taip pat suteikia puikių rezultatų, palyginti su pagrindiniais konkurentais:

PNG optimizavimo rezultatai

PluginOriginal PNG SizeAfter OptimizationOptimization% Compression
Optimole301 KB34 KB88,7 proc.Lossy and Lossless
Įsivaizduok301 KB67 KB77,7 proc.Praradęs
„TinyPNG“301 KB79,7 KB73,5 proc.Praradęs
„ShortPixel“301 KB90,4 KB69,96 proc.Praradęs
Smushas301 KB247 KB17,9 proc.Neprarasti
EWWW301 KB257,4 KB14,6 proc.Neprarasti

JPG optimizavimo rezultatai

PluginOriginal JPG SizeAfter OptimizationOptimization% Compression
„ShortPixel“518 KB169 KB67,36 proc.Praradęs
„TinyPNG“518 KB248,6 KB52 proc.Praradęs
Optimole518 KB274 KB47 proc.Lossy and Lossless
Įsivaizduok518 KB338,7 KB34,64 proc.Praradęs
EWWW518 KB488,9 KB5,7 proc.Neprarasti
Smushas518 KB493 KB4,9 proc.Neprarasti


Vaizdo optimizavimas ir tingus įkėlimas „Optimole“ Vaizdo optimizavimas & Lazy Load by Optimole

Autorius (-ai): Optimole

Dabartinė versija: 2.3.1

Paskutinį kartą atnaujinta: 2020 m. Balandžio 21 d

optimole-wp.zip


96% reitingai


50 000 ir daugiau įdiegimų


WP 4.7 + reikalinga

3 veiksmas: optimizuokite HTTP užklausas

Anksčiau įraše aptarėme, kad vartotojui pradėjus krauti tinklalapį, faktinis perkėlimas atliekamas naudojant atskiras HTTP užklausas. Atskira užklausa atneša kiekvieną šaltinį. Taigi padidėjus tokių užklausų skaičiui padidėja jūsų tinklalapio įkėlimo laikas.

svetainės užklausosTinklalapio HTTP užklausos

a) Sujungti failus

Pirmoji užduotis sumažinti HTTP užklausų apkrovą yra sujungti panašius išteklius. Kai mažinate išteklius, galite sujungti panašius failus kartu. Pavyzdžiui, visus stilių lapus (CSS failus) ir visus pasirinktinius „JavaScript“ failus galima sujungti į vienus failus. Tai sumažina užklausų, kurias klientas turi pateikti, kad įkeltų visus išteklius, skaičių.

Vėlgi šie minifikavimo papildiniai, skirti „WordPress“ gali padėti jums tai padaryti.

b) Sumažinkite DNS paieškas

Kai domenui, tokiam kaip www.codeinwp.com, teikiama HTTP užklausa, DNS (domenų vardų sistema) peržiūra atliekama siekiant nustatyti serverio IP adresą. Taigi, jūsų tikslas taip pat turėtų būti kuo mažesnis DNS paieškų skaičius visose užklausose, kad būtų galima greičiau įkelti svetainę.

Štai šaunus „Kinsta“ vadovas kaip tai padaryti.

c) Įgalinti gyvybę

Neatliekant optimizavimo, naršyklė kiekvienam šaltiniui siunčia vieną HTTP užklausą. Šis ryšys uždaromas, kai tik atsisiunčiama. Tada naršyklė pateikia serveriui naują užklausą dėl naujų išteklių. „Gyvas“ yra būdas, kuris nesibaigia užklausos, kai atsisiunčiami ištekliai.

Galite įgalinti palaikymą gyvu šiais būdais:

d) Sumažinkite peradresavimus

Peradresavimas yra nurodymas automatiškai perkelti klientą iš vienos vietos į kitą išteklių vietą. Kiekvienas peradresavimas pailgina jūsų tinklalapio įkėlimo laiką ir, jei tai nėra absoliučiai būtina, turėtumėte vengti bet kokių peradresavimų savo kode.

e) Naudokite CDN

CDN (turinio pristatymo tinklas) yra žiniatinklio serverių, esančių didelėse geografinėse vietose, rinkinys, greitai ir efektyviai pristatantis turinį klientams.

Resursą prašančiam klientui ištekliai bus įteikti iš serverio, kuris yra geografiškai arčiausiai kliento vietos. Tai užtikrina, kad prašomas turinys klientą pasieks per trumpiausią įmanomą laiką!

Turime atskirą šaltinį, kuriame palyginami populiariausi „WordPress“ svetainių CDN sprendimai, taip pat informaciją apie tai, kaip pradėti žiūrėti.

4 žingsnis: Talpyklos išsaugojimas

Joks svetainės greičio optimizavimo vadovas negali egzistuoti be talpyklos skyrių. Kai kurie metodai, kuriuos aptarėme anksčiau, pavyzdžiui, „GZip“ suspaudimas ir „minificaiton“, yra daugelio šiandieninių talpyklos sprendimų dalis..

Talpyklos išsaugojimas reiškia išteklių laikinojoje saugykloje laikymo reiškinį, kad prireikus jį būtų galima greitai atkurti. Talpinimas yra įvairių formų:

  • Puslapio talpinimas: statinė serveryje saugomo puslapio HTML versija
  • Duomenų bazės kaupimas talpykloje: serveryje saugomų įprastų duomenų bazės užklausų (tokių kaip 10 populiariausių jūsų svetainės įrašų) rezultatai
  • Naršyklės kaupimas talpykloje: puslapio dalių saugojimas naršyklėje

Šiame įraše palyginome populiariausius „WordPress“ talpyklos papildinius. TL; DR: Eik patikrink WP raketa jei ieškote išsamaus sprendimo. Arba, jei jums labiau patinka tai, kas nemokama, pateikiame šį vadovą kaip sukonfigūruoti W3 bendrą talpyklą.

5 veiksmas: optimizuokite mobiliesiems

Ankstesnėse šio straipsnio dalyse mes aptarėme optimizavimo metodus, kurie yra svarbūs tiek staliniams kompiuteriams, tiek mobiliesiems. Tačiau turinio vartojimas mobiliuosiuose auga ir kyla naujų iššūkių, kuriuos sukelia mažesnis ekranas. Taigi šiame skyriuje aptariami mobiliųjų įrenginių interneto svetainių greičio optimizavimo metodai.

Mobiliųjų telefonų optimizavimas reiškia praktiką, užtikrinančią, kad mobilieji jūsų tinklalapio lankytojai naudotųsi tokiomis pačiomis funkcijomis ir efektyvumu, kaip ir kolegos staliniuose kompiuteriuose. Šiame sąraše yra tam tikrų mobiliųjų įrenginių žiniatinklio turinio kuratorių higienos veiksnių:

  • Norėdami įsitikinti, kad skirtingi įrenginiai gauna skirtingas tinklalapio versijas, naudokite reaguojantį interneto dizainą
  • Venkite blykstės ir iššokančiųjų langų, nes mobilieji įrenginiai gali to nepalaikyti
  • Nedėkite tokios sąveikos kaip saitai per arti vienas kito

Be šių veiksnių, AMP (Pagreitinti mobilieji puslapiai) yra projektas, kurio tikslas – sukurti greitą ir nuoseklų turinį visuose įrenginiuose.

Čia yra vadovas, kaip pradėti naudotis AMP naudojantis „WordPress“.


AMP

Autorius (-ai): AMP projekto bendraautoriai


74% reitingai


500 000 ir daugiau įdiegimų


WP 4.9 + reikalinga

Daugiau informacijos

amp.1.5.3.zip

Dabartinė versija: 1.5.3

Paskutinį kartą atnaujinta: 2020 m. Balandžio 15 d


74% reitingai


500 000 ir daugiau įdiegimų


WP 4.9 + reikalinga

„WordPress.org“ papildinio puslapis


AMP

Išvada

Tikiuosi, kad šiame vadove buvo pateikta keletas patarimų, ką turėtumėte padaryti, kad pagerintumėte bendrą svetainės optimizavimo greitį.

Tiesiog atgalios; pirmiausia apžvelgėme tinklalapio anatomiją, norėdami išspręsti konkrečias sritis, kurias reikia tobulinti. Tada mes perėjome prie konkrečių optimizavimo veiksmų:

  • 1 veiksmas apėmė statinių failų optimizavimą stiliaus lentelių ir scenarijų forma
  • 2 žingsnis skirtas vaizdams ir jų optimizavimui
  • 3 žingsnis buvo apie HTTP užklausų optimizavimo būdus
  • 4 žingsnyje buvo aptarti keli populiarūs talpyklos kaupimo būdai
  • 5 žingsnis apėmė mobiliųjų įrenginių optimizavimą

Ar yra kažkas, su kuo kovojate, kai reikia optimizuoti svetainės greitį? Praneškite mums toliau pateiktuose komentaruose.

Nepamirškite prisijungti prie avarijos kurso, kaip pagreitinti jūsų „WordPress“ svetainę. Taikydami keletą paprastų pataisų galite sumažinti įkrovimo laiką net 50–80%:

Maketas, pristatymas ir redagavimas – Karolis K.

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