Research shows that 47% of website visitors expect load times under two seconds, and if your website takes more than three seconds to load, you could be losing nearly half your visitors.
In turn, website speed affects revenue — tweaking your site to load content one second faster leads to a 7% increase in conversions.
In other word, if your site brings in 100K each day, speeding up your site by one second brings in an additional 7000 daily!
The reason is simple: no one wants to sit and watch a page load, so faster websites lead to happier and more engaged visitors.
Funny enough, content are multiplying today on web pages, even though they can deeply harm the web performance. It seems that videos and images have impact than simple text will never get!
Measuring website performance and speed
The easiest way to check your overall site speed from Google’s point of view is by running it through Google’s PageSpeed Insights. This API will provide separate results for mobile and web, as well as recommendations on how to fix the spotted issues.
The speed score is based on the underlying engine from Google Lighthouse, which you can use as a Chrome extension to benchmark your websites.
In 83% of tests run by Scaleflex - on a sample of 1000 randomly selected websites in the first 100000 websites on alexa.com - slow images were the main reason for a poor (< 50) score on Google PageSpeed Insights.
As online conversion is directly linked to the user experience, your efforts in branding could become your worst enemy!
Static contents e.g. images do play a significant part in loading times. This is why Scaleflex chose to take a closer look at each image on a specific page in its Image Performance Report. The scan of the page stresses the following items:
- Image formats
- Image sizes and weight for desktop
- Image sizes and weight for mobile
- Loading time across several PoPs in the world
… and provides you with best practices to improve your score. The report also helps you compare between your current images status and the potential gains in loading time you could observe.
Let us share here the best image optimization tips that will boost your website content in a snap!
5 tips to enhance website content delivery and provide faster digital experience
1. Image optimization
Generate all images server-side and deliver the right image size at the right moment of customers’ journey
There is no point in serving a large original image on the client’s web browser or mobile application if it’s only to create a small thumbnail. Instead, all image sizes (thumbnail, preview, and full size) should be generated server-side and then delivered to the client side accordingly. For the average broadband connection, server-image upload accelerates loading time by up to 1200%.
Leverage JPEG compression to reduce image size
The JPEG image file is the most commonly used format for images on the Web and can be compressed without visible quality loss.
While JPEG does downgrade the quality of images in the interest of file weight (in MB), it is often able to reduce the image weight by three or four times without a visible reduction in image quality.
Deliver WebP to compatible browsers, and JPG/PNG to non-compatible browsers
Developed by Google, WebP is an image format that delivers superior lossless and lossy compression for images on the Web. Compared to PNGs of similar SSIM index quality, WebP lossless images are 26% smaller in size. Compared to JPEGs of equivalent quality, WebP lossy images are 25 – 34% smaller.
Leverage the HTML5 <picture> element to make images responsive to different screen sizes
Responsive images allow for optimal page loading times on any user’s device type, window size, orientation, or resolution.
A responsive image does not rely on the default browser resizing to display images on various devices: it would be a huge waste of bandwidth to deliver an image prepared for a 15-inch laptop screen on a low-resolution four-inch smartphone screen.
Instead, responsive images are prepared in various resolutions to serve all form factors in an optimal way.
2. Implement a Multi CDN solution
Did you know that you can save up to 60 percent bandwidth and cut the number of requests from your website in half by implementing a CDN solution?
It’s true. Without a suitable CDN, you’re missing out on your full website performance potential.
Here’s how CDN works
- Your content files are hosted across an extensive network of servers (PoPs) physically located around the world.
- When a user visits your URL, the server closest to them geographically will serve up the site for them.
- The bandwidth is spared across multiple servers to reduce the load on a single server.
Single CDN setups do have some limitations though. It’s important to understand a few caveats about CDN performance.
For starters CDNs can, and do, experience outages from time to time.
Businesses that put all their eggs in this single CDN basket are at risk of disastrous consequences should their particular CDN provider’s network experience an outage.
Additionally, the speed of content delivery and the quality of user experience depends heavily on the proximity of a CDN provider’s PoPs to its web-users.
Hence, to provide full global coverage, a CDN provider needs to have a significant amount of edge servers strategically distributed around the globe.
Truth to be told, at this point there is not a single CDN provider that can guarantee an equally well-performing and reliable experience in every corner of the world.
Sure, top-tier providers like Akamai, Cloudflare, Fastly, etc. perform incredibly well in a large part of the world, but there will always be ’blind spots’, depending on the strengths of each provider.
Upgrade to Multi CDN
To mitigate these global access issues, companies are turning to Multi CDN technology. As you might have guessed, a Multi CDN setup uses multiple CDNs from different providers simultaneously to achieve better, more stable website performance.
A Multi CDN strategy is an improvement over the typical approach, where organizations subscribe to multiple CDNs based on performance requirements.
A proper Multi CDN setup provides global performance enhancements and faster websites, but most importantly, it ensures uninterrupted, continuous website uptime.
3. Minimize HTTP Requests
Hypertext Transfer Protocol (HTTP) requests are made whenever a browser fetches a file, page or picture from a web server.
These requests make up the bulk of a webpage’s loading time — as much as 80 percent.
The browser also limits requests between four and eight simultaneous connections per domain.
Loading dozens of assets at once is not an option, so you’ll need to allow for more HTTP requests, which leads to a longer load time as the page works to retrieve them all.
The good news is that it’s an easy process to decrease the total of HTTP requests:
- Load only what’s needed. For example, use conditional statements (queries) that limit the number of elements the site needs to load on mobile devices.
- Use fewer images. If your site is loading slowly because images are bogging it down, user experience (UX) is likely taking a hit in several ways. Remove distracting images to keep your site streamlined and fast loading.
4. Clean up code
Regularly audit your website for redundant and cluttered code.
You can significantly improve website performance and speed loading of your media files by reducing excess lines of coding and cleaning up your code in several other key ways.
As you adjust your website code, keep a few overarching guidelines in mind.
These techniques will pay off by decreasing your website’s server demands. When you have clean code, it will be much easier to troubleshoot and correct issues quickly, too, reducing potential downtime later.
Optimize database queries
SQL query optimization focuses on writing thoughtful SQL queries to improve database performance.
When your queries are inefficient, you risk draining the production database’s resources. Inefficient or error-prone queries can slow performance — they can even lead to downtime.
Use design pattern templates and structured coding
Design pattern templates are reusable coding structures you can apply throughout your website’s architecture.
This will help to ensure consistency across every page of your website, leading to a more seamless experience for visitors as they browse. High-quality, readable code will also make it easier to solve issues impacting speed and site performance.
Code with a mobile-first mindset
Most web pages today are opened within mobile browsers on smartphones.
It’s important to code with a mobile-first mindset to ensure mobile users are able to fully view and interact with your website's content, even on a small screen.
Having a mobile responsive website is also important because the Google search rank algorithm prioritizes these sites over non-responsive sites.
5. Cache as much as possible
Caching allows you to temporarily store web pages locally to save bandwidth and improve overall website performance. When someone visits your site, they will see the cached version unless the site has changed since the last cache.
By caching your web pages, you’ll help to ensure visitors will stick around because they’ll have a good experience from the start.
Use a tool like YSlow to check for an expiration date for your cache. You can change this date through the Apache Module mod_expires or within your website builder interface if you use one.
Unless you change your site design frequently, an expiration date of a year is usually a safe bet.
As you can see, there are various ways to quickly check your website performance and increase your website load time and speed.
Visitors to your site will have a better experience, making them more likely to become loyal to your brand.
Contact Us to know more about content acceleration over multi-CDN!
Join the newsletter to receive the latest updates in your inbox.