4. How to minimize request size?
When a visitor loads your web page in their browser all files are loaded like, css, js, images, etc. Such a file is requested and it creates an additional request for the browser to process. All these requests are considered as HTTP requests. If there are more requests then the browser stops responding, as it has to wait for the unprocessed files to load until it’s done with loading the previous files, creating a load delay. So during speed optimization you may pay attention to reduce the http requests.
You can use below tools to check the http requests of your website:
These tools will help to check how many requests your web pages make. You can also see which type of requests your web pages make (images, css files, etc..)
You can use the below given solution to reduce the server requests.
Use of Lazy Loading: When a user visits your website, the entire page’s content is downloaded, if the site web page contains more images or content then it will take time to load. For Example, if your web page contains 100 or more images then instead of loading all the images at one time we can add images in lazy loading and load only required images on page scrolling.
If a page loads all the data of a user requested page then the server takes more time to load as there many requests are generated by the server to load user requested data. If you use Lazy loading to load the requested data then it helps to minimize the server requests. Instead of loading all of the images at one time, images can be loaded when the user accesses a part of the page that requires it. With lazy loading, we can load on screen images first and on scrolling of pages load remaining images so that we can reduce the site load and make it fast.
Minify CSS/JS files – Your site contains multiple CSS/JS files so rather than forcing the browser to retrieve from multiple css/js files you can combine into a one larger css file and same for the js files. Minify CSS/JS allows you to merge all CSS/JS files to one file. Doing this step you can to reduce the size of CSS/JS files and it resulted into reducing the CSS/JS requests. When the browser retrieves multiple css/js files then more server requests are generated and takes more load time to load the user requested data. So by combinIng css/js files requests get reduced and loads data faster.
Reduce the size of images you use – If you are using higher resolution images then this will negatively impact on website speed, specially when users access your website on mobile devices. Solution for this to reduce the size of images you use or optimize images. There are online tools available to optimize images or you can use Photoshop to optimize images.
Use sprites images – If you use more images separately then more server requests are generated and it will slow down your website. You can use the sprite images to reduce the requests related to images. Instead of using a seperate images icons on header like social icons, mini cart icon, my account icon, search icon. You can use the sprite image and add all these icons in a single image and use that.
Remove unnecessary shopify apps – If any app is not in use or inactive then remove these apps from the site. It will help to minimize the requests and boost site speed. Because apps can add a lot of js or css and because of these pages weights are more and it slows down the website.