Performance is a Marathon: Successful tactics for web page performance
Development · Sept 13, 2018
Step 1: Research
We began with Google Lighthouse - it has been and continues to be the key tool throughout our entire journey, outlining opportunities for us to improve our performance.
Lighthouse was the stepping stone that provided information and opportunities for us to prioritize. We worked with another TELUS Digital team that had already run a number of tests and were able to prioritize their recommendations as well as our own ideas. This team also updated our Lighthouse settings in order to customize it for our specific goals.
When it came to outside documentation, there is no end to the excellent content being constantly created around performance. We continue to read use-cases, blog posts and other documentation along with helpful videos.
List of useful articles and videos:
Twitter also became a useful place to see discussions happening in real time around the issue of performance. Long, detailed conversations around performance are continually happening and became resources that provided both helpful context and links to more documentation and articles.
Developers to follow:
Step 2: The Work
But before we could go through performance implementations, there was some foundational work that had to be done:
We upgraded the version of React library from 15 to 16 as its core was rewritten withReact Fiberthat allowed the library to become more performant in its future iterations.
We upgraded Node.js from version 6 to version 8.
We upgraded Webpack from version 2 to version 4 which made code-splitting easier.
These changes were required before we could start working on any performance optimizations.
Phase 1: Lazy load all images
The component that allowed this refactoring was developed internally at TELUS Digital - we then had to upgrade the version of this component and ensure all
Performance gain: 5-8 points.
Phase 2: Web Fonts
This was an almost hidden opportunity in the Lighthouse report, appearing at the bottom of the report and also collapsed. It turned out that web fonts were drastically impacting our performance across all of telus.com. We implemented a “
Performance gain: Over a second gained on First Meaningful Paint ~ 5 points.
Phase 3: Adobe Launch
The analytics team upgraded Adobe DTM scripts to Adobe Launch - this allowed us to load analytics scripts asynchronously in order to prevent render blocking and get to First Meaningful Paint faster.
Performance gain: Improved First Meaningful Paint by 1 second. ~ 5 points.
Phase 4: Component-Based Code Splitting
Performance gain: Reduced the Time to Interactive between 2 - 3 seconds ~ 5 points.
Phase 5: Inline CSS
The latest phase in our performance journey was inlining CSS that was also split per component. Inlining CSS gave us an ability to improve our
Performance gain: First Meaningful Paint was reduced to 1.2 seconds on average! ~ 8-10 points.
We also paired with the Site Builder team which manages almost 500 TELUS web pages in order to help them implement font swapping and inline CSS. That had an enormous impact on the overall average Performance Score. Each Site Builder web page benefitted from extra 10 Performance Lighthouse points on average.
Here’s where we started:
Here’s where we are at today:
All these Phases are not the end of our performance work and there are still some opportunities for improvements. As we’ve said before, this is an ongoing journey of research, testing and optimization for the entire TELUS digital team.
Next we’ll be investigating which pages are performing worse than others and analyze what can be improved. Sometimes it’s not only the code that makes the websites faster - sometimes we need to analyze the quality and amount of our content, as well.