Contributors:
Amol Ghemud Published: February 13, 2019
Summary
In This Article
Share On:
‘Speed’ a phenomenon that has been one of mankind’s oldest obsession. Speed is a necessary element in today’s fast-paced world. Every industry in today’s market is trying to outpace each other in terms of speed. So being fast is not only advantageous but also necessary for survival.
This is also true for the fastest market in the world on the internet. Imagine the net to be a large marketplace and websites to be shops that are serving their customers with different services and products. Customers will prefer those shops (websites) that are fast to fulfill their needs.
Boost Performance: Load Your Site in 3 Seconds or Less
See practical tips to reduce load time and boost engagement on your website.
Want to learn how Growth Hacking can boost up your business?
According to a survey more then 50% of the users expect a website to load under 2 seconds and if it takes more than 3 seconds 40% of these users will leave that site. In another survey, it was found that more than 70% of users are not likely to revisit a site with poor load time.
So, one will naturally assume that such an important aspect would be a clear priority in the website owner’s book. But it is incorrect according to a survey done by Google itself it was found that more than 70% pages that were analyzed took more than seven seconds to load completely.
This is abysmal considering that Google itself once suffered a 20% drop in traffic for just a 0.5-second delay in speed. Even Amazon has commented that during one of their tests they found out that poor page load time is a very expensive mistake.
Now that you know why page speed is important you must be wondering how can you improve your own page speed and load it under 3 seconds. Don’t worry I got you covered here are the top 10 factors that if worked on correctly can make your site load at lighting flash speed.
1. Images
Images are considered the biggest culprit when it comes to website slowdowns. According to a study, more than 60% of the resources are used to load images when a website is loaded. It is clear that images take up a lot of bandwidth and if not optimized properly they can cause a major offset in your load time.
But it’s not possible to just simply get rid of images from your website so the only option left is to optimize your images for the website. The first step is to remove all images that you don’t need it,they can be old icons or images which are very large in size.
Most websites are filled with images that were downloaded directly from stock sites and then directly uploaded to the server without any optimization. Tools like compressor.io and Image optimizer are great ways to compress and optimize these images for the web.
These are a few more tools for compressing images without losing any quality
Optimizilla
Kraken.Io
Online Image Optimizer
Tiny Png
Example:-
The below image is not been optimized.
Image: Unoptimized image
If you observe, the below image has been optimized and is now 30% lighter than the previous image with almost no loss in quality.
Image: Optimized image
2. Browser Caching
When a user visits your website for the first time, some static elements of your website gets stored on their browser. These elements include HTML documents, media files, images, CSS and JavaScript files this process is called caching.
Caching is an automatic process. This is done so that when the user revisits your site the browser does not have to retrieve each and every file. This lessens the number of HTML requests to the server which in turn makes the site load much faster.
There are two ways you can enable browser caching for your site depending on your CMS. If you are using WordPress, then you try W3 Total Cache it’s an awesome plugin for browser caching for WordPress sites.
If you have a static HTML site then you can enable browser caching by giving commands through your .htaccess file. You can basically tell the browser what to cache and what not to cache.
3. Gzip Compression
Just like we compress large files using software like 7zip on our desktop there is a way to compress the web pages to reduce their size. By compressing you can drastically lower the number of resources used to load that webpage.
This compression of web pages can be done by using Gzip algorithm but you have to optimize your HTML and CSS files for compression. By compressing web pages, you can fasten the load time up to 70%.
By using Gzip your website files will be compressed into a zip file and when a user visits your site these files will be unzipped automatically for accessing the content.
If you are on static HTML site then you have to enable gzip from .htaccess.
4. Plugins
It’s a given that plugins and widgets add a lot of features to your website. But more plugins equals more resources which will slow down your website’s load time. Plugins are also known to create some serious security issues and even cause random crashes.
But then most people say we don’t have a lot of plugins installed but its still a good idea to:
Delete plugins that are outdated
Plugins that are not necessary should be deleted
Delete plugins who can’t justify the resources they use to load
Plugins which are overlapping in functionality shoul also be deleted
So how do you identify which plugins you should delete and which you should keep?
There are two ways:-
Manually by selectively disabling a plugin and then measuring any difference in your site’s performance.
You can use the alternative which is to install another plugin which is called plugin performance profiler it’s much faster and efficient then manually doing the evaluation especially if you have a lot of plugins installed.
Image: Runtime by plugin
Another neat trick is to look at your social sharing plugins these can increase your page load time significantly. To avoid that you may add/embed these social sharing buttons in the source code of your website’s theme. Also, avoid plugins that load a lot of scripts and styles if you can’t do without them try to find a less resource consuming alternative to them.
5. CDN
CDN or content delivery networks are a network of servers that are scattered around the different location to help deliver content at a faster speed. Basically, you save a cache of your site mainly consisting of static content and files on these servers. Afterwards when a user’s browser makes a request to receive the files they get it from the server which is closest to them. There is no variance between the content that goes through CDN but it loads much faster as compared to a normal server which is geographically far away. This eliminates latency and lag issues.
When your site is hosted on one server without CDN during peak hours there may be too many https requests which will result in a slowdown. But if there was a CDN then the user’s request would have been automatically rerouted to the server which is closest to their proximity.
CDN is especially useful for the sites which deal internationally because the geographical distance also plays a major part in slow load time. But if CDN is in place this can be avoided.
For example:-
An e-commerce site whose server is based in California gets an HTTP request from a user’s browser in South Africa. But because of the huge geographical difference the response time will be slow. But if they opt for a CDN the request would automatically be rerouted to the nearby server.
Larger companies own their own CDNs because well they are large companies for medium-sized companies there are CDN providers like:
Amazon Cloud-Front
Max-CDN
Akamai
Fastly
Keycdn
Image: CDN providers
6. Expires Headers
In the above pointers, we learned about browser caching about how a user visits your website and certain static files are automatically downloaded onto their drive under cache memory so the website may load faster upon their next visit but what after that?
All static files that are stored in the cache have a lifetime which is usually between 24 hours to at least one week but this lifetime can be extended up to one week to one year by adding expires headers.
Expires headers basically tells a browser if it should request a file from the server or from cache. It also sets the duration for how long the browser is going to store files in its cache.So an ideal expires headers technique is to set a long term expiry date for resources that do not need to be updated or changed on a regular basis and short duration expiry date for the ones who need to get updated on a regular basis.
You can enable and edit expire headers through entering a few lines of code in your website’s .htaccess file.
7. Reduce HTTP Requests
Whenever a user visits your website, they request certain file transfers like HTML files, CSS and JavaScript file this is done through HTTP protocol. When a lot of files are requested it generates a lot of HTTP requests which in turn slows down your site considerably.
According to a survey by Yahoo 80% of a web page load time consists of downloading files like images, stylesheets, and scripts. So, to minimize HTTP request we need to minimize the number of files requested which brings me to my next point.
8. Combine and Minimize
Since we know that reducing the number of HTTP requests is imperative to the performance of your website, we need to discuss the different ways that you can do that.
First of all, We will start with minifying. Minifying is the process of removing unnecessary formatting, whitespaces, codes, line breakers to speed up downloading and executing of a page.
Each unnecessary piece of code adds to the size of your webpage that’s why it’s essential to remove all these extra elements and make your page as lean and clean as possible.
For WordPress sites, you can use plugins like Wp rocket it does a fairly good job in minifying and combining.
Next is combining the best way to reduce an extensive number of small files is to combine them all into one large file. You can do this with your CSS, JS, HTML and using CSS sprites to combine images into one.
Combine all CSS files into a large singular CSS file do the same for all JS and HTML files. It takes less amount of time to load a single large file as compared to loading a lot of smaller files individually.
You should also combine all the images which you use repeatedly throughout your website like icons into a single CSS sprite file. What this will do is it will combine all the background images into a single image which will prevent a lot of trips to the server.
Which will result in the conservation of valuable resources. You can use the CSS background image and background position properties to put these images into proper segments.
Image: CSS background image
You can use the following tools to combine images into CSS sprite files:
CSS-Sprit.es
Drupal CSS Sprite Generator
Instant Sprite
9. HTTPS Keep Alive Response Headers
The role of HTTP is rather simple in all this it just grabs the request and delivers it to the server and then repeats the same process with every request made by the user’s browser to the server.
This process is fairly simple but also extremely slow because opening a connection for downloading every requested file individually consumes a lot of bandwidth.
This is where Https keep alive response comes in. This protocol basically allows the browser and server to keep open a single connection to exchange multiple files. This is faster as compared to opening and closing a new connection every time a file is requested.
The duration of this connection is until the user is on the site this relaxes the burden on resources like memory, network and thus speeds up your website.
Again, the process of enabling keep-alive headers you need to use the .htaccess file and enter the required code in it.
10. Choosing a Suitable Hosting Option
Choosing a hosting plan is one of the most important decision you can take to impact your site load time. Namely, there are three types of hosting-
Shared Hosting
VPS Hosting
Dedicated Hosting
Most new site owners start with the first option that is shared hosting since it’s the cheapest and budget-friendly option for hosting among the three. In shared hosting, you share server space and resources like RAM, processor, disk space with other users. This is suitable for the newcomers who have just begun to see some traffic on their site.
Secondly, we come to VPS or virtual private server hosting – this is an ideal option for small and medium business which get moderate to high traffic in their peak hours. As a VPS you share server space with other users or sites but you will have your own dedicated resources.
Due to its scalability according to a business need, it is an ideal option for medium range users.Lastly, we come to dedicated hosting. As the name suggests in dedicated hosting you don’t share server space with anyone else. You have your own RAM, CPU, and bandwidth which is significantly higher than the other two options.
Speed matters in every avenue of life. Same is true for your website especially right now when even Google takes page-speed so seriously. A load time under 3 seconds not only gets you more customer engagement but also a good ranking in SERP.
So, apply all ten tips that I have suggested. You are sure to see an improvement in your webpage load time. Now I want to leave you with one last bonus tip.
Since Mobilegeddon Google indexes the mobile pages separately. This can be very beneficial or very damaging to you depending on how you handle this. Mobile users are more concerned with fast loading speed as compared to a desktop user.
So, to improve the load time of your mobile pages. I recommend creating an amp page and try out for yourself.
For Curious Minds
Browser caching significantly enhances the user experience by storing static website assets on a visitor’s local device. When a user returns, their browser retrieves files like HTML, CSS, and images directly from memory instead of re-requesting them from the server, leading to a much faster page load. According to surveys, with 70% of users unlikely to revisit a slow site, this speed improvement is critical for retention.
Implementing effective caching involves:
Setting expiry headers: You tell the browser how long to store the cached files.
Using cache-control headers: This provides more specific directives on how caching should be handled.
Leveraging plugins: For CMS platforms like WordPress, plugins such as W3 Total Cache automate this entire process.
By reducing server requests, you not only speed up the experience for returning users but also lessen the load on your server, which is especially important during traffic spikes. Exploring caching strategies is a foundational step detailed further in the complete guide.
Image optimization is the process of reducing the file size of your images as much as possible without sacrificing acceptable visual quality. This is crucial because, as studies show, images use more than 60% of the bandwidth required to load a typical webpage, making them the single largest contributor to slow performance. A single unoptimized image can prevent your site from meeting the 3-second load time expectation that 40% of users demand.
A practical optimization workflow includes:
Choosing the right format: Use JPEG for photos and PNG for graphics with transparency.
Compressing images: Tools like Tiny Png or Kraken.Io can reduce file sizes by 30% or more with minimal quality loss.
Resizing dimensions: Ensure images are scaled to the exact dimensions they will be displayed at on your site.
By systematically optimizing every image, you directly address the biggest performance bottleneck, a strategy even giants like Amazon prioritize to avoid costly user abandonment. The full article offers more tools for perfecting this process.
The core principle of browser caching remains the same for both WordPress and static HTML sites, but the implementation methods differ significantly in complexity. For a WordPress site, enabling caching is straightforward through plugins, whereas a static site requires manual server configuration, demanding more technical expertise.
On a WordPress site, a plugin like W3 Total Cache handles everything by automatically modifying the necessary server files for you. It provides a user-friendly interface to control cache settings. For a static HTML site, you must manually edit your server’s configuration file to add directives that tell browsers how to cache your files. This offers more granular control but carries a higher risk of error if done incorrectly. The choice depends on your technical comfort and the level of control you require, a crucial decision when 70% of users may not return to a slow site. The complete guide provides configuration examples for both scenarios.
The data from Google and Amazon provides stark evidence that speed is directly tied to revenue and user engagement. Google itself experienced a 20% drop in traffic after its search results were delayed by just 0.5 seconds, a massive loss for a company of its scale. This shows that even a barely perceptible lag can cause a significant portion of your audience to disengage.
Similarly, Amazon has publicly stated that its internal testing confirmed that poor page load time is a very expensive mistake. While they did not release an exact figure, industry analysis suggests a one-second slowdown could cost them billions annually. This aligns with broader survey data indicating that 40% of users will abandon a site that takes longer than three seconds to load. These examples prove that investing in performance is not a technical luxury but a core business requirement. The full article details how to apply these lessons to your own site.
This discrepancy highlights a massive market inefficiency and a significant competitive advantage for businesses that prioritize speed. The fact that 70% of websites are failing to meet basic user expectations means that by building a fast website, you can immediately stand out and capture market share from slower competitors. When 40% of users abandon a site after just a 3-second delay, you are not just providing a better experience; you are actively preventing audience and revenue loss.
This gap means performance optimization is one of the highest-ROI activities you can undertake. By focusing on fundamentals like image compression and browser caching, you can delight users where most of your competitors are frustrating them. Companies like Google learned this early, seeing a 20% traffic drop from a tiny delay. This is not just about technical metrics; it is about capitalizing on a widespread industry failure. Dive deeper into the strategies that turn this market gap into your advantage by reading the full post.
This example serves as powerful proof that image optimization offers substantial performance benefits without degrading the user's visual experience. The 30% file size reduction directly translates to faster load times, as less data needs to be transferred. This is critical when images account for over 60% of a page's total weight and users expect a site to load in under 3 seconds.
What makes this so impactful is that it refutes the common concern that optimization means sacrificing quality. Modern algorithms used by tools like Kraken.Io and Tiny Png are incredibly efficient at removing redundant data from image files while preserving perceptual quality. This allows businesses to maintain their brand's aesthetic and showcase high-quality product visuals while still meeting performance demands. It proves that you do not have to choose between a beautiful site and a fast one. Learn how to apply these lossless techniques in the full article.
A visually-driven e-commerce site can drastically improve its load time and meet the critical 3-second user expectation with a disciplined image optimization workflow. Given that 40% of users will leave a slow site, this process is essential for protecting your sales funnel.
Follow this three-step implementation plan:
Audit and Resize: First, review all product images. Remove any that are outdated or unused. For the rest, use a basic editor to resize them to the maximum dimensions they will be displayed at on your site.
Batch Compress: Upload your resized images to a web-based compression tool like Optimizilla or Tiny Png. These services can process multiple images at once, reducing their file size significantly.
Upload and Verify: Replace the old images on your server with the newly optimized versions. After uploading, use a page speed testing tool to measure the improvement.
This simple, repeatable process addresses the single biggest factor in page slowdowns. The full guide explores more advanced techniques for further performance gains.
For WordPress users, implementing browser caching with a plugin is a simple yet powerful way to improve performance for returning visitors. Since 70% of users are unlikely to return to a slow site, ensuring a fast experience for repeat traffic is essential for building an audience. The W3 Total Cache plugin automates the complex server configurations needed.
Here is a simplified process for setup:
Install and Activate: From your WordPress dashboard, search for "W3 Total Cache," and then install and activate it.
Access General Settings: A new "Performance" tab will appear in your sidebar. Go to "General Settings."
Enable Browser Cache: Find the "Browser Cache" section within the settings page and check the box to enable it.
Save Changes: Scroll down and click "Save all settings." The plugin will automatically update your server files with optimal caching rules.
With just these few clicks, you have instructed visitors' browsers to store static files, ensuring a noticeably faster experience on their next visit. The full guide offers tips on other key settings within this plugin.
The Google example is a powerful indicator that user tolerance for delays is continually shrinking, and what is considered "fast" today will be seen as slow tomorrow. The current 3-second benchmark is already a challenge, and as internet connectivity improves, expectations will likely shift towards instantaneous, sub-second load times. This trend implies that performance can no longer be an afterthought; it must be a core principle of the entire development lifecycle.
To adapt, developers should:
Adopt a performance-first mindset: Make speed a primary goal from the project's outset, not a clean-up task before launch.
Automate optimization: Integrate tools for image compression, code minification, and caching directly into the development pipeline.
Focus on modern formats and protocols: Prioritize next-gen image formats and protocols to gain every possible advantage.
Staying ahead of this curve is crucial for future-proofing your web assets and maintaining a competitive edge. Discover more forward-looking optimization strategies in the full article.
This common mistake directly leads to the poor performance metrics cited in surveys, where 70% of pages take over seven seconds to load. A simple pre-upload checklist acts as a quality control gate, solving the problem at its source by ensuring no bloated asset ever reaches the live server. This proactive approach is far more effective than trying to retroactively fix a slow site filled with oversized media files.
An effective pre-upload checklist should include:
Correct Sizing: Is the image resized to the exact dimensions it will be displayed at?
Format Selection: Is it saved in the most efficient format?
Compression Check: Has the image been run through a tool like compressor.io to reduce its file size?
Descriptive Naming: Is the file name SEO-friendly and descriptive?
By making this checklist a mandatory step in your content workflow, you systematically prevent the primary cause of website slowdowns. This aligns your site with the expectations of the 50% of users who anticipate a load time of under 2 seconds. The complete guide details how to build this process into your workflow.
This statistic reveals that slow performance is not just an inconvenience; it is a breach of user trust and a signal of an unprofessional website. A slow initial visit creates a negative first impression that is difficult to overcome. The underlying problem is that users associate speed with efficiency and credibility, and a failure to deliver on speed erodes their confidence in your brand.
Browser caching is a direct solution to this retention problem. While it does not speed up the very first visit, it dramatically accelerates all subsequent page loads for returning users. By storing static assets like logos and CSS files locally, the browser can render the page almost instantly on a second visit. This demonstrates a marked improvement, rewarding the user for returning and rebuilding trust. It directly encourages the repeat visits that 70% of slow sites lose out on. Learn how to configure caching effectively in our detailed guide.
Blaming external factors like hosting is a common misdiagnosis for a slow website. While infrastructure plays a role, the data showing that images consume over 60% of a page's resources points to a more direct cause: unoptimized on-site assets. Even the fastest server cannot fix the problem of forcing users to download excessively large image files or making too many server requests.
The real solution lies in controlling what you can: the content on your site. On-page optimizations like image compression with a tool like Image optimizer can immediately cut down the largest portion of your page weight. Similarly, enabling browser caching reduces the number of requests to your server, which is often a bigger bottleneck than raw bandwidth. Focusing on these on-page factors provides direct, measurable improvements and is the correct approach for addressing why 70% of sites fail to meet user expectations. Explore a complete checklist of on-site fixes in the full article.
Amol has helped catalyse business growth with his strategic & data-driven methodologies. With a decade of experience in the field of marketing, he has donned multiple hats, from channel optimization, data analytics and creative brand positioning to growth engineering and sales.
Growth Strategy and Planning
