What factors make a website load as quickly as possible?

According to Toolster’s 2024 Website Load Time statistics, websites take an average of 11.48 seconds to load on mobile, significantly worse than the two seconds it takes on desktop. This poses a real problem for developers and website owners in a mobile-first world. There is a lack of discussion about what’s needed to create faster websites. While some elements of website performance will remain out of your hands, like the user’s device and network, most levers to optimize speed are at your disposal — especially if you’re using an open source CMS like TYPO3.

We’ve compiled a guide to the most critical factors affecting performance. Drawing on our extensive TYPO3 development expertise, we offer solutions grounded in years of experience. While the core principles of performance optimization remain primarily unchanged, emerging technologies continuously offer new opportunities. At b13, we’re always watching for innovations that allow us to push performance even further.

What are the foundational areas of website speed that never change?

• Your server: The hub where your application runs, content is generated, and output is produced.
• The network: The pathway connecting your server to the user’s device, enabling data transmission.
• User’s browser: The gateway that transforms raw data from the server into a fully rendered web page visible to the user.

Before diving into the specifics, it’s good to understand that these foundational areas work together to influence how quickly your website loads. Each element, from server efficiency to how the user’s browser handles data, works together to deliver a fast website experience.

What makes a website load as quickly as possible?

There are 15 factors to keep in mind:

• Server performance:
  Consider the efficiency of your server’s operating system, CMS, and database.
• Network performance:
  Minimize the distance between the server and the user .
• Browser caching:
  Store frequently-used data locally.
• Content delivery caching:
  Store copies of website content at various global locations.
• Image optimization:
  Use smaller, well-compressed images, and, if applicable, render breakpoint/device specific image sizes.
• CSS and JS file optimization:
  Minify and optimize files.
• JavaScript:
  Limit and optimize JavaScript usage.
• Caching:
  Implement caching strategies for faster retrieval.
• Lazy loading of images:
  Delay image loading until they’re needed.
• Redirects:
  Reduce unnecessary redirects.
• Internet speed:
  Faster internet connections result in quicker load times.
• Poor hosting:
  Upgrade to better hosting services to improve overall site speed.
• Excessive plugins or scripts:
  Remove unnecessary plugins and scripts .
• Bloated code or design:
  Clean up inefficient code and simplify design.
• Outdated devices:
  Optimize the site to work smoothly even on older hardware.

Evolving user expectations for website load times

Back in the 90s, the Nielsen Norman Group found that users lost interest if a site took more than 10 seconds to load. Today, faster internet and improved technology have raised user expectations. In 2024, the general consensus is that a 2-second or less load time is best, especially for eCommerce sites. You don’t have to look far to find articles containing metrics and benchmarks on website speed and optimization. We won’t overwhelm you with the many and varied statistics — suffice it to say that Google found that as page load time goes up to 5 seconds, the probability of the web visitor bouncing increases 90%. And Amazon famously found that every 100ms of latency costs 1% in sales.

Optimizing Your Website’s Speed: Practical Solutions

Now that we’ve outlined the key factors and user expectations, let’s dive into practical solutions. As we mentioned, speed is not a single element but the result of multiple optimizations across the server, code, and network.

Server-Side optimizations

Efficient server configuration is the foundation of good website speed. TYPO3 CMS, for instance, can perform exceptionally well out of the box. However, misconfigurations or custom extensions can slow it down. Database inefficiencies and improper cache setups can degrade performance before data leaves your server.

At b13, we leverage tools like Blackfire to audit and profile applications. Blackfire helps pinpoint performance bottlenecks, guiding developers to areas where code optimizations lead to significant improvements. For a deeper understanding of TYPO3’s caching mechanisms, check out our three-part blog series that covers frontend caches, cache variants with cHash, and more advanced caching techniques.

Leveraging browser and content delivery caching

Once your server is optimized, the next step is network performance. Your audience might experience delays if they are located a significant distance away from the server. Using a Content Delivery Network (CDN) mitigates this delay by mirroring static content on servers located geographically close to your users. CDNs also offload static assets and optimize delivery through protocols like HTTP/2, speeding up requests.

Front-End performance tweaks

General Advice for Developers and Website Owners

• HTML Optimization:
  Simplify your HTML structure to save on file size. Removing optional tags or containers can reduce file size by 5-20%.
• Reduce JavaScript Usage:
  Minimizing JavaScript and relying on CSS for styling can drastically improve performance.
• Image Optimization:
  Use optimized image formats like WebP and employ lazy-loading techniques to improve load times.
• CSS and Fonts:
  Inline critical CSS and minimize custom fonts for better performance.

b13 and TYPO3-Specific Advice

TYPO3’s flexibility supports advanced front-end optimizations. Its Fluid templates enable you to minimize HTML and reduce reliance on JavaScript, a common cause of slow rendering.

At b13, we favor Vanilla JavaScript for essential functions, avoiding heavy libraries like jQuery. We also prioritize image optimization by using services like Tinify and switching to formats like WebP, which reduces file sizes.

Evolving technology and speed: A case of AMP’s decline

Google introduced Accelerated Mobile Pages (AMP) in 2015 to improve mobile web performance by limiting JavaScript and CSS, and using a global AMP cache for fast loading. Initially favored in search results, AMP's relevance has diminished, especially with the rise of Core Web Vitals focused on page speed and user experience.

When a client recently asked about AMP, I responded clearly: “We don’t do AMP anymore, and none of our websites still rely on it.” This shift illustrates how rapidly technology evolves, how important it is to work with developers who change their minds, and why we love being direct with our clients!

Adding core web vitals for optimal User Experience

Optimizing for Core Web Vitals is now essential for delivering fast, user-friendly experiences. Metrics like Largest Contentful Paint (LCP) and Cumulative Layout Shift (CLS) directly affect how visitors perceive speed and usability. To learn more about how TYPO3 supports these metrics and ways to improve them, check out our Core Web Vitals Primer for TYPO3 Users.

Make performance a requirement for your project

When commissioning a new web project, website performance should be at the top of your list of requirements. It should be considered in every step, starting early. Have developers give input while still in talks about the basic design and concept decisions. They will give valuable input about performance impact. Test your infrastructure early and often. Speed-test your templates and correct what’s impacting browser rendering before rolling out frontend templates in your CMS. Continue testing once the final content is ready.

“Treat a slow website as a bug”

Benni Mack, my colleague and business partner for 20 years, often uses the phrase: “Treat a slow website as a bug.” If you get complaints from your users, experience delays, see unexpected bounce rates, or just have a suspicious feeling that your site is getting slower, do a performance audit. Start at the server level and work to the final front-end rendering. The benefits of fixing the low-hanging fruit will pay off.

If you don’t know where to start, ask for help. We are happy to take a look and help you identify areas for improvement. As a TYPO3 partner agency, we can work with your developers or agency to demonstrate how we use Blackfire, optimize image loading, configure a CDN for your website, or improve the performance and speed of specific landing pages—or your entire website.