Paano ipagpaliban ang mga offscreen na imahe sa WordPress

Alam nating lahat na ang bilis ay napakahalaga para sa SEO at conversion. Ang paggawa ng isang website nang mabilis ay makakatulong sa website na iyon na mas mataas ang ranggo sa Google. At ito rin ay makapagpapasaya sa iyong mga mambabasa. Sino ang hindi gusto ng isang mabilis na website?

Ngunit kapag sinusubukang i-optimize ang isang website para sa bilis, maaari itong magtagal sa napakaraming bagay na dapat gawin. Karaniwan kong sinusubukan paminsan-minsan upang subukan ang aking website at matiyak na hindi ito gumaganap nang masama. Hindi mo alam kung ano ang bago doon. Sa mundo ng SEO, madalas na nagbabago ang mga bagay.

Kung nasuri mo na ang iyong website gamit ang mga tool sa pagsubok ng bilis tulad ng Google PageSpeed ​​Insight o Web.dev, isa sa mga babala na maaari mong matanggap ay ang "ipagpaliban ang mga larawan sa labas ng screen."

Sa artikulong ito, ipapaliwanag ko kung ano ang ibig sabihin nito, sasabihin sa iyo kung paano ayusin ito, at magrekomenda ng mga plugin na magagamit mo upang ayusin ito.

Gayunpaman, dapat mong malaman kung bakit ang pagpapaliban ng mga larawan sa labas ng screen ay maaaring mapalakas ang bilis ng iyong mobile, ang pinakamahalagang salik na nakakaapekto sa iyong bilis ay ang iyong hosting at tema. Dito sa BloggingTools, ginagamit namin ang Cloudways dahil ito ang pinakamabilis na WordPress hosting. Kung hindi mo kayang bayaran ang Cloudways, ang Bluehost o Hostinger ay magagandang opsyon. Para sa Tema, ginagamit namin ang pinakamabilis na WordPress theme na kilala bilang GeneratePress.

Ano ang ibig sabihin ng defer offscreen na mga larawan?

Upang ipagpaliban ang mga offscreen na larawan ay nangangahulugan ng pagkaantala sa pag-load ng mga larawang hindi pa nakikita ng user. Gagawin nitong tumuon ang browser sa paglo-load lamang ng kung ano ang kinakailangan at sa huli ay gagawing mas mabilis ang website.

Kung marami kang larawan sa iyong mga post o home page, kapag binisita ng isang user ang iyong site, agad na magsisimulang i-load ng browser ang lahat. Kung marami ang mga larawan, maaaring tumagal iyon ng maraming oras upang mai-render ang page sa user.

Ngunit kapag ipinagpaliban mo ang mga larawang nasa labas ng screen, maglo-load lang ang mga larawan kapag nag-scroll dito ang user.

Tandaan na hindi lamang mga larawan ang maaari mong ipagpaliban, ngunit ang karamihan sa iyong mga asset ng website ay maaari ding ipagpaliban hanggang sa kailanganin ang mga ito.

Paano ipagpaliban ang mga offscreen na imahe sa WordPress

Maaari mong ipagpaliban ang mga offscreen na larawan sa pamamagitan ng tamad na pag-load ng mga larawan. Ang tamad na pag-load ay titiyakin na ang mga larawan ay maglo-load lamang kapag kailangan ang mga ito. Ito naman ay gagawing mas mabilis ang website.

Kapag nagawa mong tamad na mag-load ng mga larawan at iba pang mga asset na pumipigil sa iyong page sa mabilis na pag-load. Ang "ipagpaliban ang mga larawan sa labas ng screen" mula sa Google PageSpeed ​​​​Insight at iba pang mga tool sa pagsubok ay mawawala.

Sundin ang mga hakbang na ito upang ipagpaliban ang mga offscreen na larawan sa WordPress:

1. Mag-install ng Lazy loading plugin

Mayroong maraming mga tamad na naglo-load ng mga plugin na magagamit nang libre sa direktoryo ng WordPress plugin. Maaari kang pumunta sa Plugin, magdagdag ng bago pagkatapos ay i-type ang lazy loading. I-install ang sinumang may magagandang review.

Ngunit hindi mo kailangang mag-install ng anumang plugin kung mayroon ka nang mga plugin na kayang humawak ng tamad na pag-load. Karamihan sa mga plugin ng caching ay may tamad na paglo-load. Suriin ang iyong caching plugin para sa tamad na mga opsyon sa paglo-load. Ang mga plugin ng pag-optimize ng imahe ay kadalasang may tamad na opsyon sa pag-load.

Gayundin kung gumagamit ka ng Jetpack at autoptimize, mayroon silang tamad na mga pagpipilian sa pag-load.

2. I-activate ang mga opsyon sa lazy loading

Kapag na-install mo na ang plugin, tiyaking na-activate mo ang opsyon sa lazy loading. Kung mayroon kang cache plugin na may isang tamad na pag-load ng function, tiyaking i-activate mo ang opsyong iyon.

3. I-clear ang iyong cache.

Kapag na-activate na ang lazy loading, i-clear ang iyong cache at iyon lang!

Maaari mong subukan muli ang iyong site, ang babala ay dapat na wala na!

Ipagpaliban ang mga larawan sa labas ng screen na WordPress plugin

Ang mga plugin ng defer offsreen na mga imahe ay kapareho ng mga plugin ng tamad na naglo-load. Narito ang ilan sa ibaba:

1. jetpack

Ang Jetpack ay isa sa mga pinakasikat na WordPress plugin na may mahigit 5 ​​milyong aktibong pag-install. Kung naka-install ka na ng Jetpack, hindi mo na kailangang mag-install ng karagdagang plugin para sa lazy loading.

I-activate lang ang lazy loading sa Jetpack. Upang i-activate, pumunta sa mga setting ng Jetpack pagkatapos ay sa ilalim ng tab ng pagganap, mag-scroll pababa at paganahin ang lazy loading.

2. I-autooptimize

Ang Autoptimize ay isang napakasikat na performance plugin. Kung gumagamit ka ng Autoptimize, hindi mo na kailangang mag-install ng lazy loading plugin dahil mayroon din itong parehong feature.

Pumunta sa mga setting ng Autoptimize pagkatapos ay mag-click sa tab na mga imahe at paganahin ang Lazy loading.

3. WP Rocket

Ang WP Rocket ang pinakasikat na premium na WordPress caching plugin. Kung gagamit ka ng WP Rocket, hindi mo na kakailanganin ng ibang plugin, mayroon silang naka-enable na lazy loading.

Pumunta sa mga setting ng WP Rocket pagkatapos ay mag-click sa media, mula doon maaari mong paganahin ang tamad na pag-load.

4. LiteSpeed ​​​​Cache

Kung gumagamit ka ng LiteSpeed ​​Cache plugin , mayroon itong feature na lazing loading. Para ma-activate, pumunta lang sa seksyon ng media, at doon mo maaaring paganahin ang lazy loading.

5. a3 Lazy Load

Kung kailangan mo lang ng plugin para sa Lazy loading, magandang plugin ang a3 Lazy Load para diyan. Pumunta lang sa plugin > add new. Hanapin ang a3 Lazy Load. I-install at i-activate. Pagkatapos, pumunta sa mga setting ng plugin at i-activate ang lazy loading.

Sa pangkalahatan, ang ilang tema, ilang cache plugin, at ilang image optimization plugin ay may kasamang lazy loading feature.

Frequently Asked Questions (FAQ)