{"id":6462,"date":"2021-10-28T19:39:59","date_gmt":"2021-10-28T19:39:59","guid":{"rendered":"https:\/\/www.s-sols.com\/?post_type=doc&#038;p=6462"},"modified":"2022-09-07T16:49:37","modified_gmt":"2022-09-07T16:49:37","slug":"images-and-frames-lazy-loading-accel","status":"publish","type":"doc","link":"https:\/\/www.s-sols.com\/docs\/wordpress\/accelerator\/how-does-it-work-accel\/images-and-frames-lazy-loading-accel","title":{"rendered":"Lean lazy loading images and videos Accelerator for WordPress"},"content":{"rendered":"<p style=\"text-align:justify\">\n  As SEO<span style=\"font-size:12pt\"> <\/span>experience shows, having a video has a very good effect on the time that users spend on pages. And beautiful pictures make viewing more pleasant. But this should not negatively affect the download speed of the content.\n<\/p>\n<ul>\n<li>\n<div style=\"text-align:justify\"><a id=\"lazy_load_img\"><\/a><strong>Lazy loading images<\/strong>\n    <\/div>\n<p style=\"text-align:justify\">\n      It is implemented with the addition of an inline transparent image of the same size, so that when loading there are no &#8220;jumps&#8221; of elements, which has a positive effect on the <a href=\"https:\/\/web.dev\/cls\" rel=\"nofollow noopener\" target=\"_blank\">Cumulative indicator Layout Shift (CLS)<\/a>. The approach itself mainly affects <a href=\"https:\/\/web.dev\/lighthouse-largest-contentful-paint\/\" rel=\"nofollow noopener\" target=\"_blank\">Largest Contentful Paint (LCP)<\/a> and <a href=\"https:\/\/web.dev\/first-contentful-paint\/\" rel=\"nofollow noopener\" target=\"_blank\">First Contentful Paint (FCP)<\/a>.\n    <\/p>\n<\/li>\n<li>\n<div style=\"text-align:justify\"><strong>Lazy loading videos and frames<\/strong>\n    <\/div>\n<p style=\"text-align:justify\">\n      It is very important for optimization because frames (especially video) immediately load a large number of scripts, which immediately significantly reduces the speed indicator down by about 25-30 points, affecting <a href=\"https:\/\/googlechrome.github.io\/lighthouse\/scorecalc\/\" rel=\"nofollow noopener\" target=\"_blank\">all indicators<\/a>, except perhaps <a href=\"https:\/\/web.dev\/cls\/\" rel=\"nofollow noopener\" target=\"_blank\">Cumulative Layout Shift (CLS)<\/a>.\u00a0It&#8217;s implemented\u00a0in such a way that the injection of a replaceable quick block does not break the markup of the original page, unlike other plugins. Also, the replacement block itself, containing the video preview picture, is also loaded via the <a href=\"#lazy_load_img\">lazy loading of images<\/a> described above.\n    <\/p>\n<\/li>\n<li>\n<div style=\"text-align:justify\"><strong>Embedding small images<\/strong>\n    <\/div>\n<p style=\"text-align:justify\">\n      By default, images less than 2KB are embedded in<span style=\"font-size:12pt\"> <\/span>HTML and<span style=\"font-size:12pt\"> <\/span>CSS. This makes loading them as fast as possible. Configurable <a href=\".\/settings-images-accel#general\">here<\/a>.\n    <\/p>\n<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>As SEO experience shows, having a video has a very good effect on the time that users spend on pages. And beautiful pictures make viewing more pleasant. But this should not negatively affect the download speed of the content. Lazy loading images It is implemented with the addition of an inline transparent image of the&#8230;<\/p>\n","protected":false},"author":18,"featured_media":0,"parent":6456,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"","meta":{"rank_math_lock_modified_date":false},"categories":[816],"tags":[163,870,871,165,818,869,154,689,872,692,92],"class_list":["post-6462","doc","type-doc","status-publish","hentry","category-accelerator","tag-cache","tag-css","tag-javascript","tag-minify","tag-optimize","tag-pagespeed","tag-performance","tag-plugin","tag-site","tag-speed","tag-wordpress"],"_links":{"self":[{"href":"https:\/\/www.s-sols.com\/api\/wp\/v2\/doc\/6462","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.s-sols.com\/api\/wp\/v2\/doc"}],"about":[{"href":"https:\/\/www.s-sols.com\/api\/wp\/v2\/types\/doc"}],"author":[{"embeddable":true,"href":"https:\/\/www.s-sols.com\/api\/wp\/v2\/users\/18"}],"replies":[{"embeddable":true,"href":"https:\/\/www.s-sols.com\/api\/wp\/v2\/comments?post=6462"}],"up":[{"embeddable":true,"href":"https:\/\/www.s-sols.com\/api\/wp\/v2\/doc\/6456"}],"wp:attachment":[{"href":"https:\/\/www.s-sols.com\/api\/wp\/v2\/media?parent=6462"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.s-sols.com\/api\/wp\/v2\/categories?post=6462"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.s-sols.com\/api\/wp\/v2\/tags?post=6462"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}