Ինչպե՞ս օպտիմալացնել նկարները WordPress- ում (երկուսն էլ արագությամբ + SEO)

03.06.2020
WordPress 'Ինչպե՞ս օպտիմալացնել նկարները WordPress- ում (երկուսն էլ արագությամբ + SEO)
0 52 мин.

Երբ խոսքը վերաբերում է պատկերի օպտիմիզացմանը, հավանաբար բավականաչափ լսել եք alt տեքստի մասին.


Պատկերներն օպտիմիզացնելու 20 տարբեր եղանակներ կան (եթե ներառեք և SEO- ն, և արագության օպտիմիզացումը): Դրանք ձեզ ավելի լավ գնահատական ​​կտան GTmetrix / Pingdom- ում, հնարավոր է, ձեզ ավելի բարձր դասակարգեն որոնման մեջ և ձեր բովանդակության բեռնումը շատ ավելի արագ կդարձնեն: Ինձ հաջողվել է ստանալ 100% GTmetrix զեկույց 0,5 բեռի անգամ … WordPress- ում իմ պատկերների օպտիմալացումը դրա մեծ մասն էր.

Պատկերները օպտիմիզացնել ԱՌԱԻՆ վերբեռնումից – Photoshop- ի նման ծրագիր օգտագործելուց առաջ պատկերները օպտիմալացնելու համար կարող է շատ աշխատանք խնայել: Կարող եք չափափոխել, սեղմել, շերտավորել EXIF ​​տվյալները, պահպանել ճիշտ ձևաչափով (օրինակ ՝ PNG / JPEG) և գրել նկարագրական ֆայլի անուն (որը ավտոմատ կերպով կօգտագործվի որպես alt տեքստ, եթե օգտագործեք Ավտոմատ պատկերի Alt հատկանիշների հավելված) Դա 6 օպտիմիզացում է!

Եթե ​​Ձեզ անհրաժեշտ է բարձր լուծման պատկերներ (օրինակ ՝ լուսանկարչության կայք), գուցե չցանկանաք չափափոխել և սեղմել դրանք (քայլ 3 և 8), քանի որ դրանք կարող են իջեցնել որակը, թեկուզև այն փոքր քանակությամբ.

Հիմնական գործիքները, որոնք ես օգտագործում եմ – Ես օգտագործում եմ GIMP չափափոխել / սեղմել պատկերները (իմ պատկերն ընտրող խմբագիր), WP հրթիռ իմ cache plugin- ի համար, Պատկերացրեք երկուսն էլ `EXIF- ի տվյալների հետագա կորստի համար + Cloudflare և StackPath CDN, Ավտոմատ պատկերի ALT հատկանիշների հավելված ինքնաբերաբար օգտագործել պատկերի ֆայլի անունը որպես alt տեքստ, և Gravatar- ի օպտիմալ քեշ քերել Gravatars- ը մեկնաբանություններում: ես օգտագործում եմ WP Review Pro որպես իմ հարուստ կտորների հավելված, Ավելի լավ որոնում փոխարինեք պատկերների զանգվածային թարմացում (շատ հարմար) և GTmetrix որպես իմ արագության փորձարկման գործիք: Տե՛ս գործիքների ամբողջական ցանկը.

Contents

1. Գտեք չօգտագործված պատկերներ

Ձեր կայքը վարեք GTmetrix և կտեսնեք այս տարրերը Էջի արագության / YSlow ներդիրներում. Առաջին հինգը սովորաբար էջին հատուկ են, ինչը նշանակում է, որ GTmetrix- ը ցույց կտա միայն չփորձված պատկերները ձեր ստուգված մեկ էջի համար. Վերջին 3-ը սովորաբար տեղի են ունենում ձեր ամբողջ կայքում. Իհարկե, սրանք պատկերները օպտիմիզացնելու ընդամենը 7 եղանակներ են, բայց ամենակարևորները, ուստի մենք առաջին հերթին դրանք կկատարենք.

  • Ծառայել մասշտաբային պատկերներչափերը մեծացնելու համար չափերը շտկելու համար (2-րդ քայլ)
  • Նշեք պատկերի չափերընշեք HTML կամ CSS պատկերի լայնությունը / բարձրությունը (3-րդ քայլ)
  • Պատկերները օպտիմիզացնել – Անպաշտպանորեն սեղմել պատկերները (քայլ 4)
  • Պատկերների համադրություն CSS sprites օգտագործմամբ – համատեղել բազմաթիվ պատկերներ 1 պատկերի մեջ (քայլ 5)
  • Խուսափեք URL վերահղումներից – չեն ծառայում պատկերված սխալ www կամ http (ներ) ի տարբերակի (քայլ 6)
  • Օգտագործեք բովանդակության առաքման ցանց – սպասարկել պատկերներ / ֆայլեր CDN- ից (քայլ 7)
  • Զննարկչի լծակների պահպանում – քեշի պատկերներ / ֆայլեր ՝ ձեր քեշի հավելվածի միջոցով (քայլ 8)
  • Դարձրեք favicon- ը փոքր և քեշոտ – օգտագործեք 16x16px ֆավիոն և պահեք այն (քայլ 9)

Պատկերների օպտիմիզացում GTmetrix- ում

Սկսեք ֆիքսել նկարները, որոնք հայտնվում են բազմաթիվ էջերումպատկերանշան, կողային գծերի / ոտնահարկի պատկերներ և այլն: Սկսեք նաև մասշտաբային պատկերների սպասարկումը, քանի որ գուցե անհրաժեշտ է դրանք չափափոխել / վերազինել նոր չափերով:.

2. Ծառայել մասշտաբի պատկերները

Եթե ​​տեսնում եք ծառայել մասշտաբային պատկերներին GTmetrix- ի սխալները, դա նշանակում է, որ դուք չափսերի մեծ պատկերներ ունեք և դրանք պետք է չափափոխեք ճիշտ չափսերով (ինչը GTmetrix- ն ապահովում է ձեզ): Քանի դեռ հետևում եք ձեր պատկերի չափերի խաբեության թերթին (տես ստորև), չպետք է տեսնեք այս սխալները: Բայց եթե արդեն վերբեռնե՞լ եք մեծածավալ պատկերներ, ապա հարկավոր է դրանք ձեռքով չափափոխել կամ օգտագործել մի plugin.

Ծառայել-մասշտաբով պատկերներ

Լրացուցիչ չափափոխիչի պատկերները `օգտագործելով մի plug – սրա հետ կապված խնդիրն այն է, որ տարբեր պատկերներ կոչ են անում տարբեր չափեր (ֆայլեր, սլայդեր, լրիվ լայնությամբ նկարներ): Թեև պատկերի օպտիմիզացման մեծամասնության պլագինները հնարավորություն ունեն պատկերները չափափոխել մեկին սինգլ Չափսերի հատուկ հավաքածու, դուք իսկապես պետք է դրանց բերքահավաքի / չափափոխման համար դրանք վերբեռնելուց առաջ: Եթե ​​դուք չափափոխում եք պատկերները plugin- ով, ապա պահում եք բնօրինակ պատկերների կրկնօրինակում (և միայն մի քանիսը փորձարկեք), եթե դուք գոհ չեք արդյունքից.

