Mobile market are creating an even less patient user than desktop users. Consequently, we find ourselves reminded of web performance issues in 1999. That was a time where we were on 56K baud modems and using netzero to dial up from airport lounges. During those times, we came to a simple conclusion regarding websites. A website needs to be designed, and coded with the best possible practices to perform well. So, we reviewed Google analytics for an Atlassian Confluence website. Then, we realized we had both client-side and server-side performance issues. To give an example of web performance, Google provides more Web Performance tips to learn more about web performance tools at Google. This includes browser extensions and APIs for Insights, PageSpeed Service, and their optimization libraries. With that in mind, we did some investigation and the following were some suggestions:
Enable compression
Compressing resources with gzip or deflate can reduce the number of bytes sent over the network. Enable compression for the following resources to reduce their transfer size. We found about 72% reduction.
Minify JavaScript
Compacting JavaScript code can save many bytes of data and speed up downloading, parsing, and execution time. Minify JavaScript for the following resources to reduce their size. We found about 12% KB reduction.
Eliminate Render-Blocking Javascript And Css In Above-The-Fold Content
If your page has one or several blocking script resources or CSS resources, this will cause a delay in rendering your page. None of the “above-the-fold” content on your page can be rendered without waiting for those resources to load. Try to defer to, or asynchronously load blocking resources, remove render-blocking JavaScript. Or, inline the critical portions of those resources directly in the HTML. We had 7 scripts and 11 CSS blocking resources.
Leverage Browser Caching
Setting an expiry date or a maximum age in the HTTP headers for static resources instructs the browser to load previously downloaded resources from local disk rather than over the network. Leverage browser caching for cacheable resources. We had several files that could be cached for 10 minutes and a two for 30 and 60 minutes.
Prioritize Visible Content
Your page requires additional network round trips to render the above-the-fold content. For the best possible performance, reduce the amount of HTML needed to render above-the-fold content. Prioritize visible content that is needed for rendering above-the-fold. 21 KB of our responses are required to render the above-the-fold content.
Minify CSS
Compacting CSS code can save many bytes of data and speed up download and parse times. Minify CSS resources to reduce their size. (we found 4% reduction).
Minify HTML
Compact HTML code, including any inline JavaScript and CSS contained in it. This can save many bytes of data and speed up download and parse times. Minify HTML resources to reduce their size. We found about 17% in reduction.
Optimize images
Properly formatting and compressing images can save many bytes of data. Optimize images to reduce their size. We found 33% in reduction opportunity. Particularly where our repeating images in menus could be reduced 50%. In all honesty, that saved less than 2K overall.
Avoid landing page redirects
Your page has no redirects. Learn more about avoiding landing page redirects.
Reduce server response time
There are many factors that can slow down your server response time. Please read our recommendations to learn how you can monitor and measure where your server is spending the most time. This was where we found 90% of our issues. The server was going to sleep mountain time. Also, it was not waking up for other time zones, where our primary usage was coming from.
What To Take Away From This
Yes, the tweaks above will definitely help any mobile user on 3G on an older SmartPhone. However, Occam’s Razor suggests focus on the simple, obvious part first. The above will take a few days, maybe more since many of these recommendations rely on a COTS package and we’d need a dialog with them to find the right solution. But, as it turns out, we just needed to tickle the server a bit and set one server-side recommendation about caching. The reason for this is, we notice generally great performance, but sometimes when the service is beginning, the loading time skews the overall page performance.
We’ll still tweak some images and cache some files, but we’ll likely reach out to Atlassian more to see where they are at with minifying and addressing above-the-fold content processing. In doing so, we hope to further improve our own operations so that we can better help you, our clients and prospective clients as a company.