④ Image Optimization: Image has a big impact on the loading time of the site. So all the images on the site should be optimized. This can be done in two ways. One, optimizing the image and uploading it to the site, and two, optimizing when uploading the image to the site using plug-ins.
WP Smush can be used for plug-ins.
Images can be optimized before uploading to the site with Adobe Photoshop, GIMP, etc. software. The width of the image should be consistent with the width of the site. For example, if the width of the site is 570px, then the image should be brought to the same width. The image format should be JPEG.
⑤ Removing Render-blocking JavaScript and CSS from Above-the-Fold Content: When a browser loads a website, JavaScript and CSS resources usually prevent the site from displaying until they themselves are being downloaded.
Some resources must first be downloaded and processed before anything can be displayed. However, some CSS and JavaScript resources play no role in above-the-fold Content rendering. So you should eliminate all render-blocking CSS and JavaScript.
We can get the above results by loading JavaScript asynchronously. For this, we need a free plug-in Async JavaScript.
After installing, go to Settings and enable Async JavaScript.
Then Async the Async JavaScript Method.
Defer jQuery.
Enable Autoptimize Support in Async JavaScript For Plugins and Defer jQuery Method.
Async JavaScript Setting > Save
⑥ Optimize CSS Delivery: You can do this easily with the Autoptimize plugin.
Install and activate the Autoptimize plugin.
Go to Autoptimize Settings from Settings.
Select Show advanced setting.
Select Optimize HTML Code from HTML Options.
Select Optimize JavaScript Code and Also aggregate inline JS from JavaScript Options.
Select Optimize CSS Code, Remove Google Fonts, and Also aggregate inline CSS from CSS Options.
Click Save and empty cache.
The only thing left to do here is to activate “Inline and Defer CSS”. To activate it, we need to generate Critical Path CSS. To find out, right-click anywhere on your site and view the page source. You will get the CSS file of your page at the beginning of the page. Get the file in the format – http: //yoursite.com /…/ auto-optimize …
Select and copy all the contents of the site’s CSS file. Now go to Critical Path CSS Generator and paste your site name and copied CSS content and click create Critical Path CSS button. Your above-the-fold CSS is now created.
Copy it and go to Autoptimize Settings and check-in Inline and Defer CSS of CSS Options and paste above the fold CSS in the blank space next to it. Save and come out.
⑦ Leverage Browser Caching: We can do this in two ways. One, cache-control header, and two expire header. However, anyone method should be used. The cache-control header is the new method and it is usually the recommended method.