Load Speed Guide

Load Speed Guide

What is Load Speed?

Load speed refers to the amount of time it takes
for a web page to load and become fully
interactive.

1. Site Speed: This is a broader measure that

refers to the overall performance of a website
across multiple pages. It averages the loading
times of various pages to provide a general
:
 times of various pages to provide a general
idea of the performance a user might expect
across the whole website.

2. Page Speed: This specifically measures the

time it takes for a single page to load. It is a
micro-level metric focusing on individual
pages of a website.

Why is it important in e-
commerce?
Consumer attention spans are on the decline. A
2020 study from Deloitte pointed out that 70% of
shoppers consider page speed a big factor in
deciding whether to buy from a retailer.

This really highlights how crucial it is to keep an

eye on load times.

The real trick is finding that sweet spot—packing

your website with enough info and content to
boost conversions without letting your page
speed drag, ensuring a smooth user experience.

If you're investing thousands of dollars into

design, product research, ads, fulfillment, and
:
 design, product research, ads, fulfillment, and
customer support, but neglecting to ensure
optimal load speeds, you're essentially burning
money.

This oversight is particularly short-sighted given

that load speed issues are highly solvable.

Bounce Rates & User Experience

Bounce rate is a metric used to measure the
percentage of visitors who land on a page of your
website and then leave without clicking through to
any other pages.

When a website loads slowly, users often lose

patience and leave before the page fully loads.

Even if they stick around long enough for the page

to load, the slow speed can lead to frustration,
decreasing the chances that they'll make a
purchase.

When page load times goes from 1 to 3 seconds,

the chance of a bounce increases by 32%.

When it goes from 1 to 5 seconds, the chance

:
 When it goes from 1 to 5 seconds, the chance
of bouncing jumps 90%.

Ranking
Load speeds are crucial not just for user
experience but also for SEO. In fact, they're
among the top 20 factors that Google considers
when ranking websites.
:
 For example, a study by Backlinko, which
analyzed 11.8 million Google search results, found
that the average page speed for a first-page
result was just 1.65 seconds.

This highlights a clear message: the faster your

website loads, the better your chances of ranking
well on Google.

High Traffic
This is especially critical for websites that
experience high traffic during sales seasons.

50% of ecommerce consumers have experienced

slowdowns during “high-traffic” occasions.

Imagine dedicating two months to crafting an

irresistible offer, conducting thorough product
:
 research, and perfecting your ad campaign, only
to miss out on potentially hundreds of thousands
in revenue because of load speed issues.

How do I find my page speed?

1. https://pagespeed.web.dev/ (Google’s Tool)
2. Google Analytics Site Speed
3. https://www.webpagetest.org/
4. https://www.pingdom.com/
5. https://gtmetrix.com/

What is healthy?
:
 What is healthy?

For reference, a study by portent found that 86%

of e-commerce pages they measured loaded in 5
seconds or less. (Desktop)

However, there is a big difference between 1-5

seconds.

A site that loads in 1 second has an e-commerce

conversion rate 2.5x higher than a site that loads
in 5 seconds.

So generally site load time of 0-3 seconds should

be ideal but you should do your best to get that
number as low as possible. As every second can
be the difference in thousands of sales.

Where can we fix and how?

:
 Where can we fix and how?

Images
Images often make up a large part of the data
loaded on a web page. Large or unoptimized
images can slow down a website because they
require more bandwidth to download.

Here are some strategies:

• Choose the Right Format: Different image

formats are suitable for different types of
images. For example, JPEG is good for
photographs with lots of colors, while PNGs
are better for images that require
transparency. WebP, a newer format, provides
superior compression and quality
characteristics compared to JPEG and PNG
and is supported by many modern browsers.

• Compress Images: Reducing the file size of

:
 •
images without significantly impacting the
quality is essential. Tools like Adobe
Photoshop, GIMP, and online compressors like
TinyPNG or Compressor.io can dramatically
reduce file sizes.

• Resize Images: Ensure images are not larger

than necessary. For instance, if the maximum
display size of an image on your site is
800x600 pixels, uploading a 4000x3000 pixel
image is unnecessary. Resizing an image to its
display size reduces the file size.

• Lazy Loading: Refer to this section.

• Use CDN: Refer to this section.

Tools:
1. https://tinypng.com/
2. https://compressor.io/

HTTP Requests
The relationship between HTTP requests and load
:
 The relationship between HTTP requests and load
