This document discusses ways to improve web performance and boost conversion rates. It begins by explaining how slow page loads can negatively impact businesses, costing Amazon $1.6 billion per year for every second of slowdown. The document then discusses various metrics that impact performance like page size, number of HTTP requests and JavaScript size. It provides tips for testing and improving performance, such as optimizing images, minifying files, leveraging caching and CDNs. The document stresses that web performance optimization is an ongoing process of testing, setting budgets and refactoring code over time.

1. ALYSS / OCTOBER 2017
Is it me or is it them?
Boosting your conversion rate through
web performance improvements

2. ALYSS / OCTOBER 2017
Alyss Noland
Developer Advocate @ BigCommerce

3. Amazon’s calculated that a page load slowdown of just one
second could cost it $1.6 billion in sales each year. Google has
calculated that by slowing its search results by just four tenths of
a second they could lose 8 million searches per day–meaning
they’d serve up many millions fewer online adverts.
Kit Eaton, Fast Company

4. What are we talking about?
● Metrics
● Tools & Testing Strategies
● Performance Improvements
● Practical Implementation Tips

5. Understanding impact
Mobile First
It isn’t just for your stylesheets! Mobile
first also includes being mindful of data
caps and accessibility when dealing with
non-LTE speeds.
Conversion & Retention
Ever given up trying to load a website
because it took too long? Your users
probably have too.
Brand Perception
If your website feels fast, that’s great. If it
feels slow to the end user, that has more
impact (negatively) than some of the
other niceties like rewards programs.
Let’s clarify: what is web performance? Web performance refers to the speed in
which web pages are downloaded and displayed on the user’s web browser.
And web performance optimization is the field of knowledge about increasing
web performance.

6. Which metrics matter?

7. Factors that impact performance
HTTP Requests File Compression Caching Minification
Image
Optimization
Redirects Infrastructure 404 Errors CDN Usage 3rd Party Content
Fonts
JavaScript
Plugins
Mixed Content
Pre- (Fetch,
Render, Connect)
TTFB
Feature overview goes here dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua.

8. Top offenders
When optimizing a site, I focus on:
• Page size of top visited pages
• Render blocking or slow blocking requests
• Total number of HTTP requests
• JavaScript performance
Insert store
screenshot/dashboard
(optional)

9. How do I test my website?

10. Accessible (read “free”) testing tools
● Webpagetest.org
● Pingdom
● Varvy.com/pagespeed
● Developer tools in your browser of
choice

11. Performance Profiling in Chrome
Source: https://umaar.com/dev-tips/

12. Filter the testing noise
When using these tools, you get a lot of data.
For example, if you are on a SaaS platform, you may have less control over your
TTFB, if you can pre-fetch/render/connect, and the critical rendering path.
For folks managing their own hosting, the cost of a CDN may not be as accessible
and infrastructure improvements may come more slowly due to budget caps.

13. Okay, but how do I improve my
website?

14. Page Size
Image size
Is your website serving up that 4098 x
4098 px PNG that you uploaded? If your
host or tools don’t support image
optimization, try running images
through tinypng.com first and resize.
Don’t forget retina devices!
JavaScript
Try to keep your JavaScript under 300
kB per page (this will change over time).
Are you loading JS on a page where it
isn’t used? Get more precise! Can you do
it with CSS? It is more performant over
JavaScript that provides the same
effects.
GZIP & Minify
CSS, JavaScript, and HTML don’t need to
be prettified when served to the
browser. Get rid of that white space and
compress that file once you’re done.
The HTTP Archive Report, which gathers technical information from 500,000 of
the web’s most popular websites, reports that average page weight increased
16% during 2015 to reach 2,262 kB. In 2013, page size increased by 32%. It will
continue to climb.

15. Render blocking CSS & JavaScript
In order to optimize the time to first render by the client:
• Use CSS media types & queries for stylesheets needed
only under certain conditions
• Make JS asynchronous for external scripts
• Defer loading of JS that isn’t critical for the initial page
render
• Leverage server-side rendering if using a javascript
framework to construct the page
72.9%
Of all websites use JQuery

16. Optimize HTTP Requests
HTTP/2! It’s new, shiny, and it allows multiple resources to be loaded in parallel
using only one connection.
If you’re still on HTTP1.1, try domain sharding. If you use a CDN, it may already
support this. This will enable you to parallelize downloads across hostnames.
Reduce the number of assets your pages need to load. Try image sprites (unless
you are on HTTP/2), as an example.

17. Now, what?

18. Practical Implementation Advice
If you’re in the middle of the project, don’t get hung up on the details of
optimization. Write code, then refactor and optimize.
Set a web performance budget. Make the budget reasonable and achievable. This
will keep you from moving the goal post and over-focusing long after the benefits
have tapered off.
Don’t audit your site just once. It easy to set it and forget it. Schedule quarterly or
yearly performance audits to make sure you are within your performance budget.
Don’t forget: fast is good, but good ux is better.

19. ALYSS / OCTOBER 2017
Thank you!