Ինչպե՞ս Lazy Load Նկարներ + Տեսանյութեր WordPress- ում (և YouTube iFrames- ը փոխարինեք նախնական պատկերով) Ավելի լավ GTmetrix արդյունքների համար

Ո՞րն է դրա լավագույն միջոցը ծույլ բեռնվածքի պատկերներ և տեսանյութեր WordPress- ում?


Դա կախված է նրանից, թե դուք արդեն օգտագործում եք քեշի հավելված, որն ապահովում է ծույլ բեռնումը (WP Rocket, W3 Total Cache, Swift, LiteSpeed ​​Cache): Եթե ​​ձեր քեշի հավելվածը աջակցում է ծույլ բեռնման պատկերներ և տեսանյութեր, ապա ամենալավն այն օգտագործելն է, որպեսզի խուսափեք լրացուցիչ plugin- ի տեղադրումից: Բայց եթե ձեր քեշի plugin- ը չի ապահովում ծույլ բեռնումը, ես խորհուրդ եմ տալիս օգտագործել այն, ինչն անում է (հատկապես WP Rocket), հակառակ դեպքում ես թվարկեցի այլընտրանքային ծույլ ծովային հավելումներ, որոնց ներքևում կարող եք տեղադրել անհատապես.

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

Ի՞նչ է նշանակում YouTube Iframe- ը փոխարինել նախադիտման պատկերով?
Եթե ​​ձեր WordPress կայքում տեղադրեք տեսանյութեր, սա միայն բեռնում է «ճարպ YouTube նվագարկիչը», երբ մարդիկ կտտացնում են Play կոճակը: Այլ կերպ ասած, սկզբում բեռնված միակ բանը նախադիտման պատկեր է.

Պետք է ծուլացնել պատկերներն ու տեսանյութերը?
Ես ծույլ չեմ բեռնում պատկերները, քանի որ անընդհատ պատկերները բեռնելը, քանի որ էջը պտտվում ես ներքևում, կարող է վրդովեցուցիչ լինել օգտվողների համար: Այնուամենայնիվ, իմ բոլոր պատկերները GTmetrix- ում 100% օպտիմիզացված են: Ես ծույլ բեռնվածքի տեսանյութեր եմ պատրաստում և iframe- ն փոխարինում եմ նախադիտման պատկերով: Քանի որ ներկառուցված յուրաքանչյուր տեսանյութ կարող է տևել 2 վայրկյան (շատ ավելի ծանր է, քան նկարը), նշանակալի է բեռնաթափվող տեսանյութերի օգուտը.

1. WP հրթիռ

WP Rocket- ը ծույլ բեռնման համար իմ # 1 ընտրությունն էր և ֆեյսբուքյան հարցումներում # 1 քեշի հավելվածն էր.

Քանի որ այն արդեն ներկառուցված է ծույլ ծովային բեռնվածությամբ, սա նշանակում է, որ հարկ չկա լրացուցիչ plugin տեղադրել: WP Rocket- ի ամբողջ օգուտը. այն գալիս է ավելի շատ հնարավորություններով, քան գրեթե ցանկացած այլ cache plugin- ով (որի արդյունքում ավելի լավ է լինում բեռնման ժամերը և GTmetrix- ի միավորները), բայց ավելի քիչ հավելվածները ձեր կայքում: WP հրթիռը լայն է փաստաթղթեր ծույլ բեռնման վրա և կարգավորել WP հրթիռի կարգավորումները.

WP հրթիռ

Ինչպես միացնել WP հրթիռում ծույլ բեռը
WP Rocket- ում ծույլ բեռնումը միացնելու համար անցեք Կարգավորումներ > WP հրթիռ > ԶԼՄ-ներ > LazyLoad. Դուք կարող եք այն միացնել պատկերների, iframe- ի և տեսանյութերի համար և YouTube iframes- ը փոխարինել նախադիտման պատկերով.

Lazy Load Pictures WP հրթիռ

2. SG օպտիմիզատոր

SiteGround ներդրվեց ծույլ բեռնվածություն իրենց մեծ թարմացման մեջ SG օպտիմիզատոր.

