Ten Web Performance Tuning Tips – Measure, Compress, Minify

With the mobile ecosystem creating an even less patient user than desktop users, web performance issues harken us back to 1999 when we were on 56K baud modems and using netzero to dial up from airport lounges. A web site needs to be architected, designed, and coded with best practices to perform well. After reviewing Google analytics for an Atlassian Confluence website, we realized we had both client-side and server-side performance issues.  Google provides more Web Performance tips to learn more about web performance tools at Google, including browser extensions and APIs for Insights, PageSpeed Service, and their optimization libraries. So 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 causes 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 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 best 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 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

Compacting HTML code, including any inline JavaScript and CSS contained in it, can save many bytes of data and speed up download and parse times. Minify HTML resources to reduce their size. We found about 17% reduction.

Optimize images

Properly formatting and compressing images can save many bytes of data.  Optimize images to reduce their size. We found 33% reduction opportunity where our repeating images in menus fould be reduced 50%, but 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 is where we found 90% of our issues – the server was going to sleep mountain time and not waking up for other time zones, where our primary usage was coming from.

Yes, the tweaks above will definitely help the mobile user on 3G on an older SmartPhone. But Occam’s Razor suggested focus on the simple, obvious part first. The above will take a few days or maybe more since many of the recommendations rely on a COTS package and we’d need a dialog with them to find the right solution. But, the server side fix turns out we just needed to tickle the server and set one server-side recommendation about (caching). Reason: we notice generally great performance, but sometimes when the service is waking up, the page times skews the overall page performance.

We’ll still tweak some images and cache some files, but we’ll likely more reach out to Atlassian to see where they are at with minifying and addressing above-the-fold content processing.