Kaip optimizuoti vaizdus „WordPress“ (tiek „Speed ​​+ SEO“)

Kalbant apie vaizdo optimizavimą, jūs turbūt pakankamai girdėjote apie alt tekstą.


Iš tikrųjų yra 20 skirtingų būdų, kaip optimizuoti vaizdus (jei įtraukiate ir SEO, ir greičio optimizavimą). Tai suteiks jums geresnius „GTmetrix“ / „Pingdom“ įvertinimus, potencialiai reitinguos jus aukštesnėje paieškoje ir turinį įkels daug greičiau. Man pavyko gauti 100% „GTmetrix“ ataskaitą su .5 įkėlimo laikais … didelę dalį sudarė mano vaizdų optimizavimas „WordPress“.

Optimizuokite vaizdus prieš įkeldami – Jei naudosite tokią programą kaip „Photoshop“, kad optimizuotumėte vaizdus prieš juos įkeldami, galite sutaupyti daug darbo. Galite pakeisti EXIF ​​duomenų dydį, juos suspausti, ištrinti, išsaugoti tinkamu formatu (pvz., PNG / JPEG) ir parašyti aprašomąjį failo pavadinimą (kuris automatiškai bus naudojamas kaip alt tekstas, jei naudosite Automatinis „Image Alt Atributai“ papildinys). Tai yra 6 optimizacijos!

Jei jums reikia aukštos skiriamosios gebos vaizdų (pvz., fotografijos svetainė), galbūt nenorėsite jų dydžio keisti ir glaudinti (3 ir 8 veiksmai), nes tai gali pabloginti kokybę, net jei tai nedaug.

Pagrindiniai įrankiai, kuriuos naudoju – Aš naudoju GIMP pakeisti dydį / suspausti vaizdus (pasirinktas mano vaizdų redaktorius), WP raketa mano talpyklos papildiniui, Įsivaizduok tolimesniam be nuostolių glaudinimui + EXIF ​​duomenų pašalinimui Debesuota ir „StackPath“ CDN, Automatinis vaizdų ALT atributai – automatiškai naudoti vaizdo failo pavadinimą kaip alt tekstą, ir Optimalus „Gravatar“ talpykla talpinti „Gravatars“ komentaruose. aš naudoju „WP Review Pro“ kaip mano turtingų fragmentų papildinys, Geresnė paieška pakeiskite dideliam kiekiui atnaujinti vaizdus (labai patogu), ir GTmetrix kaip mano greičio tikrinimo įrankis. Žiūrėkite visą įrankių sąrašą.

1. Raskite neoptimizuotus vaizdus

Vykdykite savo svetainę GTmetrix ir šiuos elementus matysite skirtukuose Puslapio greitis / YSlow. Pirmieji penki paprastai yra būdingi konkrečiam puslapiui, tai reiškia, kad „GTmetrix“ rodys tik neoptimizuotus vieno jūsų išbandyto puslapio vaizdus. Paskutiniai 3 dažniausiai būna visoje jūsų svetainėje. Žinoma, tai yra tik 7 būdai, kaip optimizuoti vaizdus, ​​tačiau jie yra patys svarbiausi, taigi mes tai padarysime pirmiausia.

  • Pateikite mastelio atvaizdus: pakeiskite didelių vaizdų dydį, kad būtų teisingi matmenys (2 žingsnis)
  • Nurodykite vaizdo matmenis: nurodykite vaizdo HTML arba CSS plotį / aukštį (3 žingsnis)
  • Optimizuokite vaizdus – be nuostolių suspausti vaizdus (4 žingsnis)
  • Vaizdų šukavimas naudojant CSS šriftus – sujungti kelis vaizdus į 1 vaizdą (5 žingsnis)
  • Venkite URL peradresavimų – neteikite vaizdų iš netinkamos www arba http (-ų) versijos (6 žingsnis)
  • Naudokite turinio pristatymo tinklą – pateikti vaizdus / failus iš CDN (7 žingsnis)
  • Naudokite naršyklės talpyklą – talpyklos atvaizdai / failai naudojant talpyklos papildinį (8 žingsnis)
  • Padarykite „favicon“ mažą ir laikomą talpykloje – naudokite 16 x 16 taškų vaizdo įrašą ir išsaugokite jį talpykloje (9 žingsnis)

