A lot of what is new about the 2019 iteration of the Carleton home page can be found in the code base.
We placed a large amount of importance on performance for the new redesign. Here are some of the changes implemented this time around in this area. This is a technical post summarizing the steps taken to deliver the fastest site we could.
Page size improvements and dropping libraries
CSS
Responsive design was fairly new the last time the home page was updated and we opted to leverage Bootstrap 3. Bootstrap is great but we still wrote a bunch of custom styles and we ended up with a large CSS footprint with our stylesheet clocking in at 78.2 KB after minification and compression.
This time around, instead of Bootstrap, we leveraged our own budding (still in development) design system, RDS. In addition, we implemented the best practice of using critical CSS and inlined the minimum set of blocking CSS into the page with inline styles. Between RDS, using critical CSS and overall simplified design, our external style sheet shrunk to only 5 KB for this renewal.
JavaScript
There has been tremendous growth in JavaScript (JS) since the last Carleton homepage update in 2015. With these JavaScripts’ improvements, we no longer needed jQuery and opted to just use vanilla JS. By dropping another library, we were able to reduce our total script size from about 95k in 2015 to a mere 5k in 2019.
As per best practise, we deferred all of our CSS and JS resources to avoid blocking the first paint of the new page.
Image improvements
Images are the biggest culprit for impacting the loading speed of any website. We made sure that all images would be optimized and, when possible, delivered in one of the newer next-generation formats. If you are viewing the new home page in Chrome, you will be served WebP images. We’ve also added the necessary code to take advantage of native browser lazy-loading coming soon.
HTML FTW
It likely adds up to an imperceivable difference, but instead of coding the home page in PHP, we dropped the server-side language in lieu of just using good old HTML 5. The old site was mostly HTML, but we used a fair amount of PHP to organize the development by leveraging variables and includes for a better workflow. This time around we leveraged a static site generator to keep a nice organized workflow and generated the final HTML during the production build stage.
Minimize HTTPS requests
The fewer HTTPS requests a website has to make, the faster the site can load. The average number of HTTPS request is 89. Our old home page performed really well in this area by only having 30 external https requests. However, for this iteration we were able to further improve upon this by having only a total of 22 total requests.
All around performance best practices
There is nothing more important than user experience. We take this notion seriously when building Carleton websites and many other steps were taken to deliver a performance-focused website. If you visit the new home page in Chrome and run the built-in Lighthouse audit, you should get the results seen below.
Comparing the old home page with the new home page in gtmetrix.com yields the following:
