How 17 Lines of Code Improved Shopify.com Loading by 50%

3 minute read Big improvements don't have to be hard nor take a long time to implement. It took, for example, only 17 lines of code to decrease the time to display text on Shopify.com by 50%. That saved visitors 1.2 seconds: each second matters given that 40% of users expect a website to load within two seconds and those same users will abandon a site if it takes longer than three.

Shopify logo
Shopify
•
Bryson Gilbert
•3 min read•beginner•
--
•View Original
HTMLJavaScript

Overview

The article discusses how a mere 17 lines of code significantly improved the loading time of Shopify.com by 50%, resulting in a 1.2-second reduction in the time to display text. It highlights the use of the preload feature to optimize font loading, enhancing user experience by eliminating the Flash of Invisible Text (FOIT).

What You'll Learn

1

How to implement the preload feature to optimize resource loading

2

Why reducing loading time is critical for user retention

3

When to use preload for fonts and other resources

Key Questions Answered

How did 17 lines of code improve Shopify.com loading time?
The implementation of 17 lines of code utilizing the preload feature reduced the time to display text on Shopify.com by 50%, saving visitors 1.2 seconds. This was achieved by allowing the browser to download font files concurrently with CSS files, improving rendering speed.
What is the Flash of Invisible Text (FOIT) and how is it avoided?
The Flash of Invisible Text (FOIT) occurs when the browser displays a page without text until the font files are loaded. By using preload, Shopify eliminated FOIT, allowing text to render immediately as fonts are downloaded, enhancing user experience.
Which browsers support the preload feature?
Currently, the preload feature is supported in Chrome and Opera. Other browsers like Safari are in the process of implementing it, while Edge is considering it, but there is no confirmation for Firefox yet.

Key Statistics & Figures

Time to display text
1.2 seconds
This was the reduction achieved by implementing the preload feature on Shopify.com.
Percentage improvement in loading time
50%
This reflects the effectiveness of the 17 lines of code added to the site.

Technologies & Tools

Frontend
Preload
Used to optimize the loading of font files and other resources to improve rendering speed.

Key Actionable Insights

1
Implementing the preload feature can drastically improve website loading times.
By preloading fonts and other resources, developers can enhance user experience, particularly on sites where loading speed is critical for user retention.
2
Reducing dependencies on third-party libraries can simplify implementation.
Shopify chose not to use options like Google Font Loader or FontFaceObserver, which require additional dependencies. This decision streamlined their code and reduced complexity.
3
Monitoring performance using tools like SpeedCurve can provide immediate feedback on changes.
Using performance testing tools helps identify the impact of optimizations, allowing teams to make informed decisions based on real data.

Common Pitfalls

1
Relying on third-party libraries can complicate resource loading.
Many developers might opt for solutions like Google Font Loader, which can introduce additional dependencies and complexity. Instead, using native features like preload simplifies the implementation.