Vaizdo optimizavimas „GTmetrix“

Pradėkite taisydami vaizdus, ​​kurie rodomi keliuose puslapiuose: logotipas, šoninės juostos / poraštės atvaizdai ir tt Taip pat pradėkite nuo aptarnaujamo dydžio vaizdų, nes gali tekti pakeisti jų dydį / įkelti iš naujo su naujais matmenimis..

2. Pateikite mastelio vaizdus

Jei matai pateikti mastelio atvaizdus „GTmetrix“ klaidos, tai reiškia, kad turite didelius vaizdus ir turite pakeisti jų dydį iki reikiamų matmenų (kuriuos jums suteikia „GTmetrix“). Kol stebėsite savo vaizdo matmenų kodą (žr. Toliau), šių klaidų neturėtumėte pamatyti. Bet jei jau įkėlėte didelius vaizdus, ​​turėsite juos pakeisti rankiniu būdu arba naudoti papildinį.

Pateikite mastelį - vaizdai

Masinis vaizdų dydžio keitimas naudojant papildinį – problema yra ta, kad skirtingiems vaizdams reikalingi skirtingi matmenys (valdikliai, skaidrės, viso pločio vaizdai). Nors dauguma vaizdo optimizavimo papildinių turi galimybę pakeisti atvaizdus į vieną vienišas konkretų matmenų rinkinį, prieš įkeldami turėtumėte juos apkarpyti / pakeisti jų dydį. Jei keičiate vaizdų dydį naudodami papildinį, išsaugokite originalių vaizdų atsargines kopijas (ir išbandykite tik keletą iš jų) tuo atveju, jei nesate patenkinti rezultatais.

Pakeisti didelių vaizdų dydį

Keiskite vaizdų dydį rankiniu būdu – iš „GTmetrix“ gaukite tinkamus matmenis ir pakeiskite jų dydį / įkelkite iš naujo. Atminkite, kad „GTmetrix“ rodo tik neoptimizuotus vieno bandomo puslapio vaizdus.

Sukurkite savo svetainės vaizdo matmenų lentelę
Jūsų skaidrėse, tinklaraščio šoninėje juostoje, vaizduojamuose vaizduose ir tinklaraščio turinio rinkinyje reikalaujama konkrečių aspektų, kurių atvaizdai turėtų būti pakeisti. Sukurkite kodų lapą, kad galėtumėte pakeisti jų dydį prieš įkeldami juos į „WordPress“. Tai ypač naudinga, jei turite daug savo svetainės sričių, kurioms reikia skirtingų dydžių vaizdų, ir jei turite kelis dizainerius / redaktorius.

Pavyzdys:

  • Skaidrių atvaizdai: 1900 (p) x 400 (h)
  • Karuselės vaizdai: 115 (h)
  • Valdiklio vaizdai: 414 (w)
  • Viso dienoraščio įrašų vaizdai: 680 (w)
  • Teminiai vaizdai: 250 (w) x 250 (h)
  • „Yoast Facebook OG“ vaizdas: 1200 (w) x 628 (h) – 11 veiksmas
  • „Yoast Twitter OG“ vaizdas 1024 (w) x 512 (h) – 11 veiksmas

Stačiakampis 680 pikselių pločio

3. Nurodykite vaizdo matmenis

Tai reiškia, kad vaizdo HTML arba CSS reikia pridėti plotį / aukštį. „Visual“ redaktorius tai daro už jus (bet valdikliai, kai kurie puslapių kūrėjai ir tinkintas HTML nereikia). Išbandykite kelis puslapius „GTmetrix“.

„GTmetrix“ nurodo vaizdo matmenis …

Specifiniai vaizdo matmenys

Pridėkite vaizdo HTML plotį / aukštį …

Nurodykite vaizdo matmenis

4. Losslessly Compress Images

Tai yra „optimizuoti vaizdus“ elementai „GTmetrix“. Daugelis programų (pvz., „Photoshop“ ir „Gimp“) turi galimybę eksportuoti jas suspausti. Nors tai yra puiki pradžia, vaizdo glaudinimo papildiniai paprastai pasiekia dar geresnių rezultatų. Man labiau patinka Įsivaizduok, Krakenas, „ShortPixel“, arba Smushas. Yra žinoma, kad kiti papildiniai vizualiai sumažina vaizdo kokybę ir gali sukelti jūsų vaizdų klaidų.

