{"id":6320,"date":"2024-04-18T19:31:00","date_gmt":"2024-04-19T00:31:00","guid":{"rendered":"https:\/\/www.ragesw.com\/blog\/?p=6320"},"modified":"2024-04-16T04:22:19","modified_gmt":"2024-04-16T09:22:19","slug":"get-faster-loading-pages-with-lazy-loading-in-everweb-4-1","status":"publish","type":"post","link":"https:\/\/www.ragesw.com\/blog\/2024\/04\/18\/get-faster-loading-pages-with-lazy-loading-in-everweb-4-1\/","title":{"rendered":"Get Faster Loading Pages with Lazy Loading in EverWeb 4.1!"},"content":{"rendered":"\n<div class=\"wp-block-cover is-light\"><span aria-hidden=\"true\" class=\"wp-block-cover__background has-background-dim-0 has-background-dim\"><\/span><img loading=\"lazy\" decoding=\"async\" width=\"1000\" height=\"790\" class=\"wp-block-cover__image-background wp-image-6444\" alt=\"Lazy Loading for faster page loading in EverWeb 4.1\" src=\"https:\/\/www.ragesw.com\/blog\/wp-content\/uploads\/2024\/04\/fast-page-website.png\" style=\"object-position:41% 45%\" data-object-fit=\"cover\" data-object-position=\"41% 45%\" srcset=\"https:\/\/www.ragesw.com\/blog\/wp-content\/uploads\/2024\/04\/fast-page-website.png 1000w, https:\/\/www.ragesw.com\/blog\/wp-content\/uploads\/2024\/04\/fast-page-website-300x237.png 300w, https:\/\/www.ragesw.com\/blog\/wp-content\/uploads\/2024\/04\/fast-page-website-768x607.png 768w\" sizes=\"auto, (max-width: 1000px) 100vw, 1000px\" \/><div class=\"wp-block-cover__inner-container is-layout-constrained wp-block-cover-is-layout-constrained\">\n<p class=\"has-text-align-center has-large-font-size\"><\/p>\n<\/div><\/div>\n\n\n\n<p>If you want to improve your website&#8217;s page loading times, <a href=\"https:\/\/www.ragesw.com\/blog\/2024\/03\/14\/new-video-backgrounds-and-updated-page-backgrounds-in-everweb-4-1\/\" target=\"_blank\" rel=\"noopener\" title=\"NEW Video Backgrounds and Updated Page Backgrounds in EverWeb 4.1!\">EverWeb 4.1<\/a> is just for you! Our new release introduces two new features to <a href=\"https:\/\/www.everwebapp.com\" target=\"_blank\" rel=\"noopener\" title=\"\">EverWeb<\/a> that will dramatically improve the time it takes for your site&#8217;s pages to load in a browser: Lazy Loading and WebP format support. We looked at the latter, <a href=\"https:\/\/www.ragesw.com\/blog\/2024\/02\/15\/why-use-everwebs-new-webp-format-everything-you-need-to-know\/\" target=\"_blank\" rel=\"noopener\" title=\"Why Use EverWeb\u2019s New WebP Format? Everything You Need To Know!\">WebP format<\/a>, in a previous blog post, so now we turn our attention to the new Lazy Loading feature.<\/p>\n\n\n\n<div style=\"height:19px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">What Is Lazy Loading?<\/h2>\n\n\n\n<p>Usually when a web page loads in a browser, all of its content is loaded at that time. This can cause page loading times to become very slow, especially if you have a lot of large images on the page, or if your page uses other media content that takes time and resources to load. Slow loading pages can deter your visitors from remaining on the page until it loads. As such you increase the potential for visitors to click away from your site.  <\/p>\n\n\n\n<p>To solve this problem, lazy loading was developed as a way to help improve page loading times. Typically, lazy loading is usually applied to images on the page, but it is possible to apply lazy loading  to other resource intensive content as well.  <\/p>\n\n\n\n<p>When a page that uses lazy loading is loaded, only the content that is necessary for the user to interact with is displayed.  Any other content that is not displayed, or needed at the current time, will be loaded on demand as the visitor scrolls the page.<\/p>\n\n\n\n<div style=\"height:19px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">How To Use Lazy Loading in Your Site<\/h2>\n\n\n\n<p>In EverWeb 4.1, or higher, you can apply lazy loading to images on your pages. Simply select the image you want to lazy load, then go to the Shape Options tab and check the &#8216;Lazy Load Image&#8217; checkbox. That is all that is required, so super easy!<\/p>\n\n\n\n<p>Once you have check marked all of the images in your site&#8217;s pages that you want to lazy load, publish your website and see the difference it makes when your site loads in to a browser window.<\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">The Benefits of Lazy Loading Images<\/h2>\n\n\n\n<p>There are a number of benefits gained by using lazy loading in your site:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Faster Initial Page Load:<\/strong> By deferring the loading of non-essential elements, lazy loading reduces the initial page load time, allowing users to access the core content more quickly.<\/li>\n\n\n\n<li><strong>Improved Performance:<\/strong> Lazy loading helps improve overall website performance by minimizing the amount of data transferred and reducing the server&#8217;s workload.<\/li>\n\n\n\n<li><strong>Bandwidth Savings:<\/strong> Users may not view the entire page, so lazy loading helps save bandwidth by loading only the content that users actually interact with.<\/li>\n\n\n\n<li><strong>Better User Experience:<\/strong> Users get a smoother experience as they navigate the page since the browser loads content progressively as needed, rather than waiting for all resources to load before displaying anything.<\/li>\n<\/ol>\n\n\n\n<p>Lazy loading is especially beneficial for pages with a large amount of media content, such as image-heavy websites or pages with embedded videos. However, it may not be necessary, or suitable, to use it on every page of your site. As always, it is important to first think about the requirements of your website and your site&#8217;s visitors.<\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Other Ways to Improve Your Website&#8217;s Page Load Speeds<\/h2>\n\n\n\n<p>In addition to Lazy Loading images on your site&#8217;s pages, there are a number of other ways in which you can improve your page speed loading times:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Use <a href=\"https:\/\/www.ragesw.com\/blog\/2024\/02\/15\/why-use-everwebs-new-webp-format-everything-you-need-to-know\/\" target=\"_blank\" rel=\"noopener\" title=\"Why Use EverWeb\u2019s New WebP Format? Everything You Need To Know!\">WebP Format<\/a> when publishing your website. The size of the image will be reduced, but image quality should still be good.<\/li>\n\n\n\n<li><strong>Other Image Optimization Techniques<\/strong>: Use image compression software to strip the image file of data that is not needed without losing image quality. You may also find benefit in reducing the image&#8217;s dimensions and additionally, you may benefit by changing the image file&#8217;s file format from e.g. PNG to JPEG.<\/li>\n\n\n\n<li><strong>Minimize HTTP Requests<\/strong>: By reducing the number of elements on your web pages, such as images and any scripts or code you may have you can tweak your page load times.<\/li>\n\n\n\n<li><strong>Enable Gzip Compression<\/strong>: If you are using <a href=\"https:\/\/www.ragesw.com\/blog\/2022\/02\/16\/everweb-site-shield-addon-adds-awesome-new-security-features\/\" target=\"_blank\" rel=\"noopener\" title=\"EverWeb Site Shield Adds Awesome New Security Features!\">EverWeb Site Shield Addon<\/a>, Gzip compression is automatically enabled for you on the server side reducing the size of HTML, CSS, and JavaScript files before they are sent over the internet. This reduces bandwidth usage and speeds up loading times.<\/li>\n\n\n\n<li>Use less resources on your page. The simpler your page is in structure, the faster it will load.<\/li>\n<\/ol>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>Using a combination of readily available tools, in EverWeb itself, with EverWeb addons and external tools, you will easily be able to improve your page load speed times.<\/p>\n\n\n\n<p>If you have any questions about page loading times, or about EverWeb in general, please let us know in the Comments Section below. We&#8217;re happy to help!<\/p>\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\">\n<h2 class=\"wp-block-heading\">EverWeb on Social Media<\/h2>\n\n\n\n<p>You can also find EverWeb&nbsp;on&nbsp;the following social media platforms:<\/p>\n\n\n\n<p><a href=\"https:\/\/www.facebook.com\/everwebapp\/\" target=\"_blank\" rel=\"noreferrer noopener\">Facebook<\/a><\/p>\n\n\n\n<p><a href=\"https:\/\/flipboard.com\/@everweb\/everweb-m8efhguby\" target=\"_blank\" rel=\"noreferrer noopener\">Flipboard<\/a><\/p>\n\n\n\n<p><a href=\"https:\/\/www.youtube.com\/channel\/UCSse-zNlNxTyo7g8JwuVzOg\" target=\"_blank\" rel=\"noopener\" title=\"\">YouTube<\/a><\/p>\n\n\n\n<p><a href=\"https:\/\/x.com\/everwebapp\" target=\"_blank\" rel=\"noopener\" title=\"\"> X<\/a><\/p>\n\n\n\n<p><a rel=\"noreferrer noopener\" href=\"https:\/\/www.instagram.com\/everwebapp\/\" target=\"_blank\">Instagram<\/a><a rel=\"noreferrer noopener\" href=\"https:\/\/www.facebook.com\/everwebapp\/\" target=\"_blank\"><\/a><br><\/p>\n<\/div><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Faster page loading should be a goal for anyone building a website. With EverWeb, you&#8217;ve got some great easy to use tools to help your pages load super quick on any device. Find out more in our blog post!<\/p>\n","protected":false},"author":844,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[252,247,2,11,8],"tags":[949,946,936,964,966,937],"class_list":["post-6320","post","type-post","status-publish","format-standard","hentry","category-everweb-software","category-everweb","category-software","category-web-site-optimization","category-web-site-promotion","tag-best-mac-website-builder-2024","tag-best-windows-website-builder-2024","tag-everweb-4-1","tag-fast-page-loading","tag-gzip","tag-lazy-loading"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.ragesw.com\/blog\/wp-json\/wp\/v2\/posts\/6320","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.ragesw.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.ragesw.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.ragesw.com\/blog\/wp-json\/wp\/v2\/users\/844"}],"replies":[{"embeddable":true,"href":"https:\/\/www.ragesw.com\/blog\/wp-json\/wp\/v2\/comments?post=6320"}],"version-history":[{"count":10,"href":"https:\/\/www.ragesw.com\/blog\/wp-json\/wp\/v2\/posts\/6320\/revisions"}],"predecessor-version":[{"id":6449,"href":"https:\/\/www.ragesw.com\/blog\/wp-json\/wp\/v2\/posts\/6320\/revisions\/6449"}],"wp:attachment":[{"href":"https:\/\/www.ragesw.com\/blog\/wp-json\/wp\/v2\/media?parent=6320"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.ragesw.com\/blog\/wp-json\/wp\/v2\/categories?post=6320"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.ragesw.com\/blog\/wp-json\/wp\/v2\/tags?post=6320"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}