Չափափոխել մեծ պատկերները

Պատկերները ձեռքով չափափոխեք – ստացեք GTmetrix- ի ճիշտ չափերը և չափափոխեք / վերաբեռնեք դրանք: Հիշեք, որ GTmetrix- ը ցույց է տալիս միայն չպաշտպանված պատկերները ձեր ստուգած մեկ էջի համար.

Ստեղծեք խաբեության թերթիկ ձեր կայքի պատկերի չափսերով
Ձեր սլայդերը, բլոգի կողային սլաքը, պատկերազարդ պատկերները և բլոգի բովանդակության մարմինը բոլորն էլ կոչ են անում հատուկ չափեր, որոնց վրա պետք է չափափոխվեն պատկերները: Ստեղծեք խաբեության թերթ, որպեսզի կարողանաք դրանք չափափոխել, նախքան դրանք WordPress- ում վերբեռնելը. Սա հատկապես օգտակար է, եթե ձեր կայքի շատ տարածքներ ունեք, որոնք տարբեր պատկերների չափեր են պահանջում, և եթե ունեք բազմաթիվ դիզայներներ / խմբագիրներ.

Օրինակ:

  • Սլայդերի պատկերներ ՝ 1900 (վտ) x 400 (ը)
  • Կարուսելի պատկերներ. 115 (ը)
  • Վիդջեթների պատկերներ ՝ 414 (w)
  • Բլոգի լրիվ լայնության տեղադրման պատկերներ. 680 (վ)
  • Գլխավոր նկարներ ՝ 250 (վտ) x 250 (ը)
  • Yoast Facebook OG պատկեր ՝ 1200 (վ) x 628 (ը) – քայլ 11
  • Yoast Twitter OG պատկեր 1024 (w) x 512 (ը) – քայլ 11

680 պիքսել լայնության ուղղանկյուն

3. Նշեք պատկերի չափերը

Սա նշանակում է, որ նկարը HTML կամ CSS է ավելացնել լայնություն / բարձրություն: Visual Editor- ը դա անում է ձեզ համար (բայց ֆայլեր, որոշ էջերի ստեղծողներ և այլն) հարմարեցված HTML չեն): Փորձեք մի քանի էջ GTmetrix- ում.

GTmetrix- ը ձեզ ասում է պատկերի չափերը…

Հատուկ պատկերի չափեր GTmetrix

Լրացրեք լայնությունը / բարձրությունը պատկերի HTML- ում…

Նշեք պատկերի չափերը

4. Losslessly սեղմել պատկերները

