Today, our users have no patience for websites with poor screen load speeds. They just naturally expect the pages they visit to load fast and run smooth. Your web pages need to not only load quickly, but also run well; that means scrolling, animations and interactions should be silky smooth.
Industry case studies have also proven the fact that high-performing sites engage and retain users better than low-performing ones.
So how do you get started with Optimisations on the Web?
Improving page speed isn’t some arcane and mysterious dark art. The very first step in improving your page speed is to measure current performance and analyze where and how you can make positive changes. You can simply use Chrome Dev tools to understand how your page is loaded on client’s system.
To understand this auditing process better let’s take an example page from Shaadi.com and see what can be improved in order to load it fast for users.
Below is a Premium Member’s profile page on Shaadi.com.
To learn the page load time of the targeted page, I inspected the page loading performance in all the three different tabs in network tab, performance tab and audit tab available in Chrome Dev Tools.
Page Load analysis in Network , performance and Audit Tab:
All the above output flows helps you know the Page Load Journey of your page. Loading a web page is like a film strip that has three key moments.
Is it happening? | Is it useful? | And, is it usable?
By analysing Http calls you can easily make out that biggest drain on performance of your page is due to the need to complete dozens of network round trips to retrieve resources such as styles, scripts, data and images. So, the next step is figuring out how to load just what you need.
The above outputs enable you to find out what all resources are being requested, their priorities, how many bytes are being downloaded and if there are any unwanted network requests / js and css code which you can eliminate.
Here are a few proven tips which you can use to optimize your website and improve its overall quality and performance.
- Minify the js and css assests
- Load optimized Images
- For Single-page applications use code-splitting
- Async / defer js scripts that are not necessary for initial page render
- Use Sprited Images for small icons to reduce individual network calls.
- Avoid redirects
- Don’t load Full libraries (e.g. all of lodash, Moment + locales), load only what you need using tree shaking
- Use resource hint link like a dns-prefetch, preconnect, prefetch
and follow the Audit Mantra – Test , Record , Fix and Repeat
Record the state of your site before making any changes, to uncover problems and set a starting point for improvements or regressions. This will give you the feedback you need to show results and justify the development effort.
The example page we picked up in this post is already optimized for fast Page load with code splitting, loading compressed versions of js and css , async loading of js, tree shaking and much more. But everyday we write so much of code to add new features and bring easy and convenience to our users, we bloat the page again with unnecessary code and assets. Hence it’s important to perform health check of your website on regular basis.
Optimization opportunities I noticed while re-auditing
- A few new small icons are added on page UX but are being downloaded on separate network request. We can do image spriting there.
- An API call is made to fetch various counts like count of new matching profile , count of near me matches, etc… but these are not even displayed anywhere on the page may be as a need of new UX design of the page. We can get rid of these extra call save 1.40 sec
- An API call is made to fetch recent success stories but again this item is not displayed on this page may be as a need of new UX design of the page. We can remove this extra call also and save on downloaded bytes and time.
- Render blocking resource section in Audit tab tells the poly-fills used to support es6 and flex box on old browsers is blocking page render. We can optimize this to load when necessary, skip it for modern browsers for faster load times ( sample code shown below) and can save extra 12 KB (minified version) download taking 1,200 ms on modern browsers.
<script>
if(!(window.fetch&&window.Promise&&[].includes&&Object.assign&&window.Map))
{document.write(
'<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=default,fetch"></scr' +
'ipt>',
)}
</script>
- Audit tab also guided us to use preconnect for domains we are connecting for API calls or tracking.
<link rel="preconnect">informs the browser that your page intends to establish a connection to another origin, and that you’d like the process to start as soon as possible.
- Audit tab also highlighted the main thread is taking more time in script Evaluation and it’s 3,972 ms. We can use code coverage tool to remove unused css and js.
Code coverage is a feature in DevTools that allows you to discover unused JavaScript (and CSS) in your pages
The goal, as always, should be to enable users to interact with your site with the least amount of friction. So run the smallest amount of JavaScript necessary to deliver real value.
Go Audit Today and Boost the Performance of Your Site
References:
- The Cost Of JavaScript In 2018
- Resource Prioritization – Getting the Browser to Help You
- JavaScript Start-up Optimization
- Measuring Performance
Image credits:
- The Cost Of JavaScript In 2018
- What Should You Do To Improve Your Poor Landing Page Conversions?