Web development is one of the few professions where you don’t need a degree, certificate, or a license to get a job. I don’t know how long that party is going to last. But despite the low barrier to entry, there are standards for web development. It is a moving target, but professional websites are generally expected to hit certain requirements. Google’s web.dev website is an easy way to check if your website is meeting modern standards. Photics.com was recently put to the test. The end results were flawless.
No joke, on April 1st, I ran the test. And after a particular modification, I aced it. In all four categories — Performance, Accessibility, Best Practices, and Search Engine Optimization (SEO) — the Photics.com homepage hit 100 out of 100 scores.
A lot of work goes on behind the scenes to make Photics.com as good as it can be. I suppose this is an opportunity for a shoutout to HostRocket. They do a phenomenal job of keeping the website online. Photics.com has been online for over 22 years. At least 16 of those years have been with HostRocket — PHENOMENAL!
Although, truth be known, there was one issue preventing a true top score. I hid this problem to get the perfect score. In the SEO category, when using the WordPress Twenty Sixteen theme, a peculiar error is thrown.
Tap targets are not sized appropriately
Apparently, that usability issue is a ding against SEO. That means the search engines are ranking pages not only for keywords, but functionality. After looking more closely at the issue, the following text was shown.
Interactive elements like buttons and links should be large enough (48x48px), and have enough space around them, to be easy enough to tap without overlapping onto other elements.
The main area of concern is the “entry-footer” for each article summary. I was tempted to just ignore it. Isn’t 99% close enough? Apparently not!
24 25 26 27 | .entry-footer { font-size: 1rem; line-height: 2.25; } |
Days later, and after fighting with the CSS for over an hour, I finally figured out a solution that solved the problem. More importantly, the fix doesn’t make the layout look ridiculous. Changing the margin or padding wasn’t working. Instead, I increased the font size and the line height. It was a perfect score once again. This time, there were no shenanigans.
Although, the “Performance” number would vary. Sometimes it would hit 99 and sometimes it’s 100. I suppose this fluctuation has to do with the performance of the server. There are some additional optimization possibilities too, but I’m satisfied with the results. Things seem to have stabilized after converting the “A Book About Hype” promo image to SVG. Since the original artwork was made with vector graphics, switching from PNG to SVG resulted in significant file size savings.
The web.dev test will likely change in the future. I suspect those changes could be a detriment to my score. But when this article was written, it was perfection. The occasion was celebrated with virtual fireworks on the web.dev website. That was pretty neat.