Սրանք GTmetrix- ում «օպտիմիզացնել պատկերներն» են: Շատ ծրագրեր (օրինակ ՝ Photoshop- ը և Gimp- ը) արտահանման ժամանակ սեղմելու տարբերակ ունեն: Չնայած սա հիանալի սկիզբ է, պատկերների սեղմման հավելվածները սովորաբար ավելի լավ արդյունք են ստանում: նախընտրում եմ Պատկերացրեք, Կրակեն, ShortPixel, կամ Ջարդել. Հայտնի են այլ plugins, որոնք տեսողականորեն իջեցնում են պատկերի որակը և կարող են սխալ առաջացնել ձեր պատկերների մեջ.

Պատկերները պատկերացնելով պատկերացնելով

  1. Գրանցվել ինչ – որ բանի համար Պատկերացրեք
  2. Տեղադրեք Պատկերացրեք Plugin- ը
  3. Ձեզ կառաջարկվի ստորև նշված ցուցումներից.
  4. Մուտքագրեք ձեր API ստեղնը ձեր Imagify հաշվից
  5. Սահմանեք ձեր սեղմման մակարդակը (նորմալ, ագրեսիվ, ուլտրա)
  6. Պատկերացրեք բոլորը (ներքևում գտնվող լուսանկարը) մեծ մասի միջոցով օպտիմիզացնում է ձեր կայքի բոլոր նկարները
  7. Երբ հասնեք ձեր սահմանը, վճարեք 4,99 դոլար կամ սպասեք հաջորդ ամիս ձեր սահմանը վերականգնելու համար

պատկերացնել

Փորձեք, թե ինչպես են պատկերները նայում սեղմման տարբեր մակարդակներով…

Պատկերացրեք սեղմման համեմատությունը

Գրանցվելուց հետո զանգվածաբար օպտիմիզացրեք ձեր կայքի բոլոր նկարները…

պատկերացրեք-wordpress-image-optimization

Սահմանեք ընտրանքը բեռնման պատկերները օպտիմիզացնելու համար …

Պատկերացրեք օպտիմալացնել վերբեռնվող պատկերները

5. Նկարները համադրեք CSS Sprites- ում

Իմ գլխավոր էջում, դուք կարող եք մտածել, որ տեսնում եք 21 սրբապատկեր, բայց դրանք իրականում 1 մեկ պատկեր են: Սա … է CSS սպրիտ, որտեղ դուք համատեղում եք բազմաթիվ պատկերներ 1 մեկ պատկերի մեջ: Սա նվազեցնում է պատկերների (և հայցերի) քանակը, այդ իսկ պատճառով իմ էջը միայն 10 հարցում ունի: 21 պատկերներ բեռնելու փոխարեն այն բեռնում է: Դա անելու համար ձեզ հարկավոր է CSS գիտելիքներ կամ օգտագործել այն CSS սպրիտի գեներատոր.

CSS Sprites

GTmetrix CSS Sprites