Իհարկե, դուք պետք է լինեք SiteGround հաճախորդ, որպեսզի օգտագործեք այս plugin- ը (ինչը ես կանեի ընդհանուր համացանցային հոսթինգի համար, հաշվի առնելով, որ Facebook- ի ավելի քան 20 հարցումներում նրանք գնահատվել են թիվ 1 հյուրընկալողը): SG Optimizer- ը համեմատելի է WP Rocket- ի հետ, բայց այն գրեթե նույնքան հատկություններ չունի: Այսպիսով, եթե դուք օգտագործում եք SiteGround- ը ձեր հյուրընկալողի համար, ես դեռ կողմ կլինեի WP Rocket- ին իրենց SG Optimizer- ի նկատմամբ.

SiteGround SG օպտիմիզատոր

Ինչպես միացնել ծույլ բեռը SG Optimizer- ում
SG Optimizer- ում ծույլ բեռնումը միացնելու համար անցեք Պարամետրեր > SG օպտիմիզատոր > Կայքի կանխադրված կանխավճարներով > Պատկերի օպտիմիզացում. Դուք կարող եք ծույլ բեռնվածքի պատկերներ, Gravatars, մանրապատկերներ, արձագանքող պատկերներ և ֆայլեր: Եթե ​​ձեր բլոգում մեկնաբանություններ ունեք, ծովային բեռնված Gravatars- ը կարող է հսկայական օգնել.

SG Optimizer Lazy Loading

3. W3 ընդհանուր քեշ

Եթե ​​արդեն օգտագործում եք W3 Total Cache- ը, դրանք ունեն նաև a ծույլ բեռնման տարբերակ.

W3 Total Cache- ը որոշ ժամանակ լքված համարվեց, բայց ծրագրավորողն այդ ժամանակվանից սկսել է պահպանել իր plugin- ը: Ես ունեմ ընդարձակ ձեռնարկ ՝ W3 Total Cache- ի պարամետրերը կազմաձևելու համար.

W3 Total Cache plugin

Ինչպես միացնել ծույլ բեռը W3 ընդհանուր քեշում
W3 Total Cache- ում բեռնումը հնարավոր դարձնելու համար անցեք Պարամետրեր > Ընդհանուր պարամետրեր > Օգտվողի փորձ > Ծույլ բեռնումը: Միացրեք այս, ապա անցեք Օգտագործողի փորձին > Ծույլ բեռնումը: Ընտրեք մշակել HTML պատկերի պիտակներ, ֆոնային պատկերներ, բառեր բացառել և գրերի տեղադրման մեթոդ.

W3 Ընդհանուր պահոցային ծույլ բեռնումը

4. Litespeed քեշ

Litepseed cache- ը ծույլ բեռնում կկատարի նաև գործը (Litespeed- ը լավ է վերանայված քեշի հավելվածով).

LiteSpeed ​​Cache Plugin

Ինչպես միացնել ծույլ բեռը LiteSpeed ​​cache- ում
LiteSpeed ​​Cache- ում բեռնման բեռնումը միացնելու համար անցեք LiteSpeed ​​Cache > Կարգավորումներ > ԶԼՄ-ներ > Մեդիա պարամետրերը. Այստեղ կարող եք միացնել ծույլ ծննդյան պատկերները, iframes- ը, բացառել պատկերները, ինքնաբերաբար պահանջել օպտիմիզացիա cron- ի միջոցով, ներառել Javascript- ի գրադարանը շարադրված և այլ պարամետրերը միացնել:.

Lazy Load Նկարներ Videos Litespeed Cache

5. Արագ կատարումը

Swift Performance մեկ այլ cache plugin- ն է, որն աջակցում է ծույլ բեռնմանը: Սվիֆթը հիանալի ակնարկներ է ստացել WordPress Speed ​​Up- ի Facebook Group- ում, բայց WordPress plugin- ի էջի վերաբերյալ ակնարկները ընդամենը 4 աստղ են: Ես չեմ փորձել Swift Performance- ը; Ես հիանալի ուրախ եմ WP Rocket- ով.

