Website Optimization and Lazy Loading
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.
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:
- Minimize website loading time
- Website take less memory to load
- To avoid un-necessary database call
- On demand page execution
- 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.
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.
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