Օգտագործեք միայն CSS Sprites դեկորատիվ պատկերների համար – Դուք կորցնում եք շատ պատկերի alt պիտակներ, երբ համատեղում եք 21 պատկեր 1-ին: ՉԻ մի համատեղեք կարևոր պատկերները CSS- ի տառերով, եթե դրանք նկարագրում են ձեր բովանդակությունը: Ինչ վերաբերում է ինձ, իմ գլխավոր էջի արագությունն ավելի կարևոր է, քան դա SEO- ն է … Ես օգտագործում եմ իմ գլխավոր էջի GTmetrix զեկույցը շատ տեղերում (այնպես որ ես պետք է այն մաքուր պահեմ) և իմ էջը, հավատացեք, թե ոչ, չի թիրախավորում բանալի բառ Նպատակը `ուրվագծել իմ ձեռնարկները … և արագ բեռնելը.

6. Խուսափեք պատկերի URL վերահղումներից

Եթե ​​փոխվել եք HTTPS- ի, www- ի վարկածների կամ CDN- ի պատկերներ ծառայելու մասին, ապա պետք է զանգվածաբար թարմացնեք ձեր բոլոր պատկերները (և հղումները) ՝ օգտագործելով Ավելի լավ որոնում փոխարինեք այնպես որ նրանք սպասարկում են ճիշտ տարբերակը: Հակառակ դեպքում դուք կարող եք տեսնել նվազագույնի հասցնել վերահղումները կամ օգտագործեք cookie- ի անվճար տիրույթներ սխալները.

Նվազագույնի հասցնել վերահղումները

Cookie- ի անվճար տիրույթներ

Պատկերների URL- ների զանգվածային թարմացման համար օգտագործեք ավելի լավ որոնման փոխարինող plugin- ը…

Ավելի լավ որոնում փոխարինեք WWW- ի տարբերակները

Ավելի լավ որոնում Փոխեք HTTP- ը ընդդեմ HTTPS

7. Ծառայել նկարները A CDN- ից

Սա պահանջում է փոխել պատկերի URL- ները ՝ ձերը ներառելու համար CDN URL

  • Հին պատկերի URL (Առանց CDN)Https://onlinemediamasters.com/wp-content/uploads/2017/02/Tom-Dupuis-Widget.png
  • Նոր պատկերի URL (CDN- ով)Https://t9w8m8j8.stackpathcdn.com/wp-content/uploads/2017/02/Tom-Dupuis-Widget.png

Cloudflare- ն ընդդեմ StackPath- ի – Ես օգտագործում եմ երկուսն էլ Cloudflare և StackPath քանի որ ավելի շատ տվյալների կենտրոններ = բովանդակության ավելի արագ առաքում: Cloudflare- ն ունի 200+ տվյալների կենտրոններ, StackPath- ն ունի 34+ տվյալների կենտրոններ որոնք մեծապես տեղակայված են Միացյալ Նահանգներում (որտեղ է գտնվում իմ այցելուների մեծ մասը). Cloudflare- ն ձեզ CDN URL չի հատկացնում այնպես որ մենք կօգտագործենք StackPath- ի CDN- ը պատկերները սպասարկելու համար.

StackPath- տվյալների կենտրոններ

Քայլ 1Ընտրեք CDN: ես օգտագործում եմ StackPath (նրանք ունեն 30-օրյա փորձաշրջան).

Քայլ 2Սեղանի վրա կտտացրեք CDN ներդիրը, այնուհետև Ստեղծեք StackPath CDN կայք

StackPath-CDN-Tab

StackPath-CDN- տիրույթ

CDN-URL-StackPath

Քայլ 3Պատճենեք ձեր CDN URL- ը և տեղադրեք այն ձեր քեշի հավելվածում (ստորև ներկայացված է WP Rocket- ի համար)…

WP-Rocket-CDN

Քայլ 4Փոխեք պատկերի URL- ները ՝ ձեր CDN URL- ն ընդգրկելու համար (օգտագործելով Ավելի լավ որոնում փոխարինեք).

Ավելի լավ որոնում փոխարինեք CDN URL- ին

Քայլ 5Ստուգեք հին պատկերի URL- ների օգտագործումը Chrome DevTools. Երբեմն ՝ ձեր քեշի հավելվածը կամ CDN Enabler հոգ է տանում այս մասին, բացառությամբ CSS- ի և JavaScript- ի հղումների, որոնք կոդավորված չեն: Հետևում մնացած հղումների համար դրանք սովորաբար գտնվում են ֆայլեր (ինչպիսիք են CSS- ը կամ Javascript- ը), որոնք անհրաժեշտ են ձեռքով ստուգում և փոխարինում: Chrome DevTools- ը ձեզ ցույց է տալիս ներկայումս օգտագործվող բոլոր տիրույթները.

Քայլ 6Գործարկել ձեր կայքը GTmetrix և «բովանդակության մատուցման ցանցը» պետք է լինի կանաչ YSlow- ում: Սխալներ չպետք է ունենաք նաև «նվազագույնի հասցնել վերահղումները» կամ «cookie- ի ազատ տիրույթները օգտագործելը».

CDN GTmetrix YSlow

8. Cache պատկերներ

Քեշի հավելվածների մեծամասնությունը ունի տարբերակ զննարկչի պահում, որը պահպանում է պատկերները: Ես օգտագործում եմ WP Rocket, որը գնահատվել է # 1 cache plugin- ը Facebook- ի բազմաթիվ հարցումներում, և ես դրա համար ձեռնարկ ունեմ. Swift Performance ընդհանուր առմամբ դասակարգվում է # 1 անվճար քեշի հավելվածը (դրա համար ես նույնպես ունեմ ձեռնարկ).

Զննարկչի պահում

9. Դարձրեք Favicon- ը փոքր և պահոցավոր

Համոզվեք, որ ձեր favicon- ը 16x16px է, favicon.ico ձևաչափն է, և պահվում է ձեր քեշի հավելվածի օգտագործմամբ:.

10. Հեռացրեք EXIF- ի տվյալները

Exif- ի տվյալները պարունակում է այնպիսի տեղեկություններ, ինչպիսիք են բացվածքը, փակման արագությունը, ISO- ն, կիզակետային երկարությունը, խցիկի մոդելը, լուսանկարը վերցնելու ամսաթիվը և այլն: Դա ձեզ հարկավոր չէ ձեր կայքում պատկերների համար: The VA- ի Exif plugin- ի հեռացում Պատկերները վերբեռնելուց հետո ինքնաբերաբար հեռացնում են Exif- ի տվյալները.

Պատկերի օպտիմիզացման հավելվածների մեծ մասը (ներառյալ Imagify, ShortPixel, Kraken, EWWW և Smush) ունեն EXIF ​​տվյալներն ինքնաբերաբար հեռացնելու տարբերակ: Ահա պարամետրերը Imagify…

Պատկերացրեք Հեռացրեք EXIF- ի տվյալները

11. Cloudflare պատկերի օպտիմիզացում

Cloudflare- ը նաև պատկերներ օպտիմիզացնելու մի քանի եղանակ ունի: Միրաժը և լեհերենը քո մեջ են Cloudflare- ի արագության կարգավորումները իսկ Hotlink- ի պաշտպանությունը գտնված է ձեր մեջ Scrape Shield- ի պարամետրերը.

Cloudflare Mirage (Pro Feature) – իջեցնում է պատկերի հարցումները, ծույլ բեռնվածքները պատկերները և բարելավում է պատկերի բեռնման ժամանակը բջջային սարքերում `դանդաղ ցանցային կապերով: Ահա ավելի մանրամասն…

  • Չափափոխում է պատկերները `այցելուի սարքի / կապի հիման վրա: Աղքատ կապի այցելուը կստանա ավելի փոքր տարբերակ (ավելի ցածր լուծում), քանի դեռ նրանք վերադառնան ավելի լայն թողունակության.
  • Նվազեցնում է հարցումների քանակը. Փոխարենը Mirage- ը վեբ-կայքի բոլոր պատկերների համար բազմաթիվ դիմումներ ուղարկելու փոխարեն, դա ուղղում է մեկ խնդրանքի, որպեսզի այցելուները կարողանան անմիջապես տեսնել պատկերները.
  • Ծույլ բեռների պատկերներ (դրանք բեռնում է միայն այն բանից հետո, երբ օգտվողները շրջվեն ներքև և իրականում տեսնեն պատկերը).

Cloudflare Image Mirage

Cloudflare լեհերեն (Pro առանձնահատկություն) – շերտավորում է EXIF ​​տվյալները և սեղմում պատկերները.

Cloudflare Image Լեհերեն

Cloudflare Hotlink պաշտպանություն – թույլ չի տալիս մարդկանց պատճենել ձեր նկարները և դրանք տեղադրել սեփական կայքում, ինչը (քանի որ դեռ պատկանում եք այդ պատկերի վրա) կթափի ձեր թողունակությունը.

Cloudflare Hotlink պաշտպանություն

12. Ծույլ բեռի պատկերներ

Սա ձգձգում է պատկերների բեռնումը մինչև օգտվողները շրջում են էջը ներքև և տեսանելիորեն տեսնում են պատկերը: Չնայած այն բարելավում է բեռի սկզբնական ժամանակը, անընդհատ պատկերները բեռնելը, երբ շարժվում եք, կարող է շատ նյարդայնացնել: Ես անձամբ միայն ծույլ բեռնված տեսանյութերն են, քանի որ դրանց վրա բեռնման շատ ավելի ժամանակ է պահանջվում, քան նկարները.

Դուք կարող եք օգտագործել Lazy Load plugin, Lazy Load For Videos plugin- ը, կամ օգտագործեք WP հրթիռ…

WP-Rocket-Lazy- բեռ

13. Պահպանեք որպես ճիշտ ձևաչափ

PNG- ն ընդդեմ JPEG- ի – PNG- ն սեղմված չէ (ֆայլի ավելի մեծ չափը) և պետք է օգտագործվի պարզ պատկերներում `առանց շատ գույների: JPEG- ը սեղմված է (ֆայլի փոքր չափը), որը փոքր-ինչ նվազեցնում է պատկերի որակը, բայց չափի փոքր չափերով և օգտագործվում է բազմաթիվ գույներով պատկերների մեջ: GIMP- ը և պատկերի խմբագրման այլ ծրագրերը պետք է ինքնաբերաբար օգտագործեն ճիշտ ձևաչափը, բայց դա դեռ լավ է իմանալ.

