I optimized the beta version of my website to some really high scores on leading website performance auditing tools; I share my experience with these tools. Check the banner image or check the website at https://beta.akberiqbal.com.
What makes a great website?
For those who give more importance to visual design, it can be anything from a flashy design with high-resolution images and video to others who prefer a minimalist, simple design. For a more educated consumer, it would be a website which is tailored for its visitor, covered generally as usability or user experience, it is a detailed topic, put simply as the ‘ease with which a consumer can get the information they need’.
For millennials and mobile users, it would be speed. Users on mobile account for more than half of all visits to websites and for these users design needs to be responsive, size should be optimized for 3G connections and usability is a metric which becomes more important on a mobile’s real estate.
For some users and governments, accessibility would be a must-have and it helps ensure that the web is inclusive of all, given the numbers of this demographic. We have all heard that content is king, and with proper search engine optimization, it brings more visitors to a website.
For a web developer, what would be a great website?
There are many tools out there which try to answer this very question; It is primarily done by benchmarking and setting best practices. Among the many tools out there, I will only discuss a few which are closer to being at the top of this pile in my opinion and which I used to develop an optimized ‘beta’ version of my website.
To make things interesting, the budget for this website optimization exercise was $0. To this day, I only pay for the domain and hosting only. No other paid services at all. Following will be a brief introduction and experience over my journey with these tools.
Google Lighthouse: a very comprehensive tool, built for developers and part of the Google Chrome browser, it can audit any website for performance, best practices, accessibility, SEO and progressive web application (PWA). Auditing your website here will probably return a lot of pointers and suggestions at first, and they are really helpful in understanding how the web works and how we can get more performance out of our websites.
PWA was really interesting, it uses Service workers to empower web applications to deliver a user experience with the reliability and performance of locally hosted websites. This is a giant leap in the world of websites; a website which behaves like a mobile/desktop application by choosing whether it needs to download a website component from your web server or whether it can use it off the local cache. On Android phones, a pop-up asks whether you want to install it or not, in case you install it, you’ll see an icon on your mobile to give a complete mobile application experience.
I was able to achieve a perfect score in for accessibility, best practices, SEO and progressive web application but performance was topped at 87 and 80 on two different machines which I had. If I had invested some cash in it, there are plenty of tools which could help get a performance score of 100.
Google PageSpeed: a tool which tests a website on desktop and mobile to return a real-world performance score. Be prepared for lots of pointers at first, which all help make the website lighter, faster, better. In case of my beta website, the only Achilles heel turned out to be two Google tools. The fact that Google tag manager and Google analytics have a short browser cache expiry of 15 minutes and 2 hours respectively meant that I was penalized and it prevented a score of 100. It was ironic especially because both of these tools were made by Google, who also owned this performance website. Again, there was no budget for optimization, so I didn’t go for a paid analytics tool which could have covered this particular metric.
Web Page Test: I first saw it on the dialog box which opens up during the lighthouse audit run. It is a web-based tool, which lets you simulate your website views from a variety of pre-set locations and devices which help deliver a complete usability and performance score. Usage of cache and compression was the thing which was unique about it along with other metrics which were covered by the tools discussed above. Third party scripts and rest APIs did cost me some percentage points here. My website resources were cached by my CDN provider and the font file there was not compressed, which cost me some points. Again, with a working budget, this would have been solved.
Can any website be optimized to get these scores?
Short answer: No. Try your favourite website with these tools.
Long answer: You don’t necessarily need to. A website is created to serve its audience; to understand and fulfil their unique needs at the cost of limited time and resources. Analytics can help understand a website’s audience, their needs, locations, technology, behaviour and time spent. All of which is invaluable in tailoring the experience for that customer.
Some of the best practices outlined in these tools will take a lot of time for very little return. Some of these would not take all that long but might make the maintenance of the website very expensive in the long run. Hence, some metrics could be achieved by investing more capital and bearing more recurring costs. It is a careful balancing act which is unique to each website, its organizational setting, underlying technology, time and budget limitations.
And while all of this is done, a new set of standards and technological advancement may bring newer benchmarks and best practices. Network speeds at different times of the day resulted in different readings as well, but this is why I didn’t follow a single tool but followed multiple tools which could help test my website from different locations on different devices. It would be interesting to see where this website will rate in the next 3 months, 6 months, in a year!!