Black Friday & Christmas, the business online shopping season is over.
What did you learn about your site’s e-commerce performance?
Did your platform handle the load under pressure and was up 100% of the time?
What if I told you that impression metrics can be deceiving.
If you rely on Google Analytics or any other analytics software that records an impression through the client, you may not be getting all the data.
If you worked with Facebook ads, you may have noticed especially on Mobile, that while you mobile page registered a click through from the ad, the pixel that fires to let you know that the user “View Content” successfully may not be a 1:1 match.
You may not have noticed this if you are firing the “Lead” pixel to track only after they converted.
The View Content is an important performance metric.
The movement of mobile first is really important as each year, mobile has taken over desktop usage.
As a online business owner, you need to be aware the experience isn’t the same.
In fact, rural and suburb areas of the United States, and some 70% of the world is still browsing on 3G.
So while you maybe lucky enough to live some where with 4G or LTE coverage, your customers do not.
And this is why, on mobile, speed is more important than UI.
Big eCommerce are now beginning to take e-commerce site and speed performance very seriously and you should to.
You may not realize this, but you may have lost > 50% conversions simply because your website took too long to load on mobile.
53% of mobile users abandon sites that take longer than 3 seconds to load; a new study draws on anonymized Google Analytics and DoubleClick AdExchange data.
Some of the key findings from this report include:
- 46% of consumers say that waiting for pages to load is their least favorite thing about shopping via mobile.
- Average load time for mobile sites is 19 seconds over 3G.
- 53% of visits to mobile sites are abandoned after 3 seconds. (This corresponds to research we did at SOASTA last year, where we found that the sweet spot for mobile load times was 2 seconds.)
- Comparing faster sites (5 seconds) to slower ones (19 seconds), the faster sites had average session lengths that were 70% longer and bounce rates that were 35% lower.
- Mobile sites that loaded in 5 seconds earned almost double the revenue of sites that took 19 seconds to load.
- Almost half of all server requests came from ad-related calls. (Important to know, as unoptimized third-party resources, such as ads, can delay or block your page from rendering.)
Just to reiterate, some 53% of visits to mobile sites are abandoned after 3 seconds!
This is what is not recorded as a bounce by Google Analytics.
The page did not fully load to allow the analytics software to record the impression before your hard earn visitor bounced.
Big brands are now taking notice and doubling down on investing in progressive web apps for mobile.
West Elm’s progressive web app saw a 15% increase in average time spent on site and a 9% lift in revenue per visit.
Focusing on high performant, mobile first, low latency page isn’t just for e-commerce.
OpenSooq’s new PWA is only 28.3KB and has improved engagement with a 25% increase in average time on page resulting in 260% more leads.
2017’s holiday season, on average, global big box e-commerce websites were visually ready and ready to interact within 2.5 seconds on a high speed internet connection.
You might think this is fast, but this number serves as a baseline performance.
“Two hundred fifty milliseconds, either slower or faster, is close to the magic number now for competitive advantage on the Web.”
According to Harry Shum, a former speed-specialist researcher at Microsoft
However, hyper growth tech companies have been focused on higher performance setting goals that pages should be ready in under 1 second or less on desktop.
And on mobile, under 3 seconds on 3G.
In my personal experience, I found these numbers to be true on every step of your funnel, from lead acquisition to checkout.
Lead Magnet Squeeze Page
In 2018, I was running cold traffic into a lead magnet squeeze page.
Facebook will report that on mobile, I’d get 10 link click throughs, but only 4 were registered a “PageView” event.
This meant 60% of click throughs didn’t complete page loading long enough for the user to see my offer.
After all of this, my click through conversion jumped by over 100%.
It’s very important to take note that if you have a lot of mobile traffic, you should be considering how to make the page load faster above UI.
Otherwise, you have leaky funnel that is costing you tens of thousands of dollars on acquisition costs and hundreds of thousands in lost revenue.
This is why I put together a 12 step guide you can use to improve your ecommerce site performance and page speed.
- Picking a Reliable Host and Hardware Solution
- Serve Up Your Content Through a Content Delivery Network (CDN)
- Mobile First, UI Second
- Keep Popups to a Minimum
- Decrease Image Size
- Reduce Use of Hero Banner Images
- Compare The Performance Cost Of Adding A Plugin
- Compress and Reduce Image Weight
- Avoid Using Google Fonts
- Reduce URL Redirects
How Page Performance Can Impact Up To 50% of Your Conversion and Revenues?
Before mobile came along, everyone was browsing on the internet with dial up modems, then came DSL, then Cable internet.
But this change did not happen over night.
It was only within the last 5 years did internet providers step up to invest into infrastructure to make the internet more faster.
Meanwhile, companies like Yahoo and Google battled it out to be the supreme brand to be the “homepage” to the internet.
For many years, Yahoo was a household brand.
Then came Google. They touted themselves to be faster by displaying even to this day, their ability to give you an answer to your query in less a second.
Google understood that faster is better, and to them, that’s the ONLY key performance indicator or KPI that matters in their business.
And by focusing on this KPI, they were able to over take Yahoo.
There’s been many analysis between the two search engines in terms of other KPIs such as volume of data indexed, impressions, and quality of search results.
Ultimately, it boils down to which search engine deliver the results the fastest.
In e-commerce, the same KPI, that speed is very important to your bottom line.
How fast your page serves up affects not only conversions, but how long someone stays on your website.
The longer they are delighted, the more likely they are going to go through each step of your funnel, reach your checkout, and complete the purchase.
So what speed are is most important. It depends on which part of the ecommerce funnel you are trying to optimize.
There is page speed which is the total amount of time it takes to load a single page for a first time user.
If they subsequently visited your website a day later, most of these assets will be cached by the browser thus making the experience a little faster.
The other metric that is tossed around is site speed.
Site speed is a score, or an aggregate of various load times.
In most cases, you want optimize for page speed, one page at a time, starting with the first time user experience.
As your customers discover your website, they are coming through various acquisition channels such as search engines, social media, email, etc.
And in these cases, you have a short time to make a great impression before they bounce.
You may have heard that for video commercials, you have 3 seconds to catch the attention and make a first impression before they tune in.
The same goes for page optimization.
There is one other metric that can be measured which user perceived performance which can be measured and reported as “first contentful paint”
User perceived performance isn’t a single point in time — it’s more of an experience that not single metric can capture.
There are multiple moments during the load experience that impacts the user’s perception if the fast is loading “fast” or “slow”.
First Contentful Paint (FCP) is a very important metric in which the browser renders the first bit of visual content to the browser.
This signals to the user that is something is happening and loading.
So when a user clicks on a link from Facebook or Google to your shopping cart, and sees a blank white page for > 3 seconds, studies show that there is > 50% chance the user will cancel and go back.
Google Analytics will not have had a chance to fire an impression event because the page was not fully loaded and you’ll not realize that this has happened.
Your goal is to optimize for mobile first because more and more people are moving towards mobile.
The analog case of internet speed for in home desktop applies to mobile.
Today, not everyone is on blazing fast LTE.
A year ago, no U.S. operator had 4G availability score > 90%.
That meant, many were still on 3G in major cities.
This is why you want to be focus still on optimizing page load for the most common denominator, 3G for mobile first experiences.
A recent report written up on Hubspot,https://blog.hubspot.com/marketing/page-load-time-conversion-rates
- 79% of customers who are “dissatisfied” with a website’s performance are less likely to buy from that site again
- 64% of smartphone users expect a website to load in four seconds or less
- 47% of online shoppers expect web pages to load in two seconds or less
Now, think about your business.
That first time user who stumbled upon your website through a Google search or social media post on mobile.
And if they are patient enough to wait through the 3S of load time, they check your offer, and continually browser your painstaking slow website to finally add the item to the cart, and checkout.
Think about every step of your funnel, how many dropped out.
In the same report, we can conclude that
- If a website brings in 100K a day, improve load times by 1 second would generate 7K in revenue.
- Or, a 1 second delay means a 7% reduction in conversions
This is why you should take a mobile first approach, and then, any other benefits will be passed along to desktop experiences.
Picking a Reliable Host and Hardware Solution
When it comes to picking a host, most hosts are fast.
There are two main services that powers the ecommerce website.
The frontend which usually is a HTTP server such as Apache or Nginx with a scripting language like PHP or NodeJS.
And then there is backend, again, PHP which talks to a database like MySQL.
The bottle neck in most cases will be the database which you want to give it enough CPU to crunch and return the data.
And a fast hard disk such as SDD will lower latency of fetching and processing the data.
When it comes to flash sales and promotions, you want to make sure server can handle the load and not buckle under.
By starting with optimizing the web host, you can isolate other potential latency issues that could degrade performance.
Hosting companies such as Linode and Digital Ocean offer great hardware at fraction of the cost.
And they have multiple data centers across the U.S. and the world so you can expand if need be.
Serve Up Your Content Through a Content Delivery Network (CDN)
In your ecommerce strategy, you will want to think about implementing a Content Delivery Network or CDN. A CDN is a group of servers that blankets all around the world.
The purpose of these servers is to fetch your content off your server and make it readily available when visitor requests it.
This cuts down on network latency and “hops” needed between your client and the location where you server is served from.
Take for example if your target demo audience was in the United States and Europe, and your operations are in California as well as your hosting.
This means, a customer trying to access your website would have to bounced between servers in Europe, make the leap over the Atlantic, to a server likely in the east coast, and then multiple hops from there to your server in California.
That request isn’t complete just yet.
The request then must make it way back across North America, over the pond, and back to the user in Europe.
This is what is called a “round trip” request which can easily take up 500 milliseconds or 1/2 seconds on top of your page performance.
A CDN alleviates this as they invested in servers that “caches” or keeps a copy of your website in data centers around the country and world.
Some CDNs like Cacheflare will optimize your website at the DNS level so that the DNS lookup which is the process of getting your domain name, and finding it’s IP address, and fetching your SSL certificate, all of this processing is completed to the closest data center nearest to your customers.
Basically, it consolidates all the network traffic such as IP lookup, fetching the certificate, and finally, grabbing the page from your website and server it as quickly as possible to the end user.
The added benefit of a CDN is that it reduces CPU crunching time by caching the results of your webpage.
Mobile First, UI Second
Many online marketers makes the mistake of building a beautiful landing page to sell their product.
A cool font.
A huge hero image.
A parallax scrolling background.
All of this is going to impact the load time for someone on mobile.
Designing for mobile first means to focus on building an aesthetically pleasing UI with an emphasis on performance.
Before adding modals, popups, heat map tools, or sumo me plugins, find out if your page’s first contentful paint (FCP) is under 3 seconds.
If it’s under, then you have room to spare to add widgets if you believe it’s going to impact your bottom line.
Otherwise, you have to weigh in if this new widget will yield a higher ROI that is greater than the opportunity cost of losing > 50% of conversion on top of repeat buyers.
Keep Popups to a Minimum
Popups can be a double edge sword. In one way, when used correctly, in the right moment, can help nudge users to take a specific action.
In my experience, a clean modal that has a strong value proposition to a lead magnet that can be easily consumed is all you need.
Decrease Image Size
Check the size of your images. In a recent ad experiement I ran on Facebook, I used high resolution graphics for my squeeze page. They looked great on my Macbook with retina display and responds well on my iPhone X.
The reality was that this image was costing me valuable milliseconds of performance because the original size was over 450KB.
On a mobile phone with 3G connection, this may take up an additional 5 seconds to load. If a visitor who doesn’t know about your brand before or has 0 loyalty to what you have to say or offer, you probability of losing that visitor goes up by 50% after 3 seconds of wait.
In the same lead magnet experiment, I realized the images so it looks 80% decent on desktop, and offer a 2X version specific for mobile. The same target group, my conversions increased by over 100%!
Reduce Use of Hero Banner Image
In many templates, you’ll see the use of a big hero image. While this looks great, it can be a distraction from the core offer or messaging.
And, one of the few assets that are missed during image optimization.
In another lead magnet experiment, I used a background image on mobile and backbacktested page through a speed page performance tool.
The image would take an incredible amount of time to load, and blocked the page from rendering.
By removing the image to a simple white background, the offer/message was very clear and increased my conversions by another 50%.
Compare The Performance Cost Of Adding A Plugin
Today, with the advent of plugin ecosystems for your favorite SAAS products like Shopify and WordPress, you may not realize these plugins adds bloat.
A recent example I was testing was CrazyEgg to watch and observe how people used my website.
Underneath, I observed that the installation of this plugin blocked the page from loading. The scroll was less snappier, and overall experience suffered.
The decision I had to make was if there is a different way to collect this data, maybe by sampling or avoiding adding this plugin completely.
In the end, I realized I didn’t need the heat map or video screen recording function as I could leverage Google Analytics to fire events to record user behavior.