jpg_vs_png

Նկարազարդում Լաբնոլ

14. Պատկերային ֆայլերի անուններ

Որոնիչները օգտագործում են ինչպես alt տեքստի, այնպես էլ պատկերի ֆայլերի անուններ, ուստի անվանեք ձեր ֆայլերը WordPress- ում վերբեռնելուց առաջ: Եթե ​​դուք օգտագործում եք մի plugin ինքնաբերաբար ավելացնում է alt տեքստը հիմնվելով ֆայլի անվան վրա ՝ ձեր ֆայլերը անվանելն այն ամենն է, ինչ դուք պետք է անեք: Մի լրացրեք հիմնաբառեր, պարզապես նկարագրեք պատկերը.

Պիտակի պատկերի ֆայլերի անուններ

15. Alt տեքստ

Սրանք պետք է լինեն նույնը, ինչ ձեր պատկերի ֆայլի անվանումը: Դուք կարող եք օգտագործել Ավտոմատ պատկերի Alt հատկանիշների հավելված ֆայլի անունը ինքնաբերաբար օգտագործել որպես alt տեքստ: Քանի դեռ օգտագործում եք համապատասխան պատկերներ, դրանցից ոմանք, բնականաբար, պետք է ներառեն ձեր բանալի բառի (bits)… պատկերների մեջ հիմնաբառեր լրացնելու համար պատճառ չկա: հիմնաբառով լցոնման տուգանք.

Alt տեքստը ավտոմատ կերպով ավելացրեք նկարներին – օգտագործել Ավտոմատ պատկերի Alt հատկանիշների հավելված. Հիմա, երբ պատկեր ավելացնեք, plugin- ը կավելացնի alt տեքստ, որը նույնն է, ինչ ֆայլի անունը…

