How I managed 100% on PageSpeed Insights

The website IsMyWebsiteWellDone is an example of how I would envision the ideal outcome of my work. It’s not just about the test result, but also about ideal responsiveness and adherence to all accessibility rules, along with a pleasant WordPress user interface that I can explain to the client within 5 minutes.

Responsive

As you can try out, the website displays perfectly on any screen width. Not only font sizes adjust, but also paddings and margins, including all columns. And the most incredible part is that there is not a single mention of media-query in the entire CSS.

The main inspiration for the CSS system for me is Andy Bell and his Progressive Enhancement. In its simplicity, it means that the website will somehow function even on the worst and slowest devices, and the better the device, the better the result. To put it aptly in Andy’s words: “Be the browser’s mentor, not its micromanager.”

Rychlost

The biggest credit for speed goes to the Flynt starter theme. It’s an absolutely fantastic WP theme that utilizes methods like JS islands / Partial Hydration, thus loading JavaScript only when necessary. For example, JavaScript for mobile menu loads only on mobile devices, and JavaScript for the slider loads only when the user actually sees the slider.

Additionally, the theme combines the ACF plugin for easy creation of page blocks and the Gutenberg editor for posts. Therefore, I can deliver the website to the client without any worry that the entire website could be disrupted in any way.

Accessibility

Lately, I’ve become more interested in this often overlooked aspect of web application development, and I actually feel a bit ashamed that I didn’t start addressing this aspect long ago. In my opinion, it’s absolutely crucial, and paradoxically it has far-reaching implications beyond the user environment for the disabled because general accessibility rules are very often applicable to overall UX.

The website where I tried my new workflow
https://ismywebsitewelldone.eu/