How do you analyze websites? 🔍

Tue, 12 May 2020 00:00:00 GMT

How do you analyze websites? 🔍

In this post, I'd like to discuss tools that might be helpful for analyzing websites.

I'd like to talk about the PageSpeed Insights tool and the Lighthouse Chrome plugin.

Both these tools give you a bunch of interesting metrics and score your site by several dimensions (like "Performance", "Accessibility" and etc.)
Both these tools work from the "browser", so you don't need to upload the content of your site to somewhere or set up a special testing environment

What do we need them for? With numbers that these tools provide we can understand if the website or web app is becoming better from release to release.

Along with fairly standard recommendations like "Reduce CSS/JavaScript code size" or "Compress your images" they can give us recommendations which can be really useful. Below I'd like to discuss specific things which were useful for me.

❤️ What I love in the PageSpeed Insights:

It shows the speed of the loading of the page both for mobile and desktop versions of the site. It's great because when I develop a site, I work with it from the desktop browser 80% of the time (if there are no special requirements about mobile usability, of course). So, for me, it's extremely useful to see "mobile" and "desktop" metrics in one place.
It forces us to use modern formats of the images (like WebP, JPEG 2000, or JPEG XR). For some images, we cannot use an SVG format, and for such cases, this tool gives good recommendations about using WebP format and etc.
It makes a warning in case you forgot to set up an efficient cache policy for static assets.

❤️ What I love in the Lighthouse:

It makes an "Accessibility" check - it means that this tool is able to find and list:
- blocks with poor background and foreground colors - I'm not a designer, so for me, it's very helpful to have such checks;
- HTML tags that don't follow common rules (like tags without the alt attribute, links without discernible names and etc.)
It makes a"Vulnerabilities" check for the third-party scripts (so, if you use some old jQuery on your site you should definitely run it on your site)
It makes a "SEO" check - with it you can make sure that your page is optimized for search engine result ranking.

I was thinking if there are any things which are missing in these tools... I'd say I miss an ability to test all pages on a site from "the package". Of, course there are some solutions that can grab all links from your site and run speed checks for all pages, but as I know now there is no a "magic" button 🧙‍♂️ that allows you to do it.

From my experience, sometimes developers don't keep attention on these tools. Just for curiosity, I've tested some popular sites (I won't name them here, because I don't want to offend anybody). And here are results which I got:

Of course, it's not 100% fare to compare different websites, because they all have different designs and complexity, but as we can see even popular ones don't have ideal metrics.

From my point of view, it's great if you check your site and support good metrics.👍 It's also fine if you don't care about them in a situation when it's better to spend time on solving tasks which will be useful for your project or for end-users (like adding new functionality and etc).

What are your thoughts about these tools? I'd appreciate your feedback and opinion:

Do you always use these tools on your real projects?
Are there any features that are missing there from your point of view?
Do you know better alternatives for them?

Magic of the designMode

Fri, 25 Oct 2019 00:00:00 GMT

Magic of the designMode: design a site on the flight

Have you ever tried a designMode in Chrome? It’s a magic mode that allows you to edit a page right in the browser. In general, it looks like this:

When do you need it? Let’s say you are discussing updates for your project with your manager. This mode allows you to quickly make some changes (e.g. to change a site’s tagline or make other text changes) and understand how the updated content will look.

To use it, you need to open Chrome’s console and run the following code:

document.designMode = "on";

After this, you will be able to edit the page’s content as if you are working with it in a text editor.

You do not need to change HTML in the Inspector any more, just type your new text and enjoy the magic.

Anna Miroshnichenko Site's RSS Feed

How do you analyze websites? 🔍

How do you analyze websites? 🔍

❤️ What I love in the PageSpeed Insights:

❤️ What I love in the Lighthouse:

Magic of the designMode

Magic of the designMode: design a site on the flight