alt ="WP-Fastest-Cache-Plugin" լայնությունը ="577" բարձրություն ="247" />

Գտեք բացակայում է Alt տեքստը – Screaming Frog- ն անվճար գործիք է, որը ցույց է տալիս ձեզ, որ բոլոր տեքստերը բացակայում են բարձր տեքստով.

  • Ներբեռնեք Screaming Frog SEO Spider- ը
  • Մուտքագրեք ձեր վեբ կայքը և կտտացրեք «Սկսել» ՝ վեբ կայք սողալու համար
  • Կտտացրեք պատկերների ներդիրին
  • Գնալ ակնարկ → Alt Text- ը բացակայում է (տես ներքեւում)
  • Տեղադրեք այդ պատկերները ձեր կայքում և ավելացրեք alt տեքստ

Բացակայում է պատկերի Alt տեքստը - Գոռալով գորտ

16. Բաց գրաֆիկ (Facebook + Twitter)

Սա ձեր բովանդակության ձևաչափն է դարձնում պատշաճ կերպով, երբ համօգտագործվում է Facebook / Twitter- ում, մասնավորապես ձեր պատկերը, քանի որ երկու ցանցերն էլ այն ցուցադրելու համար օգտագործում են հատուկ չափեր, հակառակ դեպքում զվարճալի տեսք կունենա.

facebook-share

Եթե ​​օգտագործում եք Yoast- ը, անցեք «Սոցիալական» պարամետրերին և միացրեք «Բաց գրաֆիկը» ինչպես Facebook- ի, այնպես էլ Twitter- ի համար…

Yoast-Social-Meta-Data

Այժմ խմբագրեք էջը / գրառումը, այնուհետև կտտացրեք Yoast- ի «բաժնետիրական» հղումը և կտեսնեք ընտրանքներ ՝ Facebook- ի համար (1200 լայնություն x 628 բարձրություն) և Twitter- ի (1024 լայնություն x 512 բարձրություն) անձնական բեռնելու համար:.

yoast- սոցիալական-լրատվամիջոցների օպտիմիզացում

17. Նկարներ հանրաճանաչ հատվածներում

Հատուկ հատվածներ այն դեպքում, երբ Google- ը ցույց է տալիս ձեր բովանդակության կտորները որոնման արդյունքների վերին մասում և կարող է (բայց երաշխավորված չէ) ներառել պատկեր. Google- ը դրանք դուրս կբերի ցանկացած 1-ին էջի արդյունքից, Այնուամենայնիվ, նրանց համար մնում է, արդյոք նրանք կցուցադրեն նույնիսկ ցուցադրվող հատիկ կամ պատկեր: Դրանք նաև ստիպում են, որ ձեր հատվածը երկու անգամ ցուցադրվի և անհավատալի միջոց է շատ երթևեկություն ստանալու համար.

Հատուկ հատվածների 3 տեսակ

  • Պատասխանները
  • Սեղաններ
  • Ցուցակները

Featured-Image-Snippets

Ինչպե՞ս ձեռք բերել Google- ի հայտնի դիպուկներ

  • Թիրախավորել մի հիմնաբառ, որտեղ մարդիկ ցանկանում են a հակիրճ պատասխանել
  • Օգտագործել Moz Հիմնաբառը Explorer պարզել հարցի հիմնաբառերը
  • Օգտագործեք պատասխանը Հասարակությունը `նույնիսկ ավելի շատ հիմնաբառեր գտնելու համար
  • Ընտրեք, արդյոք պատասխանը պետք է լինի պարբերություն, ցուցակ կամ աղյուսակ
  • Նախագծեք գեղեցիկ գրաֆիկ (կամ լուսանկարեք), որը նկարագրում է հիմնաբառը
  • Օգտագործեք նիշի օպտիմալ երկարություն (տե՛ս ստորև վերցված լուսանկարը Մոզ)
  • Ստեղծեք փաստի վրա հիմնված բովանդակություն որակի հղումներով (հղումներ, գրաֆիկա և այլն)
  • Թիրախային հիմնաբառեր, որոնք արդեն ունեն ցուցադրված հատված, բայց կատարում են վատ աշխատանք
  • Եթե ​​նպատակ եք դնում պատասխան պատուհանի համար, թիրախավորեք ձեր հիմնաբառին `օգտագործելով ճշգրիտ համընկնում
  • Համոզվեք, որ 1-ին էջում եք հիմնաբառի համար, եթե ոչ, բարելավեք բովանդակությունը

Optimial Featured Snippets- ի երկարությունը

18. Կառուցվածքային տվյալներ

Նկարները կարող են օգտագործվել կառուցվածքային տվյալներ (և կրծքանշաններ) բովանդակության հետևյալ տեսակների համար.

Видео Հարուստ խայթոց

Բաղադրատոմս-հարուստ-հատվածներ

Ապրանք հարուստ խորտակ

