The Ultimate Technical Guide to Increasing Website Speed and Increasing Revenue
Website speed has become more important for online businesses to run profitable marketing efforts. A slow website can deter visitors, increase bounce rates, and negatively impact your conversion rates. As a conversion rate optimization (CRO) expert, you understand the paramount importance of site speed in enhancing user experience and maximizing conversions.
Website speed has become more important for online businesses to run profitable marketing efforts. A slow website can deter visitors, increase bounce rates, and negatively impact your conversion rates. As a conversion rate optimization (CRO) expert, you understand the paramount importance of site speed in enhancing user experience and maximizing conversions.
How Website Speed Affects Conversion Rate
We all know the slower the website, the lower the conversion rate and total revenue. There can be a difference of nearly 80% from a slow to fast-loading website!
Here are some benchmarks we compiled from formal industry studies showing the impact of website speed based on seconds to load:
In this comprehensive guide, we'll explore the top methods to improve your website's speed, along with step-by-step instructions on how to execute them. By the end of this article, you'll have a clear roadmap to optimize your website for speed and ultimately boost your conversion rates. This is a highly technical guide that goes far beyond the basics of just removing code you aren’t using. Let’s dive into it!
💡 Expert Tip: We highly recommend setting a weekly time on your calendar to check your website speed. Often, 3rd party apps auto-update code or improvements to your website. Alternatively, you can use the site-speed tracking on heatmap's dashboard to check this anytime and attribute daily changes in code to what your website speed looks like.
1. Delete Unused Apps
Especially on Shopify, WooCommerce and Wordpress, a common mistake by marketers and developers is that deleting an app from your website does not remove the code from your website. When you delete an app (stop paying for it) a majority of apps cannot remove the code from your website. If you have been running your online business for several years, there’s likely dozens of apps you’ve installed with code still on your website, slowing down performance and directly hurting revenue.
The most common place to check is your Header (after <head>) and look for scripts of apps you’re no longer using on your store.
2. Image Optimization
Images play a significant role in website aesthetics, but they can also be a major drag on performance if not optimized correctly. Because images are often large files to load, handling these properly is mission-critical. To strike a balance between visual appeal and speed, follow these steps:
- Resize Images: Use image editing software to resize images to the specific dimensions required for your website. Avoid using larger images that must be scaled down in the browser.
- Compress Images: Utilize image compression tools like TinyPNG or JPEGoptim to reduce file sizes without sacrificing quality.
- Use Image Formats Wisely: Choose the appropriate image format - JPEG for photographs and PNG for graphics with transparency. Avoid using uncompressed formats like BMP.
- Implement Lazy Loading: Lazy loading ensures that images load only when they enter the user's viewport. Implement this with HTML attributes or JavaScript libraries like lazyload.js.
- Use .webp images: .webp images keep the same quality of image (do not make images blurry) and are typically 75% smaller! Shopify automatically transfers PNGs or other image files into .webp images. If you’re using any other CMS, make sure to upload images in .webp format. You can look at various free tools on Google to find converters.
3. Pre-loading and Lazy-Loading Elements
Preloading and lazy loading are two techniques used to improve website speed and optimize user experience. They help reduce initial page load times and make your website more efficient. “Above the Fold” elements is the content you see when a user first lands on your website without scrolling. This is the first thing users see and must be loaded before elements lower on the page, so getting a fast Above the Fold section is mission-critical for improving revenue and conversions through site-speed optimization.
Lazy loading is the practice of deferring the loading of non-critical resources until they are actually needed. This can significantly reduce the initial page load time by preventing unnecessary resource requests.
💡 Expert Tip: Elements Above the Fold should be pre-loaded, and elements Below the Fold should be lazy-loaded.
Preloading involves loading resources (such as images, scripts, stylesheets, and fonts) in advance, before they are actually needed. This can be particularly useful for critical resources that are required for the initial rendering of your webpage.
Determine which resources are critical for rendering Above the Fold content (the portion of the webpage visible without scrolling) and overall page functionality. These resources should be preloaded.
You can use HTML link tags with the `rel="preload"` attribute to specify resources that should be preloaded. For example:
For images, you can use the `link` tag with the `as="image"` attribute or use JavaScript to preload them like this:
For lazy-loading images, there are two ways to lazy load, using HTML or Javascript.
For images, you can use the `loading="lazy"` attribute on the `<img>` tag to enable lazy loading:
You can also implement lazy loading for JavaScript files by dynamically loading them when required. This is often done using the Intersection Observer API to load scripts when elements come into view.
By combining preloading Above the Fold and lazy loading Below the Fold with these additional optimization techniques, you can significantly improve your website's speed and overall user experience. Remember to regularly monitor your website's performance to identify and address any potential bottlenecks.
4. Enable Browser Caching
Browser caching allows the browser to store static files locally, reducing the need to fetch them from the server on subsequent visits. To enable browser caching, follow these steps:
- Configure Cache Headers: Set up cache control headers in your server configuration or content management system (CMS). Utilize "Cache-Control" and "Expires" headers to define caching rules. Ask your developers for support if you’re unable to do this yourself.
- Leverage CDNs: Content Delivery Networks (CDNs) like Cloudflare or Amazon CloudFront can distribute cached content globally, further reducing server load and latency. For Shopify stores, you can use Edgemesh or Nostra to transfer your CDN & DNS to faster alternative than the Shopify-provided CSN.
5. Minify and Combine CSS and HTML
Large and unoptimized CSS and JavaScript files can slow down your website. Minifying and combining these files can significantly improve load times. Here is an example of combining the code of an HTML file called index.html
And the following CSS file (styles.css):
Inline the CSS to HTML
Instead of linking to an external CSS file, you can inline the minified CSS directly in the HTML file within a <style> tag in the <head> section. Here's the modified HTML:
By following these steps, you've combined the minified CSS directly into your HTML file, reducing the number of HTTP requests and making your web page load faster. This technique is especially useful for small projects or when you want to optimize for initial page load speed.
💡 Expert Tip: or larger projects, it's often better to serve the CSS separately and use other optimization techniques like HTTP/2, caching, and CDNs to ensure efficient delivery of assets.
6. Optimize Server Response Time
The time it takes for your server to respond to a request can affect your site's speed. To optimize server response time:
- Use a Fast Hosting Provider: Choose a reputable hosting provider with optimized server configurations and reliable hardware. www.Nostra.ai is a stellar 3rd party app to use for Shopify stores to get a faster hosting provider.
- Content Delivery Network (CDN): As mentioned earlier, using a CDN can distribute server load and reduce response times.
- Server-Side Caching: Implement server-side caching mechanisms like opcode caching (e.g., APC or OPcache) and object caching (e.g., Memcached or Redis) to store frequently used data and reduce database queries. Most Ecommerce stores don’t need to rely on Server-Side Caching as much as non-Shopify stores.
7. Optimize HTML and CSS Delivery
This is one of the most important elements for optimizing website speed. Every line of code on your website, no matter how small, does have an impact on website speed. This is not a “quick fix” here, so this will take a lot of hands-on development resource but can give one of the largest impacts. Regardless of the 3rd party apps you use to improve website speed, in tech we call this “garbage-in, garbage-out” meaning no 3rd party apps can make too large of an impact on a website that has unoptimized HTML and CSS. Ensure efficient delivery of your website's HTML and CSS by following these guidelines:
- Minimize HTTP Requests: Reduce the number of requests by using CSS sprites for icons and combining multiple stylesheets into one. Combining these together minimizes the total number of HTTP requests when a user tries to load your website.
- Inline Critical CSS: Include critical CSS inline within your HTML to ensure that Above the Fold content loads quickly. There’s a surprising amount of inline CSS on websites that most are unaware of, which typically has more impact than standard CSS.
- Load CSS Asynchronously: Use the "preload" attribute or JavaScript to load non-critical CSS asynchronously. This allows inessential code to load after the essential elements load to make your website interactive as quickly as possible.
8. Reduce Server-Side Redirects
Minimize server-side redirects, which can add unnecessary latency to page loading. Use tools like Screaming Frog or Google Search Console to identify and fix redirect chains or loops.
A very common redirect for Ecommerce websites are geo-location apps, which redirect users to different domains. If you have multiple-country website domains, it’s highly encouraged to combine all of these into one core domain, typically with a “.com” ending.
9. Content Delivery Networks (CDNs)
Content Delivery Networks can significantly enhance website speed by distributing content across multiple servers globally. Here are some alternative recommendations for optimizing CDNs:
- Image and Video Optimization: Use a CDN that offers image and video optimization features. These CDNs automatically compress and serve media files in the most efficient format, reducing load times.
- Caching Strategies: Leverage the CDN's caching capabilities effectively. Implement caching rules for different types of content (e.g., static assets, dynamic content) to ensure optimal performance.
- Security and DDoS Protection: Choose a CDN that provides robust security features, including DDoS protection and web application firewalls. A secure website ensures uninterrupted service and reliability, contributing to better user experiences. This doesn’t have the most impact on website speed, but while you’re evaluating the best CDN to use, include this in your selection process.
10. Mobile-First Design and Performance
Mobile optimization remains crucial for improving website speed and conversion rates. Your desktop and mobile websites are effectively different codebases. “Drag and drop” CMSs like Shopify and Wordpress are very misleading because you can apply code to Desktop and it automatically converts it to mobile. This is not mobile-first design (or development), and on average, websites have 80%+ mobile visitors so this is mission-critical. Here are alternative recommendations for mobile optimization:
- Accelerated Mobile Pages (AMP): Consider implementing AMP for content-heavy pages. AMP ensures lightning-fast loading times on mobile devices, which can significantly boost user engagement and conversions.
- Mobile-Optimized Images and Videos: Optimize images and videos specifically for mobile devices. Use responsive images and implement lazy loading to reduce mobile data usage and improve speed.
- Mobile-Friendly Navigation: Ensure that your website's navigation and user interface are mobile-friendly. Simplify menus and make it easy for mobile users to find what they need quickly. “Mega-Menus” with dropdowns, additional images, and many options take a long time to load. Also for conversion-rate purposes, it’s been proven that a “busy navigation” with tons of options are not great for the user experience. Keep your navigation concise and effective. We recommend running split tests to optimize your navigation.
Conclusion
By focusing on pre-loading and lazy-loading content, images, scripts, and prioritizing mobile-first design and performance, you can provide a faster and more engaging user experience on your website. It’s been proven hundreds of times that a faster website will lead to higher revenue and conversion rates. Remember that ongoing monitoring and adjustments are essential to stay competitive and meet evolving user expectations in the digital landscape
How You Can Do It:
1: Download heatmap
2: Wait for 5k sessions
3: Reorganize products based on the highest revenue per session from top left to bottom right.
You made it all the way down here?
Might as well give us a shot, right? It'll change the way you approach CRO. We promise. In fact, our friend Nate over at Original Grain used element-level revenue data from heatmap to identify high-impact areas of his website to test, resulting in a 17% lift in Revenue per Session while scaling site traffic by 43%. Be like Nate. Try heatmap today.