Vaizdų glaudinimas naudojant „Imagify“

  1. Užsiregistruok Įsivaizduok
  2. Įdiekite Įsivaizduokite papildinį
  3. Jums bus pasiūlyta su šiomis instrukcijomis:
  4. Iš „Imagify“ paskyros įveskite savo API raktą
  5. Nustatykite suspaudimo lygį (normalus, agresyvus, ypač aukštas)
  6. „Imagif’em all“ (nuotrauka žemiau) su dideliais kiekiais optimizuoja visus jūsų svetainės vaizdus
  7. Kai pasieksite limitą, sumokėkite 4,99 USD arba palaukite kitą mėnesį, kad galėtumėte nustatyti limitą

įsivaizduok

Išbandykite, kaip vaizdai atrodo, esant skirtingiems glaudinimo lygiams …

Įsivaizduokite glaudinimo palyginimą

Užsiregistravę, optimizuokite visus savo svetainės vaizdus dideliu mastu …

įsivaizduokite, „WordPress“, „Vaizdo optimizavimas“

Nustatykite parinktį optimizuoti įkeliamus vaizdus …

Įsivaizduokite, kaip optimizuoti vaizdus įkeliant

5. Sujunkite vaizdus į CSS „Sprites“

Mano pagrindiniame puslapyje galite manyti, kad matote 21 piktogramą, bet iš tikrųjų tai yra vienas vaizdas. Tai yra CSS sprite, kur sujungiate kelis vaizdus į vieną vaizdą. Dėl to sumažėja vaizdų (ir užklausų) skaičius, todėl mano pagrindiniame puslapyje yra tik 10 užklausų. Užuot įdėję 21 vaizdą, jis įkeliamas 1. Norėdami tai padaryti, jums reikės CSS žinių arba naudoti a CSS sprite generatorius.

CSS „Sprites“

„GTmetrix CSS Sprites“

Dekoratyviniams vaizdams naudokite tik CSS „Sprites“ – praradę daugybę vaizdų, galite sujungti 21 vaizdą į 1. NENUDOKITE svarbių vaizdų į CSS šriftus, jei jie apibūdina jūsų turinį. Kalbant apie mane, mano pagrindinio puslapio greitis yra svarbesnis nei SEO … Aš naudoju savo pagrindinio puslapio „GTmetrix“ ataskaitą daugelyje vietų (todėl turiu ją išlaikyti švarią), o mano pagrindinis puslapis, patikėk ar ne, nėra nukreiptas į raktinis žodis. Tikslas yra išdėstyti mano vadovėlius … ir greitai įkelti.

6. Venkite vaizdo URL peradresavimų

Jei pakeitėte į HTTPS, www versijas arba pradėjote teikti vaizdus iš kompaktinio disko, turėtumėte visus naujinius (ir nuorodas) atnaujinti naudodami Geresnė paieška pakeiskite todėl jie pateikia teisingą versiją. Kitaip gali pamatyti sumažinti peradresavimus arba naudokite domenus, kuriuose nėra slapukų klaidų.

Sumažinkite peradresavimus

Domenai, kuriuose nėra slapukų

Jei norite masiškai atnaujinti vaizdo URL, naudokite papildinį „Geresnės paieškos pakeitimas“.

Geresnė paieška Pakeiskite „WWW“ versijas

Geresnė paieška Pakeiskite HTTP ir HTTPS

7. Pateikite vaizdus iš kompaktinio disko

Tam reikia pakeisti vaizdo URL, kad būtų įtrauktas jūsų CDN URL

  • Seno vaizdo URL (be CDN): Https://onlinemediamasters.com/wp-content/uploads/2017/02/Tom-Dupuis-Widget.png
  • Naujas vaizdo URL (su CDN): Https://t9w8m8j8.stackpathcdn.com/wp-content/uploads/2017/02/Tom-Dupuis-Widget.png

„Cloudflare“ ir „StackPath“ – Aš naudoju abu Debesuota ir „StackPath“ nes daugiau duomenų centrų = greitesnis turinio pateikimas. Debesų liepsna turi 200 ir daugiau duomenų centrų, „StackPath“ turi 34+ duomenų centrai kurios yra labai įsikūrusios JAV (iš kur daugiausia mano lankytojų). „Cloudflare“ neskiria jums CDN URL taigi vaizdams pateikti naudosime „StackPath“ CDN.