Ինչ հարուստ հատվածների հավելվածը պետք է օգտագործեմ?
ես օգտագործում եմ MyThemeShop- ի WP Review Pro- ն (ահա մի էջ, որի վրա ես օգտագործում եմ), որն ապահովում է տվյալների 14 տեսակ ՝ ներառյալ բաղադրատոմսերը և ապրանքի ակնարկները: Ես նախկինում օգտագործում էի WP Rich Snippets- ը, բայց ծրագրավորողը հրաժարվեց plugin- ից, և այն չի թարմացվել 2+ տարի, և Բոլորը մեկ սխեմայի plugin- ում պարզապես ձանձրալի է (այն ունի ընտրանքների և ոճավորման պակաս): WP Review Pro- ն շատ հեշտ է օգտագործման համար.

19. Ոճային պատկերներ

Մի մոռացեք ոճավորել ձեր պատկերները: Ես ամենից շատ սահմաններ եմ օգտագործում.

  • Image վերնագրեր
  • Պատկերային հղումներ
  • Պատկերների սահմանները
  • Պատկերների վերնագրեր

20. Չափափոխել GIF- ները

Likeիշտ այնպես, ինչպես պատկերները չափափոխում եք ճիշտ չափսերի դեպքում, GIF- ները նույնպես պետք է չափափոխվեն (օգտագործեք GIF GIF).

Չափափոխել GIF- ը…

GIF- ի չափափոխում

Այնուհետև սեղմեք այն…

Սեղմեք GIF- ները

Արդյունքը 🙂

Օպտիմիզացրեք շների GIF- ը

21. Cache Gravatars

Եթե ​​ունեք շատ մեկնաբանություններ ունեցող գրառումներ, Gravatars կարող է ամբողջությամբ փչացնել ձեր զեկույցը: Կարող եք անջատել դրանք, մեկնաբանությունները կոտրել `միայն որոշակի քանակությամբ մեկնաբանություններ ցույց տալու համար կամ փորձել Gravatar քեշի հավելվածը: Հնարավոր է, դուք պետք է մի փոքր փորձարկում կատարեք, քանի որ որոշ plugins չեն աշխատում որոշ կայքերում.

  • Cache Gravatars (Օպտիմալ, Հարի, կամ FV Gravatar Cache)
  • Անջատեք Gravatars- ը ամբողջությամբ
  • Նախադրեք ձեր կանխադրված Gravatar- ը դատարկ
  • Deleteնջել մեկնաբանությունները, որոնք արժեք չեն ավելացնում
  • Նախադրեք ձեր լռելյայն Gravatar- ը ձեր սերվերի պատվերով պատկերի վրա
  • Սահմանափակեք ձեր Gravatar- ի նկարները փոքր չափերով (օրինակ, 32px)
  • WP մեկնաբանությունները WP- ում Անջատեք միայն միանգամից 20 մեկնաբանություն
  • Եթե ​​այս աշխատանքներից ոչ մեկը, ստուգեք WP Rocket’s caching Gravatars ձեռնարկը

Cache-Gravatar- Նկարներ

22. Խուսափեք արտաքին կայքերից պատկերներ տեղադրելուց

Միշտ պատկերները վերբեռնեք ձեր կայքում, երբեք դրանք պատճենեք / տեղադրեք: Հակառակ դեպքում դուք ավարտվում եք լրացուցիչ խնդրանքներով, քանի որ պատկերը ձեր սերվերում չկա: Այսպիսով, այն պետք է այն այլ տեղից քաշի.

23. Պատկերների օպտիմիզացման գործիքներ

Խուսափեք կրկնօրինակ ֆունկցիոնալությամբ plugins օգտագործելուց – Պատկերացրեք, ShortPixel- ը, Kraken- ը, EWWW- ը և Smush- ը, հիմնականում, նույն բանը անում են (կորուստային սեղմում, EXIF ​​տվյալների հեռացում, պատկերների չափափոխում): WP Rocket- ը ծույլ բեռնվածքի, պահպանումի և CDN- ի ընտրանքներ ունի (և տվյալների բազայի մաքրում + տեղական Google Analytics- ով տեղական հոսթինգ), որը քեշի հավելվածների մեծ մասը չունի, խնայելով ձեզ `հավելյալ plugin- ների օգտագործումից:.

  • Awesome Screenshot – Chrome ընդլայնում ՝ սքրինշոթեր վերցնելու համար.
  • Ավտոմատ պատկերի Alt հատկություններ – ինքնաբերաբար տեղադրում է alt տեքստը, օգտագործելով պատկերի ֆայլի անունը.
  • Ավելի լավ որոնում փոխարինեք – օգտագործել այն զանգվածային թարմացման պատկերներ.
  • Cloudflare – անվճար CDN ՝ 200+ տվյալների կենտրոններով, թեժ կապի պաշտպանություն, միրաժ, փայլեցում.
  • Chrome DevTools – ցույց է տալիս տիրույթները, որոնք օգտագործվում են, եթե ունեք GTmetrix վերահղման սխալներ.
  • CSS Sprite գեներատոր – անվճար գործիք `մի քանի պատկերներ CSS սպրիտի միավորման համար.
  • EWWW պատկերի օպտիմիզատոր – կորուստների կորուստ, EXIF- ի հեռացում, չափափոխում.
  • GifGifs – չափափոխում է GIF- ները.
  • GIMP – անվճար օգտագործող պատկերի խմբագրման ծրագրակազմ.
  • GTmetrix – ցույց է տալիս, թե որ պատկերները պետք է օպտիմիզացնել.
  • Պատկերացրեք – կորուստների կորուստ, EXIF- ի հեռացում, չափափոխում.
  • Անդեմություն – մեծացնում է մեծ պատկերը `GTmetrix- ում« սպասարկված մասշտաբային պատկերները »ամրագրելու համար.
  • Կրակեն – կորուստների կորուստ, EXIF- ի հեռացում, չափափոխում.
  • Ծույլ բեռ – plugin, որը հետաձգում է պատկերների բեռնումը մինչև դրանց տեսանելի դառնալը.
  • Ծույլ բեռը տեսանյութերի համար – plugin, որը հետաձգում է տեսանյութերի բեռնումը, մինչև դրանք տեսանելի կդառնան.
  • Gravatar- ի օպտիմալ քեշ – պահպանում է Gravatars (կամ փորձեք Harry’s Gravatar Cache- ը).
  • Screaming Frog SEO Spider- ը – գտնել բացակայող տեքստը, մետա նկարագրությունները և այլն.
  • ShortPixel – կորուստների կորուստ, EXIF- ի հեռացում, չափափոխում.
  • Ջարդել – կորուստների կորուստ, EXIF- ի հեռացում, չափափոխում.
  • StackPath – $ 10 / ամսական CDN ՝ 31 տվյալների կենտրոնով.
  • Swift Performance Lite – # 1 անվճար քեշի հավելված Facebook- ի հարցումների մեծ մասում.
  • WP ակնարկ – հարուստ կտորների հավելված (օգնում է ստանալ որոնման արդյունքներում ցուցադրվող պատկերներ).
  • WP հրթիռ – # 1 cache plugin- ը Facebook- ի հարցումների մեծ մասում.
  • VA- ն հանելով Exif- ը – նկարում է անտեղի տվյալներ նկարներից.
  • Մեծացնել  -Chrome- ի ընդլայնում ՝ էկրանի նկարներ ստանալիս կատարյալ մեծացնելու համար.
  • Yoast – հնարավորություն է տալիս Facebook / Twitter մետա տվյալները, որպեսզի պատկերները ճիշտ ձևակերպվեն, երբ դրանք բաժանվում են.

