Боркунии аслии танбал барои Тасвирҳои Wordpress

Мундариҷа

• Боркунии ватанӣ Lazy-Loading чист?
• Навсозии моҳи марти соли 2020 (Аввал хонед!)
• Васлкунаки модарии Lazyload
• 1. Ба тасвирҳо ва замимаҳои барҷаста хусусияти боркунии танбал илова кунед
• 2. Илова кардани хусусияти танбал ба тасвирҳои нав дар дохили постҳо
• 3. Боркунии танбал барои тасвирҳои мавҷуда дар постҳо
• Алтернативаи осонтар барои ҳама тасвирҳо дар постҳо
• 4. Боркунии танбал барои аватарҳои шарҳдиҳанда
• 5. Lazy Loading Youtube Videos
• Тафтиши такмил

Боркунии ватанӣ Lazy-Loading чист?

Вақте ки браузер веб-саҳифаро мекушояд, он одатан ҳар як тасвирро дар он бор мекунад, ҳатто ҳатто аз майдони намоён ё равзанаи намоиш хеле дуртар. Баъзе меҳмонон ҳеҷ гоҳ наметавонанд ба поён саҳифа ҳаракат кунанд, яъне маънои паҳнои банд барои бор кардани ин тасвирҳои нонамоён зоеъ меравад.

Дар ҷустуҷӯи доимии интернети тезтар, таҳиягарон роҳҳои оқилонаи ба таъхир андохтани боркунии тасвирҳоро берун аз намуди намоиш то он даме, ки корбар дар назди онҳо ҳаракат кунад, пешниҳод карданд. Бо вуҷуди ин, ҳамаи ин ҳалли масъалаҳо JavaScript-ро талаб мекарданд, ки он изофаи худро илова мекунад ва тасвирҳоро барои онҳое, ки бо JavaScript-и маъюбон паймоиш мекунанд, комилан вайрон мекунад.

Бо омадани Chrome 76 вазъ тағир ёфт. Аз он версия, браузерҳои аз Chrome ва Chromium ҳосилшуда боркунии танбалро дастгирӣ мекунанд. Шумо бояд танҳо як атрибутро ба тегҳои тасвири худ илова кунед:

img src = "cutecat.webp" loading = "танбал" />

Ин хеле содда аст. Ва агар браузери дигар атрибути навро ҳоло дастгирӣ накунад, тасвирҳо ба таври муқаррарӣ бор карда мешаванд, ҳеҷ осебе нарасонанд.

Ҳоло ман ба шумо мегӯям, ки чӣ гуна ин хусусиятҳоро ба тасвирҳои худ дар Wordpress ба таври худкор илова кунед (қисми бештар).

Навсозии моҳи марти соли 2020 (Аввал хонед!)

Аз замони навиштани ин мақола таҳаввулоти ҷолибе ба амал омадаанд. Боркунии тасвири ватанӣ танбал ба як ҷузъи расмии расмии HTML табдил ёфтааст. Дастгирии браузер беҳтар шудааст. Ва шояд аз ҳама муҳим, боркунии танбалии ватанӣ ба версияи 5.5 ба WordPress core якҷоя карда шавад.

Дар ибораи амалӣ, ин маънои онро дорад пас аз ворид шудани версияи WP 5.5, ҳеҷ як кӯшиши иловагӣ ба шумо лозим намешавад дар моҳи августи соли 2020. То он вақт, шумо метавонед боркунии танбалии ватаниро бо истифодаи тағиротҳои дар зер тавсифшуда санҷед. Танҳо дар хотир доред, ки эй дар тӯли якчанд моҳ аҳамиятнопазир хоҳад шуд (ва барои ин).

Васлкунаки модарии Lazyload

1. Ба тасвирҳо ва замимаҳои барҷаста хусусияти боркунии танбал илова кунед

Илова кардани боркунӣ = "танбал" хосият ба тасвирҳои барҷаста (қаблан ангуштдонаҳои пост меномиданд), галереяҳо ва тасвирҳо дар саҳифаҳои замима бо истифода аз wp_get_attachment_image_attributes қалмоқе. Танҳо рамзи зеринро ба мавзӯи худ нусхабардорӣ кунед вазифаҳо.php файл:

add_filter ('wp_get_attachment_image_attributes', 'add_lazy_load', 10, 3); function add_lazy_load ($ attr, $ attachment, $ size) {if (! array_key_exists ('loading', $ attr)) {$ attr ['loading'] = 'танбал'; } return $ attr; }

Шаъну шараф ба аккис дар Маълумоти Кодекси Wordpress барои ин пора.

Шумо метавонед тасдиқ кунед, ки ин кор тавассути тафтиши рамзи сарчашмаи тасвир ё саҳифаи замима дар сайти шумо:

2. Илова кардани хусусияти танбал ба тасвирҳои нав дар дохили постҳо

Рамзи дар боло овардашуда ба тасвирҳои ягонаи тавассути муҳаррири почта иловашуда таъсир намерасонад. Барои он ки ман истифода кардам image_send_to_editor қалмоқе, ки дар зер нишон дода шудааст. Онро ба вазифаҳо.php мисли пештара.

add_filter ('image_send_to_editor', 'lazyloading', 10, 8); function lazyloading ($ html) {$ html = str_replace ('/>', 'loading = "lazy" />', $ html); баргардонидани $ html; }

