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 ang iyong website sa pamamagitan ng mga tool sa pagsubok ng bilis tulad ng Google PageSpeed ​​​​Insight o Web.dev, isa sa mga babala na maaari mong makuha ay ang "ipagpaliban ang mga offscreen na larawan."

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 na kung bakit ang pagpapaliban sa mga larawan sa labas ng screen ay maaaring mapalakas ang iyong bilis sa mobile, ang pinakamahalagang salik na nakakaapekto sa iyong bilis ay ang iyong pagho-host at tema. Dito sa BloggingTools, ginagamit namin Cloudways dahil ito ang pinakamabilis na pagho-host ng WordPress. Kung hindi mo kayang bayaran ang Cloudways kung gayon ang Bluehost o Hostinger ay mahusay na mga pagpipilian. Para sa Tema, ginagamit namin ang pinakamabilis na tema ng WordPress 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

Jetpack ay isa sa pinakasikat na plugin ng WordPress na may higit sa 5 milyong aktibong pag-install. Kung mayroon ka nang naka-install na Jetpack, hindi mo kailangang mag-install ng karagdagang plugin para sa tamad na pag-load.

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

Autoptimize ay isang napaka-tanyag na plugin ng pagganap. Kung gumagamit ka ng Autoptimize, hindi na kailangang mag-install ng lazy loading plugin dahil may parehong feature ang Autoptimize.

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

3. WP Rocket

WP Rocket ay ang pinakasikat na premium WordPress caching plugin. Kung gumagamit ka ng WP Rocket, hindi mo na kailangan ng anumang iba pang plugin, mayroon silang tamad na pag-load na pinagana.

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 ginagamit mo ang LiteSpeed ​​​​Cache plugin, Mayroon itong tampok na nakakatamad sa paglo-load. Upang i-activate, mag-navigate lang sa seksyon ng media, at doon mo paganahin ang tamad na pag-load.

5. a3 Lazy Load

Kung kailangan mo lang ng isang plugin para sa Lazy loading nang mag-isa a3 Lazy Load ay isang magandang plugin para doon. Pumunta lang sa plugin > magdagdag ng bago. Maghanap ng a3 Lazy Load. I-install at i-activate. Pagkatapos ay 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)