Հաճախակի տրվող հարցեր

&# x2705; Ինչպե՞ս եք օպտիմիզացնում պատկերի սխալները GTmetrix- ում?

Անհանգստորեն սեղմելով դրանք `օգտագործելով մի հավելյալ, ինչպիսին է ShortPixel- ը, Imagify- ը կամ Smush- ը: Ես օգտագործում եմ ShortPixel- ը, քանի որ այն միշտ շտկում է այս սխալը GTmetrix- ում.

&# x2705; Ինչպե՞ս եք GTmetrix- ում ֆիքսել Serve Scaled Image- ի սխալները?

Սա նշանակում է, որ դուք պետք է նկարներ / չափափոխեք չափերը ճիշտ չափերով: Եթե ​​պատկերները չափազանց մեծ են, GTmetrix- ը ցույց կտա սպասարկված պատկերների սխալները և կասի այն ճիշտ չափերը, որոնցով նրանք պետք է չափափոխվեն.

&# x2705; Ինչպե՞ս եք ֆիքսել GTmetrix- ում պատկերների չափման սխալները?

Դիտեք պատկերի HTML- ը և ստուգեք, որ այն ունի որոշակի լայնություն և բարձրություն, ինչպես ցույց է տրված այս ձեռնարկը.

&# x2705; Պատկերներն ավելի արագ բեռնելու համար ցանկացած այլ եղանակ?

EXIF- ի տվյալների հեռացումը և ձեր պատկերները սպասարկելու համար CDN օգտագործելը առավելագույն տարբերություն կստեղծեն GTmetrix- ի առաջարկություններից դուրս.

&# x2705; Որ պատկերի օպտիմիզացումը լավագույնն է?

Ես օգտագործում եմ ShortPixel- ը, քանի որ իրականում զրոյական կորուստ կա, և դա ամրագրում է GTmetrix- ում Optimize Images ապրանքը:.

Ինչ ես մտածում?
Ձեր GTmetrix- ի զեկույցը մի փոքր ավելի լավ է թվում: Տեղեկացնեմ մեկնաբանություններում: Եվ եթե ուզում եք ավելի շատ խորհուրդներ, որոնք ձեզ կստիպեն ավելի լավ միավորներ / բեռնման ժամանակներ, տեսեք իմ ամբողջ WordPress արագության ուղեցույցը.

Ուրախություն,
Թոմ

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Понравилась статья?
    Комментарии (0)
    Комментариев нет, будьте первым кто его оставит

    Комментарии закрыты.

    Adblock
    detector