Website Optimization and Lazy Loading

By 25 August 2020 No Comments

Website Optimization and Lazy Loading

Sharing is caring!

What is Lazy Loading?

Lazy loading is a technique of delaying the loading of certain resources until after the initial page has been rendered. With fewer render-blocking resources, the first paint of the screen is delivered faster, resulting in a faster experience for the user.

As the user scrolls down the page, resources are loaded in dynamically only when they are needed. Effectively, we are splitting the loading of the page and only ever loading the assets that are needed.

How it Works?

The browser builds the web page DOM without downloading images and pre-loading videos.
JavaScript is used to determine which images to download and which videos to pre-load based on the content that is initially visible when the page loads. Those images and videos are downloaded and pre-loaded as appropriate.
Downloading and rendering of additional videos are delayed until a site visitor scrolls down the page and additional content comes into view.

Advantages of website lazy loading:

  1. Minimize website loading time
  2. Website take less memory to load
  3. To avoid un-necessary database call
  4. On demand page execution
  5. Its cost effective approach because optimize time and resources

Tips for Optimizing Website’s Speed

Use a CDN (Content Delivery Network)

Hosting your media files on a content delivery network is one of the best ways to speed up your site, and can often save up to 60% bandwidth and halve the number of requests your website makes.

Use best hosting server

As any web hosting expert will tell you, is “it depends”. After all, we have different needs depending on our circumstances. Businesses requirements, for example, are different from an individual website.
most popular categories of web hosting available including shared, business, VPS, WordPress, cloud Hosting and email hosting.

Minimize HTTP requests(RRTs) and remove unused scripts/files

RRTs(Round Trip Times) is the time taken for the client to send a request and the serer to respond. It’s affected by a large number of request sent to server.

To reduce the number of requests,use less images, minify and combine javascript and css files.

Use Browser caching

When an end-user visits a website, the users’ browser downloads the static content (images, etc.) of the website so that it may be displayed to the end-user. This content is stored in browser local cache for a certain amount of time, specified by the “max-age” value of the origin server’s Cache-Control header. When the contents max-age is reached, it is purged from the browser local cache on the user’s computer and will need to be fetched from the website’s origin (or CDN if cached) the next time the user browses to the site.

Compress images and optimize files

By picking the right image format, you can optimize file sizes without losing image quality. For example, unless you need the image transparency (alpha layers) that the PNG format has to offer, the JPG format often displays photographic images at smaller file sizes.

6.Load JavaScript at the End of Your Document

It’s best if you have your scripts loading at the end of the page rather than at the beginning. It allows for the browser to render everything before getting started with the JavaScript.

Minify your CSS and JS files

minifying involves deleting white space and making your files smaller

Don’t use @import in css

@import uses up more resource than directly linking to your stylesheets despite achieving the exact same result. Another reason why not to use @import is that some of the older browsers do not support it, so it’s best to avoid it where possible.

Put CSS at the top and JS at the bottom

It’s considered best practice to put your CSS as close to the top of your page as possible, as browsers won’t render your page before rendering the CSS file. Javascript, on the other hand, should be as close to the bottom as possible, since it prevents browsers from parsing after the tag before it is loaded and complete.

Leave a Reply

Get started with Bloom