Website Performance Testing

Test how fast this Website loads with some features turned on or off. Website conjugaison.xyz is an HTML single document website (stylesheet is inline and it has no Javascript). It has a 3 external dependencies: custom font, AMP page and Google Analytics. The first is pure CSS. The other two load Javascript asynchronously. Toggle them to measure page load performance on desktop and mobile. Instructions and results below.

Desktop Performance in your Browser

Open Developer Tools (F12) and go to the Network tab. Hard refresh the page (Ctrl+F5 to avoid loading from browser cache) and see how long the page loads in your browser. Turn off external dependencies and try again.

Time to finish (average of 5 runs on Windows with Chrome 62)

With no external dependencies: ~100ms.

With custom font: ~200ms

With custom font, AMP and Google Analytics: ~600ms

Mobile Performance with Audits in Chrome DevTools

Open Developer Tools (F12) and go to the Audits tab. Perform an Audit and only select Performance. The audit will emulate an average mobile device on 3G and provide you with a report. Turn off external dependencies and run the audit again.

Audit score (average of 5 runs on Windows with Chrome 62)

With no external dependencies: Score 100, first meaningful paint ~700ms, first interactive ~700ms.

With custom font: Score 98, first meaningful paint ~1,350ms, first interactive ~2,000ms.

With custom font, AMP and Google Analytics: Score 95, first meaningful paing ~2,000ms, first interactive ~2,400ms.

Conclusions

On desktop, conjugaison.xyz loads blazing fast without dependencies and still under 1 second with all dependencies. It is worht noting that the custom font and Javascript assets for AMP and Google Analytics are delivered via CDN.

On mobile, conjugation.xyz loads under 1 second without dependencies. First interactive more than tripples to 2.4 seconds when external dependencies are loaded. It is worth noting that loading external Javascript delays first meaningful paint quite a bit. Yet, the Javascript is loaded asynchronously and renders nothing.

Javascript seems to add considerable delay to the load and paint of a page both on Desktop and on Mobile.

The delay incured by Javascript is negligible on Desktop, but much more pronounced on Mobile 3G.

Further Research

It would be interesting to measure inline Javascript vs external dependencies. We could identify if the delay is caused by Network (loading more assets) or by the Javascript engine (initializing, parsing, running).

Similar tests could be done on Firefox and other browsers.

If you would like to contribute measurement results, please do so on the blog post dedicated to this experiment. It can be found here:

External Dependencies

The custom font is Google Font's Courgette. Falls back to Arial when not present.

Google Analytics loads GTM's gtag Javascript file asynchronously.

conjugaison.xyz is an AMP page. AMP stands for Accelerated Mobile Page, a restricted set of HTML (no Javascript and inline CSS). AMP loads Javascript files asynchronously to add dynamic features to the website once loaded.

About Performance Audits in DevTools

The release of Chrome 60 adds Lighthouse, an audit tool "to help you identify and fix common problems that affect your site performance, accessibility, and user experience". Details of the emulation can be found by looking the code file emulation.js in the GitHub repo. It seems to throttle the connection speed at 1.6Mbs, the speed of a moderate 3G connection. It also seems to throttle the CPU to emulate a Nexus 5. I assume the audit also has a cache buster in order to freshly load assets every run to emulate first load speed.

About conjugaison.xyz

Website conjugaison.xyz is a tool I built to help me find the conjugation of a verb in French efficiently. It is also an experiment to build a website from scratch. Read my blog post about the motivation for this website.