Song to listen to while reading this: Run boy run by Woodkid
In Lecture this week, we had a website designer discuss ways to make our website more interactive. One of the first points she made was that our website needed to be fast. When put into context, she explained that even a few seconds could lose traffic from our website and not reach the audience we are hoping to reach.
I immediately checked my websites speed on PageSpeed Insights by Google and was disappointed by the results.
First, I’ll explain how PageSpeed Insight works. PageSpeed takes one parameter into their search bar, which is the link to your website, once it gets a url, it begins to load the site and starts calculating the time it takes for different events to take place. For example, how long does it take for the images to load? How long does it take texts, data, forms, animations until they become interactive? Once all these times are recorded, it is scored based on a pre-set metric and an overall website performance is calculated.
The desktop version of my site scored a 76/100, which is probably not too bad given that it’s well beyond the median average. However, I was quite upset with my mobile performance, for it only scored a measly 26/100, which means there plenty of room for improvement.
So my strategy for optimizing my website was to follow the lab report. By analyzing where the website was taking longest to load, I decided to deal with those first. The lab report says images were taking the longest to load, about 5.9 seconds because of their big sizes, so I thought compressing them would help improve that performance. Compression is very handy in the sense that you can reduce the file size for images and videos without losing any noticeable quality.
To help me compress the images, I used this website called imgonline where I could specify how to compress the image, either by percentage or by raw size. For all the images, I picked an average of about 70% reduction, and I was able to bring down all the image sizes to under 100 KB. This definitely helped speed up the load times given the lab report no longer showed that as an error.
The next largest error was the page-load time due to text-compression being off. This was essentially the same thing as image compression but only for the writing. Because my website was intensively using text and a semi-complicated font type, it seemed to have affected the load times quite a bit. To counter this, I watched this video which said to enable GZIP compression. But because I couldn’t find the correct setting to change, I decided to download this plugin called ‘ Check and Enable GZIP compression’ which allowed me to enable GZIP and dramatically decrease my load time.
To my surprise, these were the new results for both mobile and desktop.
Mobile performance was boosted by about 43% which is more than 2x its original performance, and desktop performance was boosted by 19%. Thus, allowing my websites to be faster, and more accessible to people on both mobile and desktops.
Featured Imaged by Pablo Romero