speed is key in web performance optimization.
Every time a webpage loads, the browser makes
HTTP requests to fetch essential resources like
HTML, CSS, JavaScript, images, and fonts.

The number and efficiency of these requests are

critical in determining how quickly the page loads.

Here are some strategies:.

• Minimize Requests: One of the simplest ways

to improve load speed is to reduce the number
of HTTP requests. This can be achieved by
simplifying the design of your site, reducing
the number of elements on each page, and
merging multiple stylesheets or scripts into
single files.

• Concatenate and Bundle Files: Combining

multiple CSS or JavaScript files into one
reduces the total number of requests. Tools
like Webpack, Rollup, or Gulp can automate
this process for development.

• Use CSS Sprites: CSS sprites combine

multiple images into one single image file with
different parts shown in different areas of the
site through CSS. This reduces the number of
image requests.
:
 • Asynchronous Loading for JavaScript:
Loading JavaScript files asynchronously
means that the webpage can be rendered
while the JavaScript is still loading, thus not
blocking the display of content.
Discuss with your developer to ensure best
practices are carried out.

Lazy Loading
Lazy loading is a web development technique that
delays the loading of non-critical resources until
they are needed, typically when they enter the
visible part of the webpage.

This method significantly reduces initial load

times, conserves system resources, and
enhances performance, especially on pages
heavy with images or videos.

JavaScript Libraries: For more control over how

and when assets are loaded, there are several
JavaScript libraries and frameworks that support
lazy loading, such as jQuery Lazy, Lozad.js, and
others.

Content Delivery Network (CDN)

:
 If you're in New York and want to access a
website of your favorite store in London, which is
hosted on a server in the U.K., you might face
slow loading times as your request needs to travel
across the Atlantic Ocean.

To solve this, a CDN would keep a cached version

of the London store's website in multiple locations
globally (known as Points of Presence, or PoPs).

This way, you can access the content from a

server closer to you, significantly speeding up the
loading process.

Some examples of CDN services include

Cloudflare or Akamai.

Server Response Time

Improving server response time is crucial for
:
 Improving server response time is crucial for
speeding up your website and enhancing user
experience.

Some things to consider:

• Dedicated or Cloud Hosting: Opt for

dedicated or cloud hosting solutions that can
scale with demand, particularly important
during sales or peak shopping periods.

• E-commerce Specific Hosting: Some hosting

solutions are optimized for e-commerce
platforms like Magento, WooCommerce, or
Shopify, offering specialized configurations to
enhance performance.

Fonts
Optimizing fonts is a crucial step for enhancing
load speed, especially for e-commerce websites
that rely heavily on text to communicate with
customers.

Here are some strategies:

• Choose Web-Friendly Fonts: Opt for fonts

that are designed for web use, as these are
generally optimized for faster loading.
Common web-friendly fonts include those
provided through services like Google Fonts.
:
 • Font Subsetting: Font subsetting involves
selecting only the specific characters your
website actually uses from a font. This can
significantly reduce the font file size without
altering the appearance of your website.
There are various online tools and plugins
available that can assist with font subsetting,
making the process efficient and
straightforward.

• Font Compression Techniques: Techniques

like WOFF2 compression can significantly
reduce font file size without compromising
quality. Most modern browsers support
WOFF2.

• Implement Font Display Swap: The font-

display property in CSS allows you to specify
how a font is displayed based on whether and
:
 how a font is displayed based on whether and
when it is downloaded and ready to use. When
set to swap , the browser uses a fallback font
to display the text until the custom font has
fully downloaded.

Once the custom font is available, the browser

swaps the fallback font with the intended
custom font. (Your developer should know
how to do it)

Tools:
1. https://fonts.google.com/ (Web-friendly
Fonts)
2. https://www.fontsquirrel.com/tools/webfont-
generator (Font Subsetting)

Mobile
During the first quarter of this year, 66% of orders
placed on websites were made via mobile devices.
This significant statistic highlights the critical
need for mobile optimization to ensure a seamless
shopping experience for the majority of users.

We can do this by prioritizing above-the-fold

content:

• Asynchronous Resource Loading

Techniques: Asynchronous loading allows
:
 Techniques: Asynchronous loading allows
resources to load in the background,
independent of the main content rendering.
This prevents these resources from blocking
the page rendering, thus speeding up overall
page load times.

• Prioritizing Critical Content: Focus on

loading the above-the-fold content—such as
headlines, key images, and calls to action—
first. This content is what users see
immediately upon arriving at the page, so
prioritizing it ensures they have a valuable
experience right from the start.

Browser Caching
: