![\"Viewport](\"https:\/\/lswp.store\/wp-content\/uploads\/2022\/07\/vpi.png\")
<\/p>\n<\/p>\n
LiteSpeed Cache v5.0 for WordPress is here, and along with it comes a new QUIC.cloud service: Viewport Images<\/strong>, also known as VPI!<\/p>\n VPI joins QUIC.cloud\u2019s other WordPress optimization services: Critical CSS<\/a> (CCSS), Unique CSS<\/a> (UCSS), Low-Quality Image Placeholders<\/a> (LQIP), and Image Optimization<\/a>.<\/p>\n The Viewport Images service was introduced as a way to improve user experience on lazy loading sites.<\/p>\n Do you have Lazy Load Images<\/strong> enabled for your website? If so, then you know that the transmission of each image is delayed until it is needed, loading as it scrolls into the viewport. This is mainly a good thing, because it saves bandwidth and improves your page\u2019s speed.<\/p>\n Lazy load\u2019s biggest flaw is in the treatment of above-the-fold imagery. That first screenful of content may have several gray boxes appearing where the images should be, for as long as it takes for the rest of the page\u2019s content to load. Depending on your site design, it may not give the best first impression to postpone image rendering.<\/p>\n The LiteSpeed Cache plugin has already provided a few handy ways to cope with this:<\/p>\n These remain viable options. But there will still be a few moments before all of the content has loaded, where placeholders are standing in for your imagery. No matter how nice those placeholders will be, it still means that your page may look somewhat incomplete.<\/p>\n In a perfect world, all images would be lazy loaded except for those that are already in the viewport when the page initially loads. Those images should be excluded from lazy loading. That is what VPI does.<\/p>\n The VPI service examines a URL, and determines which images are visible on a 1300×900 pixel screen for desktop views, and which images are visible on a 480×800 screen for mobile views. It returns a list of those images to the LiteSpeed plugin, and LiteSpeed then excludes them from lazy load next time it caches that URL.<\/p>\n The result is a page that is fully rendered above the fold, while every image below the fold continues to behave as before. Your site retains its good page speed score, while your human visitors enjoy a complete first screenful of content.<\/p>\n VPI is a QUIC.cloud service<\/a>. If you have never used any previous QUIC.cloud services for your domain, you will need to navigate to the General<\/strong> page of the LiteSpeed Cache plugin. On the General Settings<\/strong> tab, click the Request Domain Key<\/strong> button in the Domain Key<\/strong> setting, and wait a few minutes for it to generate.<\/p>\n Once you have your domain key, you are ready to start using VPI.<\/p>\nThe Lazy Load Problem<\/h2>\n
\n
The VPI Solution<\/h2>\n
The QUIC.cloud Connection<\/h2>\n
![\"VPI](\"https:\/\/lswp.store\/wp-content\/uploads\/2022\/07\/vpi2.png\")
<\/p>\n![\"VPI](\"https:\/\/lswp.store\/wp-content\/uploads\/2022\/07\/vpi2a-1024x686.png\")
<\/p>\n![\"LiteSpeed](\"https:\/\/lswp.store\/wp-content\/uploads\/2022\/07\/vpi3a.png\")
<\/p>\n![\"Dashboard](\"https:\/\/lswp.store\/wp-content\/uploads\/2022\/07\/vpi4.png\")
<\/p>\n![\"Dashboard](\"https:\/\/lswp.store\/wp-content\/uploads\/2022\/07\/vpi5.png\")
<\/p>\n