Swift Performance Lite plugin

Ինչպես միացնել ծույլ բեռը արագ կատարման մեջ
Swift Performance- ում բեռնման բեռնումը միացնելու համար անցեք Կարգավորումներ > ԶԼՄ-ներ > Ծույլ բեռ. Այստեղ դուք կունենաք տարբերակ `ծույլ բեռի պատկերներ, բացառելու որոշակի պատկերներ և ներխուժել ծույլ բեռնվածքի պատկերներ.

Ծույլ բեռի պատկերներ Արագ կատարումը

6. Ինքնիշխանացում

Autoptimize- ը հաճախ օգտագործվում է GoDaddy- ի և WP Engine- ի նման հյուրընկալողների հետ, որտեղ նրանք ունեն իրենց ներկառուցված պահոցավորման համակարգը և սև ցուցակի քեշի հավելումներ. Այս դեպքում (քանի որ ուզում եք հոգ տանել արագության այլ օպտիմիզացման մասին), Autoptimize- ը սովորաբար դրա համար հավելված է: Դրա շատ առանձնահատկություններից մեկն է ծույլ բեռնում, բայց նաև հնարավորություն է տալիս օպտիմիզացնել HTML, CSS, JavaScript և Google տառատեսակները.

Ավտոմատացված plugin

Ինչպես միացնել ծույլ բեռը ինքնավստահության մեջ
Autoptimize- ում բեռնման բեռնումը միացնելու համար անցեք Կարգավորումներ > Նկարներ > Ծույլ բեռի պատկերներ: Դուք նաև հնարավորություն ունեք օգտագործել ShortPixel- ի CDN- ն, որը պատկերի օպտիմիզացման համար (սա այն հավելվածն է, որը ես օգտագործում եմ).

Ծույլ բեռնվածքի պատկերներն ինքնաբնորոշվում են

7. Ծխել

Smush- ը պատկերի օպտիմիզացման հավելված է աջակցում է ծույլ բեռնմանը. Այն մշակվել է WPMU- ի կողմից, բայց ես անձամբ օգտագործում եմ ShortPixel` առանց կորստի սեղմման համար, քանի որ այն միակն է, որը ես օգտագործել եմ, որը GTmetrix- ում իմ պատկերները դարձնում է 100% (և ես փորձարկել եմ շատ պատկերի օպտիմիզացման հավելվածներ).

Smush plugin

Ինչպես միացնել ծույլ ծխախոտը ծխում
Smush- ում բեռնումը հնարավոր դարձնելու համար անցեք Smush > Գրասեղան > Ծույլ բեռ: Դուք կարող եք ընտրել, թե որ ֆայլերի տեսակներն եք ուզում ծույլ բեռնված (.jpeg, png, .gif, .svg, iframe), և արդյոք ուզում եք, որ այն միացված լինի բովանդակության, հարմարանքների, մանրապատկերների, Gravatars- ի համար: Այն նույնիսկ ունի ծույլ բեռնվածքի անիմացիայի պարամետրեր.

Smush Ծույլ բեռ

8. Lazy Load By WP հրթիռ

Lazy Load By WP հրթիռ լավ է, եթե դուք չեք օգտագործում WP Rocket, բայց ցանկանում եք ծույլ քաշել պատկերները.

Ծույլ բեռի Plugin

Ինչպե՞ս WP հրթիռով միացնել ծույլ ծանրաբեռնվածությունը
Անցեք Կարգավորումներ > LazyLoad. Դուք հնարավորություն ունեք ծույլ բեռնվածքի պատկերներ, iframes & տեսանյութեր և փոխարինեք YouTube տեսանյութերը մանրապատկերով: Կարգավորելու շատ կարգավորումներ չկան. Ես անձամբ կցանկանայի, որ ավելին լինեն: Գուցե դա է պատճառը, որ այս ծույլ ծայրահեղ հավելումը չունի լավագույն ակնարկներ.

Lazy Load By WP հրթիռ

9. A3 Ծույլ բեռ

