5 Netlify plugins to ensure a great Web Experience

Ravgeet Dhillon
Ravgeet Dhillon on Nov 17, 20204 min read
Written in
Blog banner for 5 Netlify plugins to ensure a great Web Experience

A great web experience is a must for retaining viewers and turn them into potential leads. The key to achieving a great web experience is making sure that your website is optimized and tested thoroughly. Testing a small website manually can be easy but a large website that is controlled by a team through a CMS requires automated tools. These days most website owners are shifting towards JAMstack. Netlify is one of the best platforms to host JAMstack websites. In this blog, we will list some of the best Netlify plugins that you can use to offer a great web experience to your viewers.

Broken links on your website can result in embarrassment and a huge dropout rate. You can manually check broken links on your website but it is better if we can automate the process. Checklinks helps to keep all the assets references correct and avoid 404 links to the internal pages, as well as the external pages your website links to. It can also report on inefficient redirect chains and potential mixed content warnings.

2. Deployment Hours

Sometimes, in the middle of the night, one of your team members can trigger a new deployment which can by chance break the website. What next? Your team members are called and you have to fix the bug at the time you were about to sleep. So to blocks deployments that happen outside of the specified deployment hours range, you can use the Deployment Hours Netlify plugin.

3. HTML Validate

HTML Validate Netlify plugin allows you to validate your HTML website build. It is extremely important to test the validity of the HTML because not only it can break your website’s design structure but also affect the SEO as the GoogleBot won’t be able to parse your website correctly. For example,

<p>
  <button>Click me!</button>
  <div id="show-me">
    Lorem ipsum
  </div>
</p>

The validation of the above HTML will produce the following error in the terminal:

1:1  error  Element <p> is implicitly closed by adjacent <div>  no-implicit-close
2:2  error  Button is missing type attribute                    button-type
6:4  error  Unexpected close-tag, expected opening tag          close-order

4. Lighthouse

Lighthouse is a Netlify plugin using which you can run an automated audit of your website after every build. You can set threshold values for each of the categories tested by Lighthouse that include performance, accessibility, best practices, SEO, and PWA if required. A new website build is only deployed if all the threshold values are met.

RavSam website performance measured by Lighthouse
Our website performance measured by Lighthouse

5. Minify HTML

When the website is built using a Static Site Generator like Jekyll, Hugo, a lot of whitespaces can creep into the HTML generated after the build. This whitespace means that the user has to download more bytes and you also waste your bandwidth. By minifying the HTML generated by your build, you can remove the redundant bytes from your website. This plugin minifies all HTML files in your publish directory, which is to be deployed by Netlify to its global CDN.

Cheers!

Subscribe to RavSam Web Solutions newletter for information about Website development, mobile apps development and software development

Loved this post? Join our Newsletter 🚀

We write about Nuxt, Vue, Flutter, Strapi, Python and Automation. We don't spam.

Please add a valid email.
By clicking submit button, you agree to our privacy policy.
Thanks for subscribing to our newsletter.
There was some problem while registering your newsletter subscription. Please try again after some time or notify the owners at info@ravsam.in

ABOUT AUTHOR

Ravgeet Dhillon

Ravgeet is a Co-Founder, Freelancer and Developer at RavSam. He helps startups, businesses, open-source organizations with Digital Product Development. He is a fan of Jamstack and likes to work with Flutter, Strapi, Nuxt/Vue and Python. Connect with Ravgeet on Twitter and LinkedIn.

KEEP READING

Blog banner for Progress Bar in Next.js

Progress Bar in Next.js

Written in Development
Blog banner for Best VS Code extensions for Nuxt/Vue Projects

Best VS Code extensions for Nuxt/Vue Projects

Written in Development

Got a project or partnership in mind?

Let's Talk

Contact Us ->