Three Front-End Auditing Tools I Discovered Recently — Smashing Magazine


Quick summary ↬

Building a faster website can be a rocket task these days. There are so many things to consider, so it’s challenging to get everything right. Here are three less-known tools that might help you get there.

Is every resource properly minified and compressed? Are all the caching headers set correctly? Does the site load all the resources in the best order to guarantee a fast first paint? These are only a few questions to consider when having the goal of building a fast website. Building for the web is complex these days.

But how do you find all these things causing performance issues?

Let me share three tools that will help you spot performance issues and ship high-quality and fast websites.

Note: If you’re looking for a complete overview of best practices and tools, have a look at the Frontend performance checklist.

I discovered Waterfaller just recently. Contrary to Lighthouse or WebPage Test, Waterfaller focuses on one thing alone — issues in the network waterfall.

Waterfaller screenshot

Waterfaller focuses on issues in the network waterfall and provides recommendations for improvement.

The tool analyzes what resources are loaded on the website and in what order these resources come in. You can find advice on what you could implement to make every resource load faster right in the tool.

I love Waterfaller’s narrow scope! Run a test, find problematic files and receive advice — that’s all doable in 30 seconds. It’s beautiful!

More after jump! Continue reading below ↓

If you’re looking for an extensive overview of how well your site is structured, give Yellow Lab a try. The number of included performance tests and checks is outstanding! It provides standard metrics such as page weight and request count and analyzes your HTML, CSS, and JavaScript.

Yellow Lab Tools screenshot

Yellow Lab Tools runs a number of audits, from CSS to JavaScript to performance and provides a detailed overview of issues and how to fix them.

It’s a beautiful tool to find issues in your CSS architecture in the form of duplicated selectors or too many color declarations. It also points out a too complex HTML structure, and it also checks your server and cache header configuration. It’s a perfect companion to build a high-quality website.

Let me introduce you to the end boss. Say hello to Microsoft’s webhint. webhint is comparable to Lighthouse, and it scans your site for issues in the areas of accessibility, compatibility, progressive web apps, performance, and security.

webhint screenshot

webhint often finds issues that other tools don’t quite catch when looking for ways to improve your site.

What astonishes me about webhint is that it’s incredibly picky. I encountered situations in the past where I had a completely green Lighthouse score, WebPage Test gave me straight A’s, but still, webhint was offering me areas for improvement.

If you haven’t used it yet, I recommend giving it a try. You might find surprising things to improve.

As you’ve seen, the tooling landscape includes many valuable tools. And while some of the tools scan for a wide range of issues, there’s no tool covering everything. The usual mantra applies:

“Use the right tool for the job.”

What web performance tools do you use? I’d love to learn more about your favorite tools helping you to ship the best and fastest websites.

Smashing Editorial
(vf, il)



Source link

Leave a Reply

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