A3 Ծույլ բեռ օժանդակում է ծույլ բեռնումը ինչպես պատկերների, այնպես էլ տեսանյութերի.

a3 Ծույլ բեռի Plugin

Ինչպե՞ս միացնել ծույլ բեռը A3 ծույլ բեռնվածքում
A3 Lazy Load- ում բեռնումը հնարավոր դարձնելու համար անցեք կարգավորումներ > A3 Ծույլ բեռ: Կարող եք կարգաբերել պարամետրերի բեռնման ծույլ պատկերներ, տեսանյութեր, iframes, Gravatars և ընտրել ձեր կայքի որ ոլորտները, որոնք ցանկանում եք դիմել ծույլ բեռնման համար (ներառյալ բջջայինը): Գոյություն ունեն նաև ծույլ բեռնման էֆեկտը հնարավոր դարձնելու, ֆոնի գույնի բեռնման և URL- ների և գրառման տեսակները բացառելու տարբերակը.

a3 Ծույլ բեռի պարամետրերը

10. BJ Ծույլ բեռ

BJ Ծույլ բեռ կարծես լավ պահպանված չէ, ուստի ես, հավանաբար, կօգտագործեմ ևս մեկ plugin.

BJ Lazy Load plugin

Ինչպես միացնել BJ Lazy Load- ում ծույլ բեռը
BJ Lazy Load- ում բեռնումը բեռնաթափելու համար միացեք Պարամետրեր > BJ Ծույլ բեռ: Պարամետրերը համեմատաբար պարզ են և հնարավորություն են տալիս ծույլ բեռնվածքի պատկերներ, iframes, Gravatars և ծովային բեռնումը բացառել բովանդակությունից, տեքստային ֆայլերից և հաղորդագրություններից: Կա նաև տարբերակ `տեղապահի պատկերն ընդգրկելու, դիտման նախաշեմը և ցածր ծավալի նախադիտման պատկեր օգտագործելու ժամանակ ծույլ լինելիս.

BJ Ծույլ բեռի պարամետրերը

11. Նկարների համար ծույլ բեռ

Պատկերների համար ծույլ բեռ լավ է, եթե ցանկանում եք դա անել միայն պատկերների համար.

Lazy Load for պատկերների հավելվածը

Ինչպես միացնել ծույլ բեռնվածքը պատկերների համար
«Lazy Load For Images» plugin- ում կազմաձևելու համար կարգավորումներ չկան (դա ինքնաբերական է).

12. Տեսանյութերի համար ծույլ բեռ

Ծույլ բեռը տեսանյութերի համար ներկառուցված տեսանյութերը փոխարինում է նախադիտման ենթակա կտտտոցներով.

Ծույլ բեռը տեսանյութերի Plugin- ի համար

Ինչպե՞ս կարելի է տեսանյութերի համար ստեղծել ծույլ բեռ
Տեսանյութերի Lazy Load- ում բեռնումը հնարավոր դարձնելու համար անցեք Կարգավորումներ > Ծույլ բեռը տեսանյութերի համար: Անհրաժեշտության դեպքում ընտրեք CSS / JS բեռը, հարմարեցնել նվագարկման կոճակը և կիրառել սովորական CSS.

Ծույլ բեռը Videos Plugin- ի համար

13. մեկնաբանությունների համար ծույլ բեռ

Կարող եք ծույլ բեռնված մեկնաբանություններ թողնել ՝ օգտագործելով Ծույլ բեռ մեկնաբանությունների համար միացնել.

Սա կարող է օգնել ավելի քիչ HTTP- ներ պահանջելու հարցում, եթե ձեր բլոգում շատ մեկնաբանություններ ունեք, մանավանդ, որ Gravatars- ը կարող է երկար ժամանակ տևել երրորդ կողմի բոլոր հայցերի միջև:.

Ծույլ բեռ մեկնաբանությունների հավելվածի համար

Ինչպե՞ս միացնել ծույլ բեռը մեկնաբանությունների համար
Մեկնաբանությունների համար Lazy Load- ում բեռնումը հնարավոր դարձնելու համար անցեք Պարամետրեր > Քննարկում > Ծույլ բեռի մեկնաբանությունները. Դա այս plugin- ի միակ պարամետրային կազմաձևն է, բայց այն ունի լավ ակնարկներ.

Ծույլ բեռի մեկնաբանությունները

14. WP YouTube Lyte

WP YouTube Lyte ծույլ բեռնման տեսանյութերի իմ սիրած (և լավագույն վերանայված) հավելանյութերից մեկն է: Այն ստեղծվել է թիմի կողմից Autoptimize- ում, որը հակված է ունենալ լավ plugin ակնարկներ ամբողջ շրջանում.

WP YouTube Lyte plugin

Ինչպես միացնել ծույլ բեռը WP YouTube Lyte- ում
WP YouTube Lyte- ում բեռնումը բեռնելու համար միացրեք «Կարգավորումներ» > WP YouTube Lyte: Ձեռք բերեք ձեր YouTube API բանալին և մուտքագրեք այն Autoptimize: Ընտրեք ձեր նվագարկչի չափը ՝ ներառյալ հղումները, նվագարկչի դիրքը, ուժը HD, գործեք որպես նորմալ YouTube հղում / iframes և ավելացրեք միկրոդատա: Տեղի մանրապատկերների պահպանումը հաճախ կարող է ուղղել GTmetrix- ի սխալները YouTube տեսանյութերը տեղադրելու ժամանակ.

YouTube մանրուքներ GTmetrix

Wp YouTube Lyte- ի կարգավորումներ

Դեռ օգնության կարիքը կա?

Ես հիանալի տեսանյութ ունեմ WordPress- ի արագության օպտիմիզացիայի վերաբերյալ.

Ես նաև նկարներ օպտիմիզացնելու, WP հրթիռը կազմաձևելու, սերվերի արձագանքման ժամանակները իջեցնելու և այլնի ձեռնարկներ: Ես կարող եմ ստանալ 100% (կամ մոտ) GTmetrix միավորներ իմ գրառումների գրեթե յուրաքանչյուրի վրա ՝ օգտագործելով այս խորհուրդները: Եթե ​​հարցեր ունեք, ազատ զգացեք ինձ մեկնաբանություն թողնելու համար – ուրախ եմ օգնել!

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

&# x2705; Որ հավելվածն ամենալավն է ծույլ բեռնման պատկերների համար?

Եթե ​​դուք արդեն օգտագործում եք քեշի հավելված, որն ապահովում է ծույլ բեռը (օրինակ ՝ WP Rocket, SG Optimizer, W3TC, Swift, LiteSpeed), ապա ամենալավն այն է, որ նախ փորձեք սա: Հակառակ դեպքում, WP Rocket- ի Autoptimize- ը կամ Lazy Load plugin- ը լավ ծույլ բեռի հավելումներ են.

&# x2705; Ինչ վերաբերում է ծույլ բեռնման տեսանյութերին?

WP Rocket- ը և cache- ի մի քանի այլ plugin- ներ թույլ են տալիս ծույլ բեռնված տեսանյութեր տեղադրել և YouTube iframe- ը փոխարինել նախադիտման պատկերով: Հակառակ դեպքում WP YouTube Lyte- ը կաշխատի.

&# x2705; Ծույլ բեռնումը վնասելու է օգտագործողի փորձին?

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

&# x2705; Ինչ է անում ծույլ բեռնումը?

Ծույլ բեռնումը արագացնում է բեռի սկզբնական ժամանակը `սպասելով պատկերներ և տեսանյութեր բեռնելու, մինչև օգտվողները կցանկանան էջը ներքև և իրականում տեսնեն դրանք.

&# x2705; Ինչպե՞ս անջատել ծույլ բեռը հատուկ էջերում?

Plugin- ների մեծ մասը թույլ է տալիս դա անել: Օրինակ, եթե դուք օգտագործում եք WP Rocket և խմբագրում եք էջ կամ հաղորդագրություն, ձեր վահանակում կտեսնեք տարբերակ ՝ անջատելու (կամ միացնելու) ծույլ բեռը տվյալ բովանդակության հատուկ մասի վրա.

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

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