„StackPath“ duomenų centrai

1 žingsnis: Pasirinkite CDN. aš naudoju „StackPath“ (jie turi 30 dienų bandymą).

2 žingsnis: Prietaisų skydelyje spustelėkite skirtuką CDN, tada sukurti „StackPath“ CDN svetainę

„StackPath-CDN-Tab“

„StackPath-CDN-Domain“

CDN-URL-StackPath

3 žingsnis: Nukopijuokite CDN URL ir įklijuokite jį į talpyklos papildinį (žemiau yra „WP Rocket“)…

WP-Rocket-CDN

4 žingsnis: Pakeiskite vaizdo URL, kad įtrauktumėte savo CDN URL (naudodami Geresnė paieška pakeiskite).

Geresnė paieška Pakeiskite CDN URL

5 žingsnis: Naudodamiesi patikrinkite, ar nėra senų vaizdo URL „Chrome DevTools“. Kartais talpyklos papildinys arba CDN įgalintuvas rūpinasi tuo, išskyrus CSS ir „JavaScript“ saitus, kurie yra sunkiai koduojami. Jei trūksta nuorodų, jos paprastai yra bylos (pvz., CSS ar „Javascript“), kuriuos reikia patikrinti ir pakeisti rankiniu būdu. „Chrome DevTools“ rodo visus šiuo metu naudojamus domenus.

6 žingsnis: Paleiskite savo svetainę į GTmetrix ir „turinio pateikimo tinklas“ „YSlow“ turėtų būti žalios spalvos. Taip pat neturėtų būti jokių klaidų „sumažinant peradresavimus“ arba „naudoti domenus, kuriuose nėra slapukų“.

CDN GTmetrix YSlow

8. Talpyklos atvaizdai

Daugelyje talpyklos papildinių yra galimybė naršyklės talpyklą, kuriame talpinami vaizdai. Aš naudoju „WP Rocket“, kuris buvo įvertintas kaip svarbiausias talpyklos papildinys keliose „Facebook“ apklausose, ir turiu tai mokyti.. Greitas atlikimas paprastai yra klasifikuojamas kaip nemokamas 1 talpyklos papildinys (aš taip pat turiu mokymo programą).

Naršyklės kaupimas

9. Padarykite „Favicon“ mažą ir pritaikomą talpykloje

Įsitikinkite, kad jūsų „favicon“ yra 16×16 pikselių, yra favicon.ico formato ir yra talpykloje, naudojant jūsų talpyklos papildinį..

10. Pašalinkite EXIF ​​duomenis

Exif duomenys yra tokios informacijos kaip diafragma, užrakto greitis, ISO, židinio nuotolis, fotoaparato modelis, nuotraukos darymo data ir kita. Jums to nereikia vaizdams jūsų svetainėje. VA Pašalinkite „Exif“ papildinį „Exif“ duomenys automatiškai pašalinami įkėlus vaizdus.

Daugelyje vaizdo optimizavimo papildinių (įskaitant „Imagify“, „ShortPixel“, „Kraken“, EWWW ir „Smush“) yra galimybė automatiškai pašalinti EXIF ​​duomenis. Čia yra „Įsivaizduok“ nustatymai …

Įsivaizduokite Pašalinti EXIF ​​duomenis

11. „Cloudflare“ vaizdo optimizavimas

„Cloudflare“ taip pat turi keletą būdų, kaip optimizuoti vaizdus. Miražas ir lenkų kalba randami jūsų Debesų liepsnos greičio nustatymai o „Hotlink Protection“ randama jūsų „Scrape Shield“ nustatymai.

Debesų liepsnos miražas („Pro Feature“) – sumažina vaizdų užklausas, tingus įkelia vaizdus ir pagerina vaizdų įkėlimo laiką mobiliuosiuose įrenginiuose su lėtais tinklo ryšiais. Čia yra daugiau informacijos …

  • Vaizdų dydis keičiamas atsižvelgiant į lankytojo įrenginį / ryšį. Prastą ryšį turintis lankytojas gaus mažesnę versiją (mažesnę skiriamąją gebą), kol grįš prie didesnio pralaidumo.
  • Sumažina užklausų skaičių – užuot siuntusi kelias užklausas dėl visų vaizdų tinklalapyje, „Mirage“ sudeda ją į vieną užklausą, kad lankytojai galėtų iš karto pamatyti vaizdus.
  • Tingus įkelia vaizdus (įkelia tik juos, kai vartotojai slink žemyn ir iš tikrųjų mato vaizdą).

