How to Improve your website speed on Google Pagespeed Insights

Google Pagespeed Insights:

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 :

  1. Minify your CSS/JavaScript
  2. Minify HTML
  3. Defer your all JavaScript .
  4. Lazyload all Images
  5. Preload all fonts and css
  6. Use .Webp images instead of .jpg or .PNG
  7. Don’t use inline Js and CSS (if possible)
  8.  Use Cdn Network Like Cloudflare or keyCdn
  9. Code your Jquery
  10. Don’t use more than 800 DOM elements

Interesting Article : How to Make Dynamic Website using WordPress

Tips :

How to Defer JavaScript ?

Defer is a attribute of HTML . It specifies that the script is excuted after page the loading. It can simply boosts your website speed.

<script src="example.js" defer></script>

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.

<img src="myimage.jpg" loading="lazy"alt="..." />

<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:

  1. Use lightweighted Themes
  2. Avoid using more than 10 Plugins
  3. Use Wp Rocket for cache

Interesting Article : Create Your Own Url Shortener In BlogSpot Blog

Tips:

Lightweight Themes 

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 Configuration

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 :

Cache

  • Enable Mobile Cache (√)
  • Enable cache of logged users (√)
  • Cache lifespan – 10days

File Optimization

  • Minify CSS file (√)
  • Combine CSS file (√)
  • Optimize CSS Delivery (√)
  • Remove jQuery Migrate (√)
  • Minify JavaScript file (√)
  • Combine JavaScript (√)
  • Load JavaScript Defer (√)
  • Safe Mode for jQuery (√)

Media Optimization

  • Enable Lazyload (√)
  • Disable emoji (√)
  • Disable wordpress embeds (√)
  • Enable Webp Caching (√)

Preload

  • 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)

Heartbeat

  • 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.

Do you like Aashish's articles? Follow on social!
Comments to: How to Improve your website speed on Google Pagespeed Insights

Your email address will not be published. Required fields are marked *

Login

welcom
....

You can make anything by Reading and Writing.
Join Aranjra