How to Make a Fast Web App—Part 2: Know Your Site Inside Out
To develop a fast web app, you need to know exactly what makes up your site. Every line of your code should have a defined purpose, every script a clearly defined function. Your team of devs has to work in unison to streamline the code and deliver performance.
In the first part of this article, we talked about the realities of the global Internet access and how it affects performance. In this episode, we’re going to focus on your web app specifically.
#1 Know What’s Going On on Your Website
The problem with redundant scripts usually happens with big web apps. When a few dev teams work to make a website, it’s easy to end up with mounds of useless scripts and server-consuming data. Too often everyone thinks his or her script is essential to the web app, but to make that assumption, you need to perform a careful analysis of the site.
It boils down to a simple question—if you don’t know what a particular script in your web app is doing, get rid of it.
#2 Talk Everything Over with Your Team
Team meetings are one of the most efficient ways to increase the performance of a web app. Analyze your web application step-by-step, pinpointing scripts and lines of code that need to go. Talking with each member of the team will quickly reveal which elements have no UX justification and bring no value to your web app.
#3 Limit Tracking and Marketing Scripts
If you’re convinced you need five different tracking and marketing scripts to aggregate your traffic data, you’re wrong. Sure, statistics and website metrics are an important indicator as to how your website is faring. But if the performance of your web app is poor, your website won’t be faring well simply because you won’t have any visitors.
Ads, retargeting, analytics, etc., all take up your server capability and require fast bandwidth. Limit these types of scripts to an absolute minimum and focus on garnering actionable visitor data (e.g. demographics, on-site behavior, visitor location).
Tracking and remarketing scripts make your web app load gazillion times longer. Fact is, the actual content of your website can take up a mere one-fifth of your true website size, with the rest being various scripts. And they will be slowing the site down. See for yourself:
#4 Don’t Let Third-Party Scripts Ruin Your Performance
If the content of your web app alone loads under 2 seconds, third-party scripts can multiply that time by ten. For example, Facebook, Twitter, and Instagram scripts can significantly increase page load time.
What you can do is to set those scripts to load asynchronously so they won’t strain a visitor’s bandwidth. But be aware that there are scripts that prevent asynchronous loading.
NOTE: Some third-party scripts can load other scripts, flinging your web app performance down.
Use Chrome DevTools to Check Third-Party Domains
Chrome DevTools will tell you which third-party domains are slowing down your website. In the performance tab, you can profile your site and get an in-depth summary of load times of each element and each operation on your web app.
Performance feature also lets you group domains according to the most demanding ones. Enter Bottom-Up tab next to the Summary tab:
Ask your team members if all third-party scripts are necessary, and what value do they add to your web app.
Test Your Site’s Behavior When Scripts Fail to Load
To know how your site will behave when the browser fails to load the most important scripts (e.g. Twitter, Facebook, Google fonts) redirect these domains to WebPageTest’s Blackhole server—blackhole.webpagetest.org (188.8.131.52).
To do this, add the following to your resolv.conf file:
184.108.40.206 platform.twitter.com 220.127.116.11 connect.facebook.net 18.104.22.168 fonts.googleapis.com 22.214.171.124 assets.adobedtm.com 126.96.36.199 fast.fonts.net
This approach will allow you to see how your website would behave in the worst case scenario, where every script fails to load.
ProTip: You can add any domains that popped up in the Bottom-Up tab in DevTools to the resolv.conf file and check your site for various failure scenarios.
#5 Test Everything Regularly
To properly evaluate your web app, you need to test it frequently under realistic conditions (see our previous article).
To know how the changes to your web app have affected its performance, make sure you have your website’s change log always at hand. We recommend Google Analytics.
Following the changes lets you see if you fixed issues or maybe generated new ones.
In Google Analytics, under Behavior -> SiteSpeed -> PageTimings you can check where on the globe your website underperforms.
#6 Set a Goal
When introducing changes to your web app, you and your team should aim for 3-second load time in every country in which your prospects are.
To make a fast web app, you need to eliminate performance-demanding elements. You have to develop with global Internet speeds in mind, accounting for bandwidth instability and limited technological capabilities of your prospects’ devices. And as you go along introducing changes, test and compare your results as frequently as possible to know if you’re going in the right direction.
Bonus: Useful Tools
DareBoost—compares the rendering speed of two sites.
SpeedCurve—generates benchmarks for one or more websites.
Charles Proxy—lets you set your Internet connection to a required value. It can also simulate packet loss or DNS latency.