„Cloudflare“ vaizdo miražas

„Cloudflare“ lenkų kalba („Pro Feature“) – panaikina EXIF ​​duomenis ir suglaudina vaizdus.

„Cloudflare“ vaizdas lenkų kalba

„Cloudflare“ karštųjų nuorodų apsauga – neleidžia žmonėms nukopijuoti jūsų vaizdų ir įklijuoti jų savo svetainėje, o tai (nes jūs vis dar priglobiate tą vaizdą) užims jūsų pralaidumą.

„Cloudflare“ „Hotlink“ apsauga

12. Lazy Load Images

Tai atideda vaizdų įkėlimą, kol vartotojai nuslinka žemyn puslapiu ir gerai mato vaizdą. Nors tai pagerina pradinio įkėlimo laiką, nuolatos įkeliami vaizdai slenkant gali būti labai erzinantys. Aš asmeniškai tik tingus įkelti vaizdo įrašus, nes juos įkelti reikia daug ilgiau nei vaizdus.

Galite naudoti „Lazy Load“ papildinys, Lazy Load vaizdo įrašų papildinys, arba naudok WP raketą …

WP-Rocket-Lazy-Load

13. Išsaugoti kaip teisingą formatą

PNG ir JPEG – PNG nesuspaustas (didesnis failo dydis) ir turėtų būti naudojamas paprastuose vaizduose be daug spalvų. JPEG yra suglaudintas (mažesnis failo dydis), kuris šiek tiek pablogina vaizdo kokybę, tačiau yra mažesnio dydžio, ir naudojamas vaizdams su daugybe spalvų. GIMP ir kitos vaizdų redagavimo programos turėtų automatiškai naudoti teisingą formatą, tačiau tai vis tiek verta žinoti.

jpg_vs_png

Iliustracija Labnolis

14. Vaizdo failų pavadinimai

Paieškos varikliai naudoja ir „alt“ teksto, ir vaizdo failų pavadinimus, todėl pavadinkite savo failus prieš įkeldami juos į „WordPress“. Jei naudojate papildinį, tai automatiškai prideda alt tekstą atsižvelgiant į failo pavadinimą, jums viskas, ką turite padaryti, yra vardinti failus! Nepilkite raktinių žodžių, tiesiog apibūdinkite vaizdą.

Etiketės paveikslėlių failų pavadinimai

15. Alt tekstas

Jie turėtų būti tokie patys kaip jūsų vaizdo failo vardas. Galite naudoti Automatinis „Image Alt Atributai“ papildinys automatiškai naudoti failo pavadinimą kaip „alt“ tekstą. Kol naudojate atitinkamus vaizdus, ​​kai kurie iš jų turėtų natūraliai įtraukti (raktinius žodžius) jūsų raktinį žodį … visiškai nėra jokios priežasties įterpti raktinius žodžius į paveikslėlius, o tai gali sukelti raktinių žodžių įdaro bausmė.

Automatiškai pridėkite „Alt“ tekstą prie vaizdų – naudoti Automatinis „Image Alt Atributai“ papildinys. Dabar, kai pridėsite vaizdą, papildinys pridės alt tekstą, kuris sutampa su failo pavadinimu …

alt ="WP-greičiausias talpyklos papildinys" plotis ="577" aukštis ="247" />

Raskite trūkstamą „Alt“ tekstą – „Screaming Frog“ yra nemokama priemonė, rodanti visus vaizdus, ​​kuriuose trūksta alt teksto.

  • parsisiųsti Rėkianti varlė SEO voras
  • Įveskite savo svetainę ir spustelėkite „Pradėti“, norėdami aptikti svetainę
  • Spustelėkite skirtuką vaizdai
  • Eikite į Apžvalga → Trūksta „Alt“ teksto (žr. žemiau)
  • Raskite tuos vaizdus savo svetainėje ir pridėkite kitą tekstą

Trūksta paveikslėlio Alt tekstas - rėkianti varlė

