15 Tested Tips to Reduce Website Loading Time
Slow responsive webpages are a turn off to the website visitors. As a result, they will opt to leave the site rather than wait for it to load.
You might be wondering:
Research Stated
- One second delay in your site’s load time can cause a 7% loss in conversions?
- … And an 11% loss in page views?
- … And a 16% loss in customer satisfaction? Do I need to go on?
According to kissmetrics, Amazon calculated that a 1-second delay in the average site load time could potentially cost the site owner $2.5 million in annual lost sales.
Analyse Your Website Speed with Free Tools
1. Google PageSpeed
You can check your website page speed for Desktop and mobile version as well as a percentage score. find the possible optimizations & actionable page optimizations tips provided by Google.
Here’s I showed you, how you can use Google PageSpeed Tool to make your website 2-3x more compelling:
2. GTmetrix
GTmetrix gives you insight on how well your site loads and provides actionable recommendations on how to optimize it. It provides Pagespeed Score, YSlow Score, Loaded Time & Recommendations.
Now it’s time for me to show you how to use GTmetrix to get optimization actionable tips for your website.
Note: You can try another tool named Pingdom (Official Website: https://tools.pingdom.com/). You can Find Performance insights & depth analysis of your website.
What’s the bottom line?
Website slowness can be very costly because it diminishes user experience, plus reduces the numbers of views and traffic your website gets. Furthermore, without traffic, your website and business will be failing, and there will be no conversions to boost your business.
In addition, Google announced website speed would begin having an impact on search ranking. Now, the speed at which someone could view the content from a search result would be a factor.
Finally here’s the deal:
To avoid all that, 15 insanely actionable Website Load Optimization tips that you can use right now.
Note: It’s Mandatory that you make sure you fix these 4 points out of the 15 points mentioned.
Here are the 4 points
Enable Browser Cache, Minimize Server Response Time, Optimise Images, 404 fixations.
# 1
Use a CDN (Content Delivery Network)
Content Delivery Network is a system that comprises of distributed servers used to deliver web pages and website to users. It brings the web page to the user depending on their geographic location.
Thus, if there is a CDN closer to your user’s geographic location, use that to increase web page load speed. The faster the server system, the less time your web page will take to load.
If you want to see the Top 5 CDN service providers in one place, then you’ll LOVE this guide.
Google Cloud Platform
Google offers easy to set up, easy to run Secured & Fully Featured platform for business.
Features:
- Use Google’s core infrastructure, data analytics, and machine learning.
- Secure and fully featured for all enterprises.
- Committed to open source and industry-leading price-performance.
Price: Freemium (Get $300 free credit to spend over 12 months)
Official Website: https://cloud.google.com/
Incapsula
The Incapsula Content Delivery Network (CDN) is a global network that uses intelligent caching and cache control options to improve your website performance while lowering bandwidth costs.
Features:
- Dynamic caching technology based on machine learning.
- Instant cache purge & cache rule propagation.
- Security & bot management features
Price: Premium (Get 14 days free trial)
Plans: Pro 59$ per site/m; Business 299 $ per site/m; Enterprise Req Quote
Official Website: https://www.incapsula.com/cdn-content-delivery-network/
Amazon CloudFront
Amazon CloudFront is a global content delivery network (CDN) service that securely delivers data, videos, applications, and APIs to your viewers with low latency and high transfer speeds.
Features:
- Global, Growing Content Delivery Network
- Secure Content at the Edge
- Deep Integration with Key AWS Services
Price: Freemium
Plans: Free Usage Tier; and On-Demand Pricing
Official Website: https://aws.amazon.com/cloudfront/
Cloudinary
Use Cloudinary’s image service instead. With simple integration that developers will love you’ll get immediate access to cutting-edge image capabilities. Save R&D time, get to market faster, reduce your IT costs and improve your viewers’ experience.
Features:
- Easy integration with your development framework.
- Upload images with a single line of code.
- SOn-the-fly real-time video manipulation and web optimization.
- Powerful management UI and API.
Price: Freemium
Plans: Free; Plus 99 $/m; Advanced 249 $/m; Enterprise / Custom Plans: On Request
Official Website: https://cloudinary.com/
MaxCDN
SecureCDN is an all new, global network with built-in WAF, DDoS and flat, global pricing. StackPath is security, speed, and scale for developers.
Features:
- Instant Purge and Provisioning.
- Instant SSL & Realtime Reporting.
- Total Automation.
- Move More to the Edge.
Price: Premium
Plans: https://www.maxcdn.com/pricing/
Official Website: https://www.maxcdn.com/
# 2
Enable a browser cache
Enable your browser cache so that you can avoid unnecessary server requests when loading a page. To improve your webpage load speed, you should consider setting expire headers. They are crucial in that they help determine whether a webpage is requested from the source or browser’s cache.
It stores webpage content e.g. images, making it faster to load the page when a user revisits the page.Leveraging your browser cache is important for assets that are constantly changing, and for the webpage’s load speed.
How to leverage browser caching?
- Change the request headers of your resources to use caching.
- Optimize your caching strategy.
# Step 1 The way to enable caching is to add some code to a file called .htaccess on your web host/server. Cpanel>> File Manager>> .htaccess
# Step 2 The code below tells browsers what to cache and how long to “remember” it. It should be added to the top of your .htaccess file.
## EXPIRES CACHING CODE ##
## EXPIRES CACHING ##
ExpiresActive On
ExpiresByType image/jpg “access 1 year”
ExpiresByType image/jpeg “access 1 year”
ExpiresByType image/gif “access 1 year”
ExpiresByType image/png “access 1 year”
ExpiresByType text/css “access 1 month”
ExpiresByType text/html “access 1 month”
ExpiresByType application/pdf “access 1 month”
ExpiresByType text/x-javascript “access 1 month”
ExpiresByType application/x-shockwave-flash “access 1 month”
ExpiresByType image/x-icon “access 1 year”
ExpiresDefault “access 1 month”
## EXPIRES CACHING ##
# Step 3 Save the .htaccess file and then refresh your webpage.
WordPress Widgets for browser cache:
Note: You can find more about page speed & it enables browser cache suggestions on the page speed docs https://developers.google.com/speed/docs/insights/LeverageBrowserCaching which describes some of the techniques/tools to compress appropriately.
# 3
Choose the right Web-Host
Webhosting plays a huge role in the time it takes for your website to load. This is often measured by the speed (in milliseconds) it takes for a webpage to load.
It’s a familiar difficulty: Which hosting provider should you trust with your sites? So many hosting companies, so many price range.
This is crazy:
According to Adam Berry of digital director at Wingard Creative Great hosting boils down to the 3 S’s: speed, support, and security.
You need the ability to rapidly scale your website as your target audience grows and the resiliency to handle sudden bursts of high traffic said Nasdaq’s Simon Ball.
Now:
If you choose the right hosting, with high speed, good scalability, security and great support, you can live a tension free life when it comes to your website.
So, here are 5 kicker points which will help you to choose the right one.
Decide what type web project you’re building or already had.
1. Blogger / Blog Site: you can choose Wp-engine
According to survey most of the people use WordPress as CMS Website Development. So you can choose any shared Linux server.
2. Company Website: Preferable Shared Server for a small-medium company
for small & medium companies you can choose a shared server. If your website is developed in PHP then choose Linux server, and if your website is developed in ASP.NET use Windows server.
3. E-commerce Website: Preferable Dedicated or Shared Server
According to research nowadays people prefer online shopping. So you f have a small e-store with fewer categories then you must prefer shared server. Also please check whether the hosting company supports your application platform (like Magento, woocommerce).
Need Add-on: CDN, SSL, Cron (optional)
4. Custom Web Application for Company: Preferable Dedicated Server
Need Add-ons: CDN, SSL, Cron (optional)
Estimate amount of traffic you expected
Generally, hosting companies charge based on storage & bandwidth usage. If few audiences visit your website, then bandwidth is low. But if suddenly your website goes viral then your website needs high bandwidth.
So, choose a hosting company, who will give you the ability to rapidly scale your Plan.
Know which type hosting you need
- Shared Server
- VPS Server
- Dedicated Server
Understand which & how many resources required
- Storage & Ram
- Bandwidth
- How many Domain & Email
- Security & Support
Know how price works & compare signup vs. renewal cost
We know, the price usually plays a major role when you are shopping for a new web host. While your costs definitely factor into your decision, don’t sacrifice support and performance.
Don’t feel lonely or intimidated on your quest for finding the right hosting company. Ask a Free Consultation and we will help you choose the right one.
# 4
Minimize HTTP requests
HTTP is a request-response feature that allows you to fetch a web page or data from its main server. When browsing on your phone, it requests the web page from the host and depending on the number of requests used; it determines the loading speed.
So, if you are using a number of HTTP requests, then it will take time to process the web page compared to when you are using lesser HTTP requests.
# 5
Reduce Server Response Time
If your server takes time to respond to user requests on a web page, it will be reflected on the web page load speed. The more time your server takes time to respond, the more time a web page will take before loading.
To increase your web page performance, aim for a server response time of 200ms or less.
# 6
Enable Gzip compression
Gzip compression helps compress web pages, JavaScript and CSS before being availed to the user on the browser.
This takes place at the server level, which is to respond to requests on the webpage from a user. With a Gzip compression, you will increase load speed and reduce the bandwidth used at the same time.
Checking Tools:
Here’s the solution
For WordPress: Gzip Compression Widget
For PHP: Try ob_gzhandler
# 7
Optimize Images
Optimizing images should be accompanied by trimming down the size of the images. Images that have a large size and have a high resolution are heavy and it’ll take time for them to load.
Needless say, they consume more bandwidth and at the same time, reduce webpage load time. It is ideal to optimize your images to at least 100Kb or lower.
Surveys performed by Akamai and Gomez reported statistics including:
- Half of web users expect a website to load within two seconds.
- A 1-second delay in page load time can decrease visitor satisfaction by 16% and can also lead to a drop in the conversion of 7% or more.
- Load time is a major contributing factor to page abandonment, and the abandonment increases as a percentage with every second of load time, with nearly 40% of users abandoning a page after 3 seconds.
- 73% of mobile internet users report that they’ve experienced problems with page load times on their devices.
Here’s is the solutions:
WordPress Free Widget: wp smush it & tiny compress images
Code for image compression in PHP
$source_url is the image, $destination_url is where to save and $quality is a number between 1 and 100 choosing how much jpeg compression to use.
function compressImage($source_url, $destination_url, $quality) {
$info = getimagesize($source_url);
if ($info[‘mime’] == ‘image/jpeg’) $image = imagecreatefromjpeg($source_url);
elseif ($info[‘mime’] == ‘image/gif’) $image = imagecreatefromgif($source_url);
elseif ($info[‘mime’] == ‘image/png’) $image = imagecreatefrompng($source_url);
//save file
imagejpeg($image, $destination_url, $quality);
//return destination file
return $destination_url;
}
You can find more about page speed and it’s compression suggestions on the page speed docs from Google and Cloudinary which describe some of the techniques/tools to compress appropriately.
# 8
Optimize CSS Delivery
CSS is a lightweight framework that speeds up the processing time of a webpage. For CSS delivery, the webpage accesses data via external file and inline.
External file loads before the page is processed while inline work with the HTML. It is therefore that you optimize the CSS delivery so that you can reduce the size of your codes, and increase your webpage loading speed.
Here are 4 Actionable Ideas to CSS Optimization
Try to create one external CSS. Combine your all CSS in a one file.
External CSS files are the main way that CSS is being used in webpages, and very likely the way your CSS is being used. In the head section of your HTML, there is something that often looks like this
<link rel=”stylesheet” type=”text/css” href=”http://yoursite.com/main.css” media=”screen” title=”style (screen)” />
If you have more than one CSS file they should be combined into one file. When you have several external CSS files the browser has to download each one before it can display your page.
This causes many round-trips to get each CSS file which results in your webpage being slow to load. This can be easily changed by combining all the CSS files into one file.
Use inline styles; add the style attribute to the relevant element.
An inline CSS is used to apply a unique style to a single HTML element & style attribute of an HTML element.
<style> …. </style>
<h1 style=”color:blue;margin-left:30px;”>This is a heading</h1>
Tip: I would encourage you to avoid using this method because inline style loses many of the advantages of a stylesheet (by mixing content with presentation).
Do Not Use @import calls for CSS
@import has a negative impact on web page performance. If you’re using !important, your CSS is structured in a way that’s not respecting the cascade properly.
@import URL(“style.css”)
Tips: Use LINK instead of @import if you want stylesheets to download in parallel resulting in a faster page.
<link rel=’stylesheet’ href=’a.css’> instead of <style>@import url(‘a.css’);</style>
No CSS in HTML things like your divs or your h1s (in element CSS)
Google PageSpeed guideline Optimize CSS Delivery, says that this will cause the browser to respond slower and that it is not going to be wise to have any such styles in our code because to do so is against the Content Security Policy of W3.
So you should remove all the CSS you use in the HTML body (example: <p style=”margin-left:10px;”></p>) and place these CSS codes inside the HTML head tag.
Find more:
https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery
# 9
Reduce the number of plugins you use on the web page
With over 50,000 plugins in the WordPress repository, If you have a couple of plugins, they may reduce your webpage load speed.
Since 40% of visitors leave a site if it takes more than three seconds to load, you should consider cutting them down, and if there are any that are not in use remove them.
The reality is, if you want to build a fully functional website with all features, you’re going to need to install some WordPress plugins.
But here’s the kicker:
Fortunately, there are many ways to prevent the issues
1. Reduce the number of plugins you use: Use fewer plugins for increasing website performance that helps to load faster.
2. Install multifunctional plugins: Try to reduce the number of plugins you use by installing plugins that include more than one feature that you need.
3. Decide what you really need and delete the rest: Review the plugins you have installed and the ones you have deactivated. If you haven’t used them in a long time or you don’t plan on using them at all, then delete them.
4. Test plugins before you install them: Test plugins on a staging site or a local environment thoroughly before installing them on a live site. This gives you a chance to catch problems before it reaches your live site.
5. Clean up your database: Plugins often take up a lot of space in your database so eliminating any unnecessary ones is a great preliminary step toward database. Check out 10 Tips for Keeping a Squeaky Clean WordPress (and Multisite!) Database for details.
6. Install a security plugin: Using a security plugin can help catch and isolate issues before they break your site. That way, you can fix the problem or delete the plugin so it doesn’t do any (further) damage.
You can try:
7. Use plugins that are regularly updated and maintained: This decreases the chances of coming across problemed plugins that aren’t going to see bug fixes and performance improvements.
8. Perform regular plugin performance scans: Some of the plugins you use are usually large thus affecting how long it takes for a webpage to load.
By using
You can measure the performance of your plugins real time.
Now:
Remove unessential plugins and find a quicker alternative over at WordPress.org
According to Our WP Development Team
- 0-5 plugins For Shared or budget Cloud Hosting
- 5-20 plugins, For Cloud hosting, VPS or dedicated servers but 10 or less is usually ideal
# 10
Minimize Redirects
Adding more redirects to a webpage adds extra HTTP request, which takes time to process on the browser. Nevertheless, redirects take more time to load, so, you should consider bringing your webpage directly to the users.
If you have any unnecessary redirects, consider cutting them down and remain with those that are relevant.
# 11
Minify your codes (CSS & JavaScript)
Minifying your codes simply means you remove all unnecessary characters from the source code. However, you should not interfere with the functionality of the code.
Defer any unnecessary codes so that you can optimize the time your website takes to respond. For mobile browsers, you should parse your codes on your browser so as to increase the website’s loading speed.
Minification of codes also helps improve mobile caching and reduce bandwidth consumption.
# 12
Fix 404 errors (avoid bad requests)
404 errors or bad requests are web page killers. If there are any missing files or broken links, it will prompt a 404 error.
Solving the errors will ensure that web pages actually load and they take less time at the loading stage. So, occasionally run your web page to ensure that there are no bad requests or 404 errors.
In addition to that, you will be saving your server’s resources because you are not wasting any useful resources.
# 13
Serve resources from a consistent URL
For webpage resources that are shared across multiple pages, you should ensure that it originates from a common URL.This makes it easier to load webpages that are linked together since they are served from the same hostname.
Instead of using a parent hostname for shared website resources, consider using a single hostname.
# 14
Let in CSS at the top and JS at the bottom
When you include CSS and JS or any other stylesheet on your webpage, it compromises the browser’s rendering process. When creating a webpage, you should arrange the CSS before the JS to reduce loading time.
Nevertheless, it helps you come up with a standard webpage which is optimal in improving the load speed of a webpage.
# 15
Enable Expires Headers
The whole idea behind Expires Headers is not only to reduce a load of downloads from the server (constantly downloading the same file when it’s unmodified is wasting precious load time) but rather to reduce the number of HTTP requests for the server.
When you specify the character set in the headers, it helps speed up how fast your browser responds. Therefore, if you are confident about your character set, you can use it instead of PHP functions.
As a matter of fact, using characters set for your headers minimizes size, thus boosting your webpage load speed.
Expires headers let the browser know whether to serve a cached version of the page.
- Reduce server load
- Increase page speed
- Cost-benefit ratio: high value
- Access needed
The idea is to set late expiry times for items that don’t change on your website (logo, colors etc). Set short expiry times for things that change regularly.
Now: add expire header
First, you need to decide on what files you update often and what file types don’t get updated often. A common list of file types we see a lot are:
- images: jpg, gif, png
- favicon/ICO
- javascript
- CSS
Then, We define our Expires Headers in the .htaccess file. This is a hidden file often found in the root of your website (via FTP).
Now, open up your .htaccess file and paste the following:
# Expires headers (for better cache control) #
# ———————————————————————-
# Expires headers (for better cache control)
# ———————————————————————-
# These are pretty far-future expires headers.
# They assume you control versioning with filename-based cache busting
# Additionally, consider that outdated proxy may miss cache
# If you don’t use filenames to version, lower the CSS and JS to something like
# “access plus 1 week”.
ExpiresActive on
# Your document HTML
ExpiresByType text/html “access plus 0 seconds”
# Media: images, video, audio
ExpiresByType audio/ogg “access plus 1 month”
ExpiresByType image/gif “access plus 1 month”
ExpiresByType image/jpeg “access plus 1 month”
ExpiresByType image/png “access plus 1 month”
ExpiresByType video/mp4 “access plus 1 month”
ExpiresByType video/ogg “access plus 1 month”
ExpiresByType video/webm “access plus 1 month”
# CSS and JavaScript
ExpiresByType application/javascript “access plus 1 year”
ExpiresByType text/css “access plus 1 year”
The most important bit is that you need to rename your CSS and JavaScript files whenever they change because your visitor’s browsers will not check them again for a year, once they are cached.
But what’s the catch?
Implementing expire header and set expire too far into future and you made an update to the site, your visitor can’t see updated one until the header expires in their browser.
I highly recommend not using the Expires Default header that sets a default time span for all resources. In most cases, you will not want to set a general expiry date for everything.
Thanks for sharing. I hope it will be helpful for too many people that are searching for this topic. Keep posting and keep this forum a great place to learn things.