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:
Official Website
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.
Official 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.
- Use a CDN
- Enable a browser cache
- Right Web Host
- Minimize HTTP requests
- Reduce server response time
- Enable Gzip Compression
- Optimize Images
- Optimize CSS Delivery
- Reduce the Number of Plugins
- Minimize Redirects
- Minify CSS & JS
- Fix 404 Errors
- Consistent URL
- CSS placed before JS
- Enable Expires Headers
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:
WP Fastest Cache
WP Fastest Cache
W3 Total Cache
W3 Total 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
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.
This is a heading
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.
instead of
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: ) 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:
Wordfence Security
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
P3 (Plugin Performance Profiler)
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
This post first appeared on Latest Web Technologies Blog [ Tips-Strategies-Guide ] - InferaSolz, please read the originial post: here