16. Atviras grafikas („Facebook“ + „Twitter“)

Tai padaro jūsų turinio formatą tinkamą, kai jis dalijamasi „Facebook“ / „Twitter“, ypač jūsų atvaizdą, nes abu tinklai jo rodymui naudoja pasirinktinius aspektus, kitaip jis atrodys juokingas.

„facebook-share“

Jei naudojate „Yoast“, eikite į „Socialiniai“ nustatymus ir įgalinkite „Open“ schemą „Facebook“ / „Twitter“ …

„Yoast-Social-Meta-Data“

Dabar redaguokite puslapį / įrašą, tada spustelėkite nuorodą „bendrinti“ „Yoast“ ir pamatysite parinktis, kaip įkelti pasirinktinius vaizdus „Facebook“ (1200 plotis x 628 aukštis) ir „Twitter“ (1024 plotis x 512 aukštis)..

yoast-social-media-optimization

17. Vaizdai rodomuose fragmentuose

Teminiai fragmentai yra tada, kai „Google“ rodo jūsų turinio bitus paieškos rezultatų viršuje ir gali (bet negarantuojama) įtraukti vaizdą. „Google“ ištrauks juos iš bet kurio 1-ojo puslapio rezultatų, tačiau jie patys nuspręs, ar jie parodys pateiktą fragmentą ar vaizdą. Tai taip pat priverčia jūsų fragmentą parodyti du kartus ir yra neįtikėtinas būdas pritraukti daug srauto.

3 tipų pateiktų fragmentų tipai

  • Atsakymai
  • Stalai
  • Sąrašai

Panašių vaizdų fragmentai

Kaip gauti pateiktų fragmentų „Google“

  • Taikykite pagal raktinį žodį ten, kur nori žmonės glaustas atsakymas
  • Naudokite „Moz“ raktinių žodžių naršyklė nustatyti raktinius žodžius
  • Norėdami rasti dar daugiau raktinių žodžių, naudokite „Atsakyti visuomenei“
  • Pasirinkite, ar atsakymas turėtų būti pastraipa, sąrašas ar lentelė
  • Suprojektuokite gražią grafiką (arba nufotografuokite), apibūdinančią raktinį žodį
  • Naudokite optimalų simbolio ilgį (žr. Nuotrauką žemiau, padarytą iš Moz)
  • Sukurkite faktais pagrįstą turinį su kokybės nuorodomis (nuorodos, grafika ir kt.)
  • Taikykite pagal raktinius žodžius, kurie jau turi pateiktą fragmentą, tačiau blogai dirba
  • Jei siekiate atsakymo laukelio, nukreipkite į raktinį žodį naudodami tikslią atitiktį
  • Įsitikinkite, kad esate 1-ame raktinio žodžio puslapyje, jei ne, patobulinkite turinį

Optimalių matomų fragmentų ilgis

18. Struktūrizuoti duomenys

Vaizdai gali būti naudojami struktūrizuoti duomenys (ir ženkleliai) šių tipų turiniui:

Vaizdo įrašo turtingas fragmentas

Gausūs receptai-fragmentai

Produkto turtingas fragmentas

Ką turėčiau naudoti „Rich Snippets“ papildinį??
aš naudoju „MyThemeShop“ WP peržiūros programa „Pro“ (čia yra puslapis, kuriame jį naudoju), kuriame palaikomi 14 duomenų tipų, įskaitant receptus ir produktų apžvalgas. Anksčiau naudojau „WP Rich Snippets“, tačiau kūrėjas atsisakė papildinio ir jis nebuvo atnaujintas daugiau nei 2 metus, o „Viskas viename“ papildinys yra tiesiog nuobodus (jam trūksta galimybių ir stiliaus). „WP Review Pro“ yra labai lengva naudoti.

19. Stiliaus vaizdai

Nepamirškite stiliuoti savo vaizdų! Aš naudoju sienas beveik visiems.

  • Vaizdo pavadinimai
  • Vaizdo nuorodos
  • Vaizdo kraštinės
  • Vaizdo antraštės

20. Pakeiskite GIF dydį

Kaip ir keičiant tinkamo dydžio vaizdus, ​​GIF dydis taip pat turėtų būti keičiamas (naudokite GIF GIF).

Pakeisti GIF dydį …

GIF dydžio keitimas