Он чизе, ки ин амал мекунад, танҳо дар боркунӣ = "танбал" аттрибутӣ ҳангоми гузоштани тасвир ба пост тавассути "Илова кардани медиа". Вақте ки шумо ба "Матн" дар Муҳаррири Классикӣ мегузаред ё се нуқтаро клик мекунед ва пас дар Гутенберг "Таҳрир ҳамчун HTML" -ро мебинед, шумо дар ин сатр чизеро мебинед:

3. Боркунии танбал барои тасвирҳои мавҷуда дар постҳо

Барои мубориза бо тасвирҳои мавҷуда дар паёмҳои кӯҳнаи Wordpress, ман аслан дар бораи чизи оқилтаре аз ҷустуҷӯ ва иваз кардани оддӣ фикр карда наметавонам. (Агар шумо фикри беҳтаре дошта бошед, лутфан онро дар шарҳҳо мубодила кунед!) Ин шояд чандон зебо ба назар намерасад ва он рамзҳоро сахт месозад боркунӣ = "танбал" атрибутӣ ба паёмҳо, аммо он танҳо як маротиба иҷро карда мешавад.

Бо ин мақсад, ман як плагинро бо номи Better Search Replace on my истифода кардам wp_post ҷадвали зерин:

Алтернативаи осонтар барои ҳама тасвирҳо дар постҳо

Аммо биёед бигӯед, ки шумо як плагини хуби кэшро истифода мекунед, то арзиши ҷустуҷӯ тавассути матни паём бо ҳар як бори саҳифа татбиқ нашавад. Дар ин ҳолат шумо метавонед истифода баред мундариҷа филтр барои ҷустуҷӯи ҳар як пост барои барчаспҳои тасвир ва дар атрибутӣ боркунии танбал ҳангоми парвоз. Танҳо функсияи зеринро ба худ илова кунед вазифаҳо.php файл:

add_filter ('the_content', 'lazy_load_images'); функсияи lazy_load_images ($ content) {if (is_single () && in_the_loop () && is_main_query ()) {$ content = str_replace ('/>', 'loading = "lazy" />', $ content); } баргардонидани $ мундариҷа; }

Агар шумо ин равишро истифода баред, шумо метавонед қадамҳои 2 ва 3-ро гузаред, зеро ин функсия ба таври худкор илова мекунад боркунӣ = "танбал" хосият ба ҳар як тасвир дар ҳар як мансаби.

4. Боркунии танбал барои аватарҳои шарҳдиҳанда

Шарҳҳо одатан дар поёни саҳифа ҷойгиранд, бинобар ин аватарҳои корбар барои боркунии танбал ҳадафи хуб мебошанд. Шумо метавонед ин филтрро дар худ истифода баред вазифаҳо.php:

add_filter ('get_avatar', 'lazyavatar', 1, 1); function lazyavatar ($ avatar) {$ avatar = str_replace ('img', 'img loading = "lazy"', $ avatar); баргардонидани $ avatar; }

Ё, агар мавзӯъатон бозгашти шарҳи фармоиширо истифода барад, шумо метавонед онро пайдо кунед get_avatar () фаъолият ва илова кунед боркунӣ = "танбал" ба он тавассути изофӣ_атт параметр.

Агар шумо як системаи тафсири муосиртаре ба монанди Disqus истифода баред, ин зарур нест.

5. Lazy Loading Youtube Videos

Як чизе, ки ман то ҳол нагуфтаам, ин аст, ки боркунии танбалро ба ифрамаҳо низ татбиқ кардан мумкин аст. Вақте ки шумо пайвандеро ба видео дар Youtube (ё сайти дигари дастгиришаванда) часпонед, Wordpress онро ба таври худкор ба ифрама табдил медиҳад, то онро дар пости худ ҷойгир кунед. Барои он ки онро танбал бор кунад, мо метавонем embed_oembed_html ба таври зерин филтр кунед:

function lazyoutube ($ html) {$ html = str_replace ('iframe', 'iframe loading = "lazy"', $ html); $ html = 'div class = "video-container">'. $ html. '/ div>'; баргардонидани $ html; } add_filter ('embed_oembed_html', 'lazyoutube', 10, 1);

Тафтиши такмил

Якчанд роҳҳои санҷидани боркунии танбал кор мекунанд. Осонтаринаш кушодани вебсайти худ дар версияи охирини Chrome, оташ задани абзорҳои Developer (Ctrl + Shift + I) ва гузаштан ба ҷадвали Шабака аст. Ба саҳифаи дароз бо тасвирҳои зиёд гузаред ва ба поён ҳаракат кунед. Шумо бояд бубинед, ки тасвирҳо дар поёни дуртарин то даме ки ба поён ҳаракат кунед, бор намешаванд.

Агар тасвирҳо фавран бор карда шаванд, ба ташвиш наафтед! Ҳадде, ки Chrome тасвирро бор мекунад, аз омилҳои гуногун, аз ҷумла суръати пайвастшавӣ вобаста аст. Ба таври латифа, масофа назар ба ҳалли асоси JavaScript хеле баландтар ба назар мерасад, бинобар ин шумо метавонед мехоҳед як дар ҳақиқат саҳифаи дароз барои санҷиш.

Усули алтернативӣ ин оғоз кардани Аудит тавассути ҳамон асбобҳои таҳиягар ё истифодаи озмоиши ба саҳифаҳои PageSpeed ​​Insights асосёфта мебошад. Паёми "Тасвирҳои берун аз экранро ба таъхир андозед" -ро ҷустуҷӯ кунед, ки дар қисмати "Имкониятҳо" дар ҳолати иҷро нашуданаш пайдо мешавад ва дар бахши "Аудитҳои гузаронидашуда", агар боркунии танбал кор карда бошад.