Website Speed really matters. According to Google PageSpeed Lighthouse If your website first content paint isn't under 1 sec then it is considered as slow. Your website speed also affects your SEO . Visitors always prefer fast website speed. You can test your website speed at Google Pagespeed insights tools . What should you do if your website is not getting fast speed . It may be due to heavy coding or if you're using wordpress website then it may be due to Heavy plugins and themes. But now the question is how to optimize your website and achieve good speed at google pagespeed insights ? .
What is Google PageSpeed Insights ?
It is a tools which is used for testing website speed . PageSpeed Insights (PSI) display the performance of a website page on both mobile and desktop devices, and provides suggestions on how that page may be improved.
How to Optimize your Custom Website ?
Website Optimization is a most important thing for developers. If you're using a custom website then it is very easy to optimize your website and runs faster at Google PageSpeed Insights . Just Follow the steps below and test your website :
- Minify HTML
- Lazyload all Images
- Preload all fonts and css
- Use .Webp images instead of .jpg or .PNG
- Don't use inline Js and CSS (if possible)
- Use Cdn Network Like Cloudflare or keyCdn
- Code your Jquery
- Don't use more than 800 DOM elements
Defer is a attribute of HTML . It specifies that the script is excuted after page the loading. It can simply boosts your website speed.
How to Lazyload all images ?
Lazyload image means loading images on website asynchronously- that is, after the above-the-fold content material is fully loaded, or even conditionally, handiest when they appear within the browser’s viewport. Which means that if users don’t scroll all of the way down, picture placed at the lowest of the web page won’t even be loaded.
<iframe src="content.html" loading="lazy"></iframe>
Preload all fonts and css
To preload fonts you'll need to add some code to <head> section of website. This technique definitely will boost your website performance and speed. You most commonly use
<link> to load a CSS file to style your page with:
<link rel="stylesheet" href="styles/main.css">
Here however, you can use a
rel value of
preload, which turns
<link> into a preloader for any resource you want.
<link rel="preload" href="style.css" as="style"
How to Optimize Wordpress Website ?
WordPress is a powerful open source content management system which provide thousands of theme and plugin for development of a website. You can easily design your website using wordpress. Optimization of Wordpress website is little harder as compared to Static or Custom websites. But You can boost your wordpress website by following my instructions:
- Use lightweighted Themes
- Avoid using more than 10 Plugins
- Use Wp Rocket for cache
There are plenty of lightweighted themes in wordpress library. By using lighter themes , your server response time will be reduced and the performance score will increase. You can go with Twenty Seventeenth Theme which is already optimized and coded well.
Wp Rocket is fantastic cache plugin which increase your website performance dramatically. But only after perfect configuration. Here you can configure your wp rocket setting :
- Enable Mobile Cache (√)
- Enable cache of logged users (√)
- Cache lifespan - 10days
- Minify CSS file (√)
- Combine CSS file (√)
- Optimize CSS Delivery (√)
- Remove jQuery Migrate (√)
- Safe Mode for jQuery (√)
- Enable Lazyload (√)
- Disable emoji (√)
- Disable wordpress embeds (√)
- Enable Webp Caching (√)
- Activate Preloading (√)
- Activate sitemap based preloading (√)
- Enable link preloading (√)
- Prefetch Dns Request (Use Gtmatrix to find Prefetch Dns Request)
- Preload fonts (Use Gtmatrix Waterfall to find all fonts)
- Control heartbeat (√)
- Disable all behavior (√)
It is very important to have a good server to increase the speed of the website, so your hosting server should also be fast.
Even after doing so, if your website speed does not increase, then write in the comment section.