Tada suspausti …

Suspauskite GIF

Rezultatas :-)

Optimizuokite šunų GIF

21. „Cache Gravatars“

Jei turite įrašų su daugybe komentarų, Gravatarai gali visiškai sugadinti jūsų pranešimą. Galite juos išjungti, nutraukti komentarus, kad būtų rodomas tik tam tikras skaičius komentarų, arba išbandyti „Gravatar“ talpyklos papildinį. Jums gali reikėti šiek tiek išbandyti, nes kai kurie papildiniai neveikia kai kuriose svetainėse.

  • „Cache Gravatars“ (Optimalus, Haris, arba „FV Gravatar“ talpykla)
  • Visiškai išjunkite „Gravatars“
  • Numatytąjį „Gravatar“ nustatykite kaip tuščią
  • Ištrinkite komentarus, kurie nekelia pridėtinės vertės
  • Numatytuoju „Gravatar“ nustatykite pasirinktinį vaizdą serveryje
  • Apribokite „Gravatar“ vaizdus iki mažesnių matmenų (pvz., 32 pikselių)
  • Paginate komentarus WP Neleisti rodyti tik 20 komentarų vienu metu
  • Jei nė vienas iš šių darbų neveikia, patikrinkite „WP Rocket“ talpyklos „Gravatars“ pamoka

Talpykla - „Gravatar“ - vaizdai

22. Venkite įterpti vaizdus iš išorinių svetainių

Visada įkelkite vaizdus į savo svetainę, niekada jų nekopijuokite ir neįklijuokite. Priešingu atveju jūs pateiksite papildomų užklausų, nes vaizdas nėra talpinamas jūsų serveryje, todėl jis turi jį iš kažkur pasiimti.

23. Vaizdo optimizavimo įrankiai

Venkite papildinių, turinčių pasikartojančias funkcijas – Įsivaizduokite, „ShortPixel“, „Kraken“, „EWWW“ ir „Smush“ iš esmės daro tą patį dalyką (be nuostolių suspaudimas, EXIF ​​duomenų pašalinimas, vaizdų dydžio keitimas). „WP Rocket“ turi tinginio įkėlimo, talpyklos kaupimo ir CDN (ir duomenų bazės išvalymo + „Google Analytics“ vietinio prieglobos) parinkčių, kurių dauguma talpyklos papildinių neturi, taupydamos jus nuo papildomų papildinių naudojimo.

Dažnai užduodami klausimai

&# x2705; Kaip ištaisyti „GTmetrix“ vaizdo optimizavimo klaidas?

Nepakenčiamai suspausdami juos naudodami papildinį, pvz., „ShortPixel“, „Imagify“ ar „Smush“. Aš naudoju „ShortPixel“, nes jis visada ištaiso šią klaidą „GTmetrix“.

&# x2705; Kaip ištaisyti „Serve Scaled Image“ klaidas „GTmetrix“?

Tai reiškia, kad jums reikia apkarpyti / pakeisti dydį pagal tinkamus matmenis. Jei vaizdai yra per dideli, „GTmetrix“ parodys mastelio dydžio vaizdo klaidas ir nurodys, kokie matmenys turėtų būti pakeisti.

&# x2705; Kaip ištaisyti „GTmetrix“ nurodytas vaizdo matmenų klaidas?

Peržiūrėkite vaizdo HTML ir patikrinkite, ar jo plotis ir aukštis yra nurodyti, kaip parodyta šiame vadove.

&# x2705; Bet koks kitas būdas padaryti vaizdus greitesnius?

Pašalinus EXIF ​​duomenis ir naudojant kompaktinį diską paveikslėliams aptarnauti, skirtumas tarp „GTmetrix“ rekomendacijų bus didžiausias.

&# x2705; Kuris vaizdo optimizavimas yra geriausias?

Aš naudoju „ShortPixel“, nes beveik nėra kokybės praradimo ir tai nustato „Optimize Images“ elementą „GTmetrix“.

Ką tu manai?
Ar jūsų „GTmetrix“ ataskaita atrodo šiek tiek geriau? Praneškite man komentaruose! Ir jei norite daugiau patarimų, kurie suteiks jums dar geresnius balus / įkėlimo laikus, skaitykite mano išsamų „WordPress“ greičio vadovą.

Džiaugsmas,
Tomas

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map