Website Speed Optimization: How to Speed Up Your Website (18 Techniques)

Website-Speed-Optimization

Website Speed Optimization is using the strategies and techniques to speed up your site & make it faster to load in the web browsers.

You can use different tools & techniques to improve website speed. If your website loads slowly then you will lose your site rankings in search engine results.

You can not increase your site speed by using only one technique. It requires a lot of efforts & tweaks to optimize your website speed.

I have listed over 20 website speed optimization tips to increase your website speed. Moreover, you can use these techniques for both WordPress & Non-WordPress Sites.

One of my blog posts How to Start a Blog on my old site was taking 7.3 seconds to load. This post size is 15.3 MB because it contains a lot of images.

blog site speed before

Later, I used a few website performance optimization techniques & reduced the speed to 3.4 seconds which is 114.71% improvement in the site speed.

blog site speed after

I am currently splitting this big post into multiple chapters (Posts) to reduce load time.

Why Should I Increase Website Speed?

Well, there are a lot of benefits of increasing site speed. Improved website speed will help you to increase search rankings, increase conversion rates & improve the user experience.

According to an infographic by Kissmetrics:

  • 40% of the site visitors abandon the website that takes more than 3 seconds to load.
  • 47% of the consumers expect a web page to load in 2 seconds or less.
  • A 1-second delay or 3 seconds waiting time decrease customer satisfaction by 16%
  • 73% of mobile internet users say that they’ve encountered a website that was too slow to load.
  • A 1-second delay in page response can result in a 7% reduction in conversions.
site loading time infographic

Walmart has improved their website speed, and they found:

  • For every 1 second of improvement, they experienced up to a 2% increase in conversions.
  • For every 100 ms of improvement, they grew incremental revenue by up to 1%
walmart speed case study

According to the case study conducted by Soasta, Mobile pages that are 1 second faster experience up to 27% increase in conversion rate.

conversion rate 1 sec faster

Till now, you must have understood, why it is so important to improve website speed.

How to Test Website Loading Speed?

There are plenty of services available to check your website speed, but I recommend three of them:

  1. GTMetrix
  2. Pingdom
  3. Google Pagespeed

GTMetrix is a great website to analyze your website speed. It uses PageSpeed & Yslow to do speed analysis of your website. GTMetrix provides different suggestions to improve your website speed.

dmarketer-site-speed

Pingdom tests your website from different locations such as Dallas USA, Melbourne Australia, Stockholm Sweden, etc.

Pingdom tool also provides statistical information on websites such as file request size and time, requests by its content type & domain, etc.

dmarketer site speed pingdom

Gooogle Pagespeed won’t tell you website load time, but it provides the score and suggestions to improve site load time for both Desktop & Mobile devices.

dmarketer google pagespeed

You can get free site speed issue fixing report with Google’s thinkwithgoogle site test tool.

How to Improve Website Loading Speed?

You should use different ways to improve your website loading speed. Whether you are using any CMS like WordPress, Joomla, Drupal or pure HTML/CSS site, you have to apply the techniques given below to increase your website speed.

  1. Optimize Images
  2. Switch to Powerful Web Host
  3. Use CDN to Serve Static Resources
  4. Serve Cached Website
  5. Use AMP to Fast Load Site on Mobile
  6. Minify Website Assets
  7. Reduce HTTP Requests
  8. Remove Render Blocking Javascript & CSS
  9. Enable Gzip Compression
  10. Reduce Server Response Time
  11. Reduce Multiple Redirects
  12. Optimize Database
  13. Use Video Hosting Service
  14. Disable Hotlinking & Leeching of your content
  15. Optimize PHP Performance
  16. Use DNS Prefetch
  17. Enable Keep Alive
  18. Fix 404 Error Pages

Only WordPress Related Website Speed Optimization Tips:

  1. Use rock-hard theme framework
  2. Limit Post Revisions
  3. Limit number of WordPress plugins
  4. Divide Comments into Pages
  5. Divide Long Posts into Pages (Chapters)
  6. Disable Pingbacks & Trackbacks
  7. Lazy Load Disqus
  8. Update WordPress and All Plugins

1. Optimize Images:

According to the httparchive.org report of May 2017, on average 50.48% of the website page contents are Images.

httparchive image report

You should use techniques given below to optimize your site images.

Compress Images:

Images are of different types: GIF, PNG, JPG or JPEG, SVG, BMP, ICO, WEBP, TIFF.

Image file formats used on the web:

image type usage statistics

WEBP & TIFF has market share of less than 0.1%

Google developed WEBP image file format. It is the best image file format used for websites, but it doesn’t support all browsers.

It only supports Google Chrome, Opera, Opera Mini, Android Browser & Chrome for Android. Therefore, it is not used widely.

PNG & JPEG images have high market share. The rise of GIF images is making web page slower to load because of their large size.

So, It is important that you should compress all your images before uploading to your server.

List of the image compressor sites:

.png – http://compresspng.com/

.jpg or .jpeg – https://tinyjpg.com/

.gif – http://gifcompressor.com/

Compreepng.com is a great website which reduces the image size by more than 70%.

compressed images

If you are using WordPress, then you can use WP Smush plugin. Once you upload the images in the WordPress, WP Smush plugin automatically compresses them.

Serve Scaled Images:

A scaled image is an image that has been scaled to match the size that it is displayed.

If your image is 500×500 and you are displaying it at 50×50, then the browser has to download the 500×500 big image & rescale it to 50×50 which is inefficient, increases the load time & uses higher memory to decode.

An image with 500×500 dimensions has more size as compared to 50×50 image, so you have to resize the image using tools like Photoshop, Preview, or GIMP.

Resize.it is a good website to resize your images.

Another solution would be using srcset & sizes attribute for images.

The srcset and sizes syntaxes are used to provide the browser with a list of image sources that are identical apart from their size (same aspect ratio, same focal point) and how they’ll be displayed, then allow the browser to choose the source best for the user’s current viewport size, display density, and the size of that image in the page layout.

<img src="https://inautus.com/wp-content/uploads/2017/06/Website-Optimizations-1024x682.jpg"
alt="Website Speed Optimization"
width="1024"
height="682"
 srcset="https://inautus.com/wp-content/uploads/2017/06/Website-Optimizations-1024x682.jpg 1024w,
https://inautus.com/wp-content/uploads/2017/06/Website-Optimizations-300x200.jpg 300w,
https://inautus.com/wp-content/uploads/2017/06/Website-Optimizations-768x512.jpg 768w,
https://inautus.com/wp-content/uploads/2017/06/Website-Optimizations.jpg 1280w"
 sizes="(max-width: 1024px) 100vw, 1024px "/>

If you are using Genesis Framework Theme for your WordPress site, It will automatically add srceset & sizes attribute to your images.

Specify Image Dimensions:

The browser can begin rendering the page even before images are downloaded; it means the browser already knows the dimensions of the images.

If the browser doesn’t know the image dimensions, then It has to download images first to check dimensions & then render the page.

If you haven’t provided the dimensions of images or the specified dimensions don’t match the actual image dimensions then the browser will require repainting, once the images are downloaded.

You can avoid the repainting of the images by providing width & height, either in the <img> HTML tag or using CSS.

e.g.

<img src="https://inautus.com/wp-content/uploads/2017/06/Website-Optimizations-1024x682.jpg" alt="Website Speed Optimization" width="1024" height="682" />

Lazyload Images:

Lazy loading of images is nothing but the delaying the loading of the images until it is required. You can delay loading of images until user scrolls down the page at the location where images are placed.

You can use appelsiini Jquery lazy load plugin to Lazyload images. If you are using WordPress, then install BJ Lazyload plugin.

Like images, you can also Lazyload videos. Use Lazyload for videos WordPress plugin; It will replace embedded Youtube & Vimeo videos with clickable preview images.

2. Switch to Powerful Web Host:

Changing your web hosting provider could dramatically increase your website performance.

If you are using shared hosting, then your server is sharing its resources with a lot of other sites. It will decrease the performance of your website.

However, It is fine to use shared hosting, If you are just starting your site/blog, but you should switch to either VPS cloud or managed hosting once your site began to receive traffic floods.

I would recommend using DigitalOcean or Hostgator Dedicated Server to host your website. The only problem is you have to be tech savvy to host your site on these platforms.

You have to deal with any problem you face such as site hacking, SSL installation, etc. (You will get $10 DigitalOcean credit, If you signup with this link.)

I would recommend below three hosting providers for your WordPress site:

WPEngine (High Budget)

This web hosting has a high cost if you have a large number of monthly visitors. More than 60,000 enterprise companies are using WPEngine to host their WordPress site. If you have a large budget & If you want to focus on your business rather than infrastructure, this is the best choice for you.

Kinsta (Medium Budget)

Kinsta is using Google Cloud Platform to host websites, So definitely It is an excellent choice for WordPress web hosting. It provides managed & Fast WordPress Hosting.

Siteground (Low Budget)

Siteground is one of the best hosting provider founded in 2013. It has good support, and It is best for both new & established WordPress websites.

Buy the hosting from any of the above providers for your WordPress site & make a difference.

3. Use CDN to Serve Static Resources:

CDN (Content Delivery Network) serves static resources of your website such as Images, CSS files, Javascript files, Audios, Videos, etc. It is the collection of distributed networks across different geographical locations around the globe.

These networks will store your site’s all static resources.

Max CDN Networks

(MaxCDN Distributed Networks)

CDN will serve static resources to the site visitor from nearest distributed network which helps to decrease latency and improve performance & user experience.

I use MaxCDN service, and it is one of the best CDN providers so far.

If you are accessing this site from San Jose, USA, then static resources will be served from San Fransisco as it is the nearest distributed network to San Jose.

Once you sign up with MaxCDN, create a pull zone & replace your sites all static resources host name with MaxCDN provided host name. You can also use your custom domain like cdn.yourwebsite.com

e.g. https://yourwebsite.com/images/logo.png would become https://yourwebsite-nguq6nnd31.netdna-ssl.com/images/logo.png

If you are using SSL Certificate for your website, install Shared SSL in MaxCDN too. (You can also buy dedicated SSL certificate in MaxCDN.)

maxcdn shared ssl

If you are using WordPress W3Total Cache plugin, then it is very easy to setup MaxCDN host name.

Go to CDN option available under Performance menu & Enter MaxCDN authorization key, Create or select already created pull zone & Enter host name provided by MaxCDN.

maxcdn w3total config

4. Serve Cached Website:

Caching of site resources is another way to improve website speed.

Caching is the process of storing data in a Cache. A Cache is a temporary storage but fast access memory. All the files are saved in a cache storage and later accessed directly from it without an additional request to the server.

This approach reduces a lot of requests and increases the website performance.

Following are some ways of caching your website:

Use Varnish:

Varnish is a reverse proxy HTTP accelerator software. You can install it in front of your HTTP server (Apache, Nginx) & Varnish will create static files for all your dynamic (PHP, Python) web pages.

If the static file is not present in the Cache storage then Varnish redirect the request to HTTP server, HTTP Server returns the request back to the Varnish and cache that requested file.

If the static file is present, then Varnish directly serves it from Cache storage.

You can easily understand this concept with this image:

varnish cache working

Varnish installation guides:

If you are using WordPress, then install a W3Total Cache plugin. This plugin has a lot of features that will help you to improve your website speed.

The W3Total Cache plugins generate static HTML files for all your blog posts and pages & serves it to the site visitors. After you installed this plugin Go to Performance menu & click on General Setting.

Enable Page Cache; it will cache all your blog posts and pages.

w3total-page-cache-setting

Leverage Browser Caching:

When the browser renders a web page, it stores its assets on the local computer. We have to leverage this local storage by adding expires headers for static resource assets such as Images, Javascript, CSS, PDF files.

You can use website speed optimization tips given below to leverage browser caching for internal site resources, but it would not have any effect on external site resources such as Google Analytics JS, Google Tag Manager JS, etc.

If you want to leverage browser caching for such an external site resources, you can use solution from diywpblog. But it is too much risky and required very high level of technical expertise.

Follow the tips below to leverage browser caching for your site’s internal resources:

If you are using Apache, add below code to your .htaccess file:

# BROWSER CACHING
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType text/html "access plus 1 month"
ExpiresByType text/css "access plus 1 month"
ExpiresByType text/x-javascript "access plus 1 month"
ExpiresByType image/jpg "access plus 1 year"
ExpiresByType image/jpeg "access plus 1 year"
ExpiresByType image/gif "access plus 1 year"
ExpiresByType image/png "access plus 1 year"
ExpiresByType application/pdf "access plus 1 month"
ExpiresByType application/x-shockwave-flash "access plus 1 month"
ExpiresByType image/x-icon "access plus 1 year"
ExpiresDefault "access plus 1 month"
</IfModule>
# BROWSER CACHING

If you are using Nginx, add below code into your server block:

location ~* \.(jpg|jpeg|png|gif|ico)$ {
expires 365d;
}
location ~* \.(htm|html|pdf|css|js)$ {
expires 30d;
}

Do not forget to restart your HTTP server after updating files.

If you are using WordPress, then you can easily leverage browser caching using a W3Total Cache plugin. Just enable the Browser Cache.

w3total browser cache setting

Use Cloudflare:

Cloudflare is used to accelerate and secure websites. Once you add your website in Cloudflare, it will scan your website NS records and provide you name servers.

You have to update the provided name servers at your domain registrar. Later, you can set caching level & browser caching period in Cloudflare dashboard.

cloudflare caching settings

5. Use AMP to Fast Load Site on Mobile:

AMP stands for Amplified Mobile Pages. AMP is the project by Google which uses AMP HTML, AMP JS & Google AMP Cache to speed up your website.

If your website is https://yourwebsite.com, then you can create AMP page for the same at https://yourwebsite.com/amp/

Google will add AMP icon in mobile search results which will improve CTR.

amp dmarketer

Wego increased mobile conversion rates by 95% with AMP.

wego amp case study

A lot of leading news sites such as CNBC, The Washington Post, Wired are using AMP to improve website performance on mobile devices.

If you are using WordPress, Install official AMP plugin. You can customize the look of your AMP pages with the help of AMP for WP plugin. I highly recommend using these two plugins for errorless AMP site.

I highly recommend using these two plugins for errorless AMP site.

If you are not using WordPress, then you have to hire a developer. If you are a developer, then learn how to create AMP page.

Once you create AMP page, validate it using AMP Page Validator. Also, use Google Search Console to check whether website’s AMP pages are indexed or not.

6. Minify Website Assets

Minifying Website assets such as HTML Code, CSS & Javascript Files will help you to reduce load time. The minified versions of your site’s static resources use less bandwidth.

Minification technique includes removing of whitespaces, comments, newline characters, shortening variable names & replacing verbose functions with shorter functions, etc.

If you are using WordPress, install Autoptimize Plugin. This plugin has the power to reduce site load time quickly.

Minify HTML:

Use HTML Code minifier and replace your existing HTML file with minified HTML.

HTML Minifiers:

For WordPress user, Go to Autoptimize settings & enable Optimize HTML Code option:

optimize html code
Minify Javascript:

You should minify the Javascript Code and improve the website speed.

JavaScript Minifiers:

WordPress users should enable two options in Autoptimize Setting:

  1. Enable, Optimize JavaScript Code.
  2. Enable, Also aggregate inline JS.
optimize js files

Minify CSS:

If you are using CSS pre-processors like Saas or Less, then you can configure it to output minified version.

If you are not using any pre-processors use any of the below tools to minify your CSS files:

CSS Minifiers:

WordPress users should enable below three options in Autoptimize Setting:

  1. Enable, Optimize CSS Code.
  2. Enable, Generate data: URIs for images.
  3. Enable, Also aggregate inline CSS.
optimize css files

If you don’t want to use Google Fonts, Enable, Remove Google Fonts option.

Reduce HTTP Requests:

When the browsers render the page it makes a lot of HTTP requests to load website assets such as Images, Javascript files, Stylesheets, External web assets, etc.

Performance golden rule states that 10-20% of the end user time spent on retrieving HTML document & 80-90% of time spend on making additional HTTP requests to load Images, CSS, Javascript, etc.

If you could reduce the number of HTTP requests, your website performance can be improved easily.

Following are few ways to reduce HTTP requests:

Combine CSS & Javascript Files:

Combining your multiple CSS Stylesheets into one CSS file & Combining your multiple JavaScripts into one JS file will reduce HTTP requests.

If your website has 8 Javascript files, & 3 CSS files, then the browser has to make 11 requests to download all files. If you combine the CSS & Javascript files, then the browser has to make only two requests.

After combining the files make sure your website user interface looks fine.

Make Javascript Asynchronous:

The browser downloads the synchronous JavaScript files one at a time where Asynchronous JavaScript files were downloaded parallelly which reduces the loading time.

Use async while calling the Javascript files:

<script async src="my-javascript-file.js">

VWO asynchronous Javascript Code execution:

asynchronous js

While rendering the page, If browser finds any synchronous Javascript file, it stops loading other website resources & only loads synchronous Javascript file.

If you make that file asynchronous, then the browser will continue loading other website resources while loading asynchronous Javascript file.

Use CSS Sprites:

This technique is not used widely, but It will be beneficial to reduce HTTP requests for images. CSS Sprites technique combines various images into a single file.

CSS Sprite technique will only be beneficial when you are using a lot of images in your pages for backgrounds, buttons, links, etc.

You can use background-image & background-position CSS attributes to combine files. Make sure to avoid white space while combining images.

Use HTTP/2 Protocol:

HTTP/2 protocol is a major version of HTTP network protocol. HTTP/1.1 served the web for more than 15 years, and still, it is used widely but time has come to use HTTP/2 protocol which has more benefits over HTTP/1.1

The focus of the protocol is on performance; specifically, end-user perceived latency, network and server resource usage. One major goal is to allow the use of a single connection from browsers to a Web site.

  • HTTP/2 is fully multiplexed which solves the problem of  “head-of-line blocking”. It allows multiple requests & response messages at the same time & allows a client to use only one connection per origin to load a page parallelly.
  • HTTP/2 is a binary protocol. Binary protocols are more efficient to parse, more compact on the “wire” & less error-prone.
  • HTTP/2 uses header compression to reduce overhead & load pages faster.

UpWork explains HTTP/2 Multiplexing with this image:

Multiplexing-HTTP2

If you are using MaxCDN, enable HTTP/2 protocol usage for your files.

If you have installed & configured Autoptimize WordPress plugin, It will automatically combine your CSS & Javascript files and reduces the HTTP requests.

Gravatars create separate HTTP request for each image and increase the site load time.

gravatar requests

Go to Setting–>Discussion in your WordPress dashboard & disable Gravatars.

disable gravatar

Remove Render Blocking Javascript :

Your site has both internal and external web resources such as Javascript & CSS. When the browser is rendering the page, some of these resources block the page from rendering which adds extra loading time.

The browser has to build DOM tree before rendering a page. When the browser parser encounters the Javascript, it has to stop loading other resources and execute encountered Javascript. The same thing happens for external Javascript too.

The same thing happens for external Javascript too.

This process adds extra network round-trip time & delays the page from rendering. You have to remove such a render-blocking Javascript.

Following are few ways to do the same:

Move Javascript files at the bottom of a page:

If you move Javascript files at the bottom of a page, then the browser parser will encounter it after loading all the resources.  You have to move Javascript files right before the </body> tag.

If you are using Jquery library & if you have moved it at the bottom of a page, make sure website functionalities related to the Jquery are working while loading the site and after loading the site.

Inline Javascript:

External JavaScripts blocks the page rendering which increases network latency. You should inline external Javascript if it is small.

Inlining means putting contents directly into the HTML page.

Like:

<html>
  <head>
    <script type="text/javascript">
      /* Put contents of a small JavaScript file here instead of calling it. */
    </script>
  </head>
  <body>
    <h1>This a web page.</h1>
  </body>
</html>

Defer Parsing Javascript:

As I have already discussed, you should make all your Javascript files asynchronous. One more technique to remove render-blocking Javascript is to delay loading of it.

One more technique to remove render-blocking Javascript is to delay loading of it.

You have to defer loading of Javascript files that are not required for initial page rendering or until other resources of the web page has been loaded.

You can use defer attribute to do so:

<script async defer src="my-javascript-file.js">

But according to Patrick Sexton, using async or defer will not solve the problem. You should use below script to defer parsing Javascript:

<script type="text/javascript">
function downloadJSAtOnload() {
var element = document.createElement("script");
element.src = "defer.js";
document.body.appendChild(element);
}
if (window.addEventListener)
window.addEventListener("load", downloadJSAtOnload, false);
else if (window.attachEvent)
window.attachEvent("onload", downloadJSAtOnload);
else window.onload = downloadJSAtOnload;
</script>

Add above code before the </body> tag & replace defer.js with your site Javascript file.

Optimize CSS Delivery:

If you do not optimize CSS delivery, then the browser will spend it’s time downloading the CSS & processing style data before it can render the page fully.

It is highly recommended to optimize CSS delivery for better performance. Follow the tips below to do so:

Do not use CSS @import:

@import loads CSS files separately instead of loading parallelly and creates additional HTTP request. So do not use it to load CSS files. You can link HTML element to load CSS files.

<link rel="stylesheet" href="/path/to/style.css" type="text/css" media="all">

Use only one CSS file:

You should combine all CSS files into one file. It will prevent the browser from loading multiple CSS files which will reduce HTTP requests.

Do not use CSS Style tag in HTML elements:

If you have used CSS style tag in HTML element like this:

<span style="padding: 10px; border:1px solid #000000;">CSS Style in HTML Element</span>

Do not use this type of CSS styling in HTML elements. Such a CSS Code is render-blocking and increases the site load time.

You can inline such type of code (add into the head tag):

<html>
<head>

<style type="text/css">
span {
  padding: 10px;
  border:1px solid #000000;
}
</style>

</head>
<body>

<span>This a web page.</span>

</body>
</html>

Prioritize CSS rules for the above-the-fold content:

Do you know what is above-the-fold content?

When a website loads in the browser, above-the-fold contents are visible without scrolling down the page.

above-the-fold

You should give priority to load above-the-fold content because it is directly visible to the user’s eyes without scrolling down the page.

The CSS required to load above-the-fold content is called as Critical CSS. It is relatively smaller, so you can inline it.

Find the Critical CSS for your website & add it in the head tag (inline) & defer loading remaining CSS code. This way above-the-fold content would load quickly and your CSS will not be render-blocking.

You can use any tool given below, but I would suggest using paid tool:

WordPress user can use Autoptimize Inline & Defer CSS functionality:

autoptimize critical css

9. Enable Gzip Compression:

If you enable Gzip compression for your website, it will save at least 50% of the bandwidth. You can use this tool to check whether your site has enabled Gzip compression or not.

Gzip compresses your website resources such Images, CSS, Javascript at the server side and later sends it to the browser. Compressing speeds up the network transfer.

Gzip compression can be enabled via web server configuration.

If you are using Apache add the code given below into .htaccess file:

<IfModule mod_deflate.c>
AddOutputFilterByType DEFLATE text/css
text/x-component 
application/x-javascript
application/javascript
text/javascript 
text/x-js 
text/html 
text/richtext 
image/svg+xml 
text/plain 
text/xsd 
text/xsl 
text/xml 
image/bmp 
application/java application/msword 
application/vnd.ms-fontobject 
application/x-msdownload 
image/x-icon 
image/webp 
application/json 
application/vnd.ms-access 
application/vnd.ms-project 
application/x-font-otf 
application/vnd.ms-opentype 
application/vnd.oasis.opendocument.database 
application/vnd.oasis.opendocument.chart 
application/vnd.oasis.opendocument.formula 
application/vnd.oasis.opendocument.graphics 
application/vnd.oasis.opendocument.presentation 
application/vnd.oasis.opendocument.spreadsheet 
application/vnd.oasis.opendocument.text 
audio/ogg 
application/pdf 
application/vnd.ms-powerpoint 
image/svg+xml 
application/x-shockwave-flash 
image/tiff 
application/x-font-ttf 
application/vnd.ms-opentype 
audio/wav 
application/vnd.ms-write 
application/font-woff 
application/font-woff2 
application/vnd.ms-excel
<IfModule mod_mime.c>
AddOutputFilter DEFLATE js css htm html xml
</IfModule>
</IfModule>

If you are using Nginx, add the code given below in your nginx.conf file:

gzip on;
gzip_comp_level 2;
gzip_http_version 1.0;
gzip_proxied any;
gzip_min_length 1100;
gzip_buffers 16 8k;
gzip_types text/plain text/html text/css application/x-javascript text/xml application/xml application/xml+rss text/javascript;

# Disable for IE < 6 because there are some known problems
gzip_disable "MSIE [1-6].(?!.*SV1)";

# Add a vary header for downstream proxies to avoid sending cached gzipped files to IE6
gzip_vary on;

If you are using WordPress W3Total Cache plugin, Gzip Compression has already enabled for your site. If it hasn’t enabled, head to W3Total Cache Browser Settings and enable it.

10. Reduce Server Response Time:

When the browser requests a page, the server has to send a response back to the browser. A server response time is the amount of time required for a web server to respond to a request from the browser.

If the server is taking a long time to respond, it will increase the site load time.

According to Google, Your server should send a response back to the browser in a less than 200 ms. It means your web server should be robust & reliable.

I think 98% of the time, the increase in server response time occurs because of less powerful webs server and it’s infrastructure.

Only 2% of the time, server response time increases because of poor application development such as Slow loading of database queries, use of old & insecure libraries & frameworks, etc.

So, the only solution to this problem is to upgrade to the great web hosting.

If you are using WordPress, Buy managed WordPress Hosting like WPEngine or Kinsta.

If you are not using WordPress, I would suggest buying Cloud Hosting with more CPU Power and Memory at DigitalOcean or Dedicated Server at HostGator.

11. Reduce Multiple Redirects:

If you are using only one canonical version of your website, it is great. But, It might be making multiple redirects to reach your canonical version of the site.

If your preferred website version is https://yourwebsite.com, then all other versions should directly redirect to preferred version.

e.g.

http://yourwebsite.com —-> https://yourwebsite.com

http://www.yourwebsite.com —-> https://yourwebsite.com

https://www.yourwebsite.com —-> https://yourwebsite.com

If your site is using extra redirect in between, It will slow down the site loading by creating additional round trip time.

e.g.

http://yourwebsite.com —-> http://www.yourwebsite.com —-> https://www.yourwebsite.com —-> https://yourwebsite.com

http://www.yourwebsite.com —-> https://www.yourwebsite.com —- >https://yourwebsite.com

So it is required to reduce such a multiple redirects.

You can avoid multiple redirects quickly by replacing dynamic server variables with your domain name in your .htaccess redirect code:

This code redirects all HTTP requests to Non-WWW HTTPS. Your code could be different, but RewriteRule might be same:

# START SSL Redirect
<IfModule mod_rewrite.c>
RewriteEngine on
RewriteCond %{SERVER_PORT} 80
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L] 
</IfModule>
# END SSL Redirect

Instead of %{HTTP_HOST} server variable put your website name directly:

# START SSL Redirect
<IfModule mod_rewrite.c>
RewriteEngine on
RewriteCond %{SERVER_PORT} 80
RewriteRule ^(.*)$ https://yourwebsite.com%{REQUEST_URI} [R=301,L] </IfModule>
# END SSL Redirect

12. Optimize Database:

A database is a crucial part of any website, and we should optimize it for better website performance. It is vital to do database performance tuning If you have large scale data.

A database performance optimization requires, high level of technical expertise. Most of the organization hire Database Administrator (DBA) to do such kind of job.

If you are a developer, read top 10 database performance tuning tips & SQL database tuning.

You can also use MySQL performance tuning script; this script will suggest you the recommendations on MySQL performance improvement.

If you are familiar with MySQL Queries, use OPTIMIZE TABLE query.

OPTIMIZE TABLE `table_1`, `table_2`, `table_3`;

You can do the same using phpMyAdmin to do the same. Just log in to phpMyAdmin and select database. Scroll down, click on “Check All” checkbox and select Optimize table.

phpmyadmin optimize

If you are using WordPress, you can do some basic optimization using WP-Optimize WordPress Plugin.

wp optimize tuning

Please check red colored options carefully before running optimizations.

One more important tweak to optimize WordPress database is Caching it for better performance. You can quickly enable it by using W3Total Cache plugin:

w3total database cache

13. Use Video Hosting Service:

According to httparchive.org, Video contents response size is highest in size and it is obvious.

video response size

If you have hosted videos on your web server & if your web server is not powerful, then it will make a bad impact on your site loading speed.

Therefore, It is advised to use third party video hosting service. It will not use your server resources.

You can use any video hosting provider given below:

  • Youtube – Free to use and very faster.
  • Wistia – Paid. Very fast and ideal for businesses and video course hosting.
  • Vimeo – Paid but low cost. Not that much fast as compared to Youtube & Wistia.

14. Disable Hotlinking:

Hotlinking means other webmasters directly link to your website images. It will increase the bandwidth and decreases the site performance.

So, you should disable hotlinking of your images. You can add a piece of code in your webs server configurations to do so.

If you are using Apache, add below code to your .htaccess file:

RewriteEngine on
RewriteCond %{HTTP_REFERER} !^$
RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?yourwebsite.com [NC]
RewriteRule \.(jpg|jpeg|png|gif)$ - [NC,F,L]

If you are using Nginx, add below code to Nginx server block:

location ~ .(gif|png|jpe?g)$ {
     valid_referers none blocked yourwebsite.com *.yourwebsite.com;
     if ($invalid_referer) {
        return 403;
    }
}

I will not disable hotlinking because it can block your images from showing in search engine result pages.

You should not disable hotlinking If you are providing image embed code for your site visitors. e.g. Infographic Embed Code.

15. Optimize PHP Performance:

If you are using PHP programming language, you should switch to PHP 7 version as it improves the performance of PHP execution.

Do not use PHP code to display HTML.

Prefer:

<?php 
 if(true) { ?>
   <p class="nice">This is HTML Code.</p>
<?php } ?>

Instead of:

<?php 
 if(true) {
 echo '<p class="nice">This is HTML Code.</p>';
}
?>

It would be benificial, If you use PHP caching extension like Memcache.

If you are using WordPress, Enable Object Cache & Opcode Cache in your W3Total Cache Plugin

16. Use DNS Prefetch:

DNS Prefetching suggests a browser, resolve the DNS of a specified domain before it is called. It is an excellent way to improve the speed of a website by resolving DNS before calling the domain.

You can use below code to prefetch DNS of a domain:

<link rel="dns-prefetch" href="//fonts.googleapis.com">

The code given above resolves the DNS of a domain fonts.googleapis.com before actual call is made. You should add above code in your <head> tag.

You can replace fonts.googleapis.com with the host for which you want to prefetch the DNS.

17. Enable Keep Alive:

Keep Alive enable the browser to use same TCP connection for all HTTP requests. It is obvious that using one connection to request multiple files is better than using the different connections for each file.

Keep Alive

You can enable Keep-Alive connection using your web server configuration.

If you are using Apache, add the code given below in your .htaccess file:

<ifModule mod_headers.c> 
Header set Connection keep-alive
</ifModule>

You can also enable keep-alive using your apache httpd.conf config file.

If you are using Nginx, Keep-Alive is already enabled by default. If it is not enabled, you should check for the keepalive_disable variable in ngx_http_core_module.

The default value is msie6 which disables keep-alive for all older Internet Explorer browsers. If you see more browsers next to keepalive_disable variable, remove them to enable keep-alive except for msie6.

18. Fix 404 Broken Pages:

If the page is not available on your server, it returns 404 error which means nothing was found on the page. The 404 pages could affect user experience.

The 404 pages could affect user experience & increases the server load to serve such a pages. You should consider fixing such a broken pages to decrease the load on your server.

Google Search Console provides all the 404 error pages in Crawl Errors section. You can also use Screaming Frog Spider to find out all broken pages.

If you are using WordPress, I would suggest using Broken Link Checker Plugin.

Well, This is all about Website Optimization to speed up your website.

Now:

WordPress Only Website Speed Optimization Tips:

All the above tips are useful to speed up any websites such as pure HTML/CSS, Drupal, WordPress, Joomla, etc. But I want to provide a few more tips on speeding up your WordPress website.

Why?

According to w3tech, the most popular content management system is WordPress & it powers 27% of the internet:

wordpress usage stat cms

And more importantly, I also use WordPress.

So, here are few tips to improve your WordPress site performance.

Use rock-hard theme framework:

You can not run your WordPress website without using a theme. The theme is a must-have component of your site so you must use a theme which is optimized for speed & high performance.

There are hundreds of theme marketplaces which provide a lot of themes with many features. You should always check If the theme is optimized for speed before buying it.

One of the great theme frameworks is StudioPress Genesis. I use Genesis to run my site, and it is not only optimized for Speed & performance but also for SEO.

You have to buy Genesis Framework to install Genesis Themes. Purchase the framework and install it on your WordPress site and later buy the actual theme using theme marketplaces below:

I have installed the theme which I got with the Genesis Framework and customized it accordingly.

Limit Post Revisions

WordPress Post Revisions adds extra space in your database & it could affect some database queries.

You should limit maximum numbers of post revisions to be saved in the database. Add below code in your wp-config.php file to limit post revisions:

define( 'WP_POST_REVISIONS', 3 );

Change the number in above code, depending upon the number of post revisions you want to save. Above code will save maximum three post revisions in the database.

Limit number of WordPress plugins

If you are using a lot of plugins, it will create an overhead for your server. You should delete all not necessary plugins.

You can check which plugins are slowing down your site with the help of WP Performance Profiler plugin. This is a paid but low-cost plugin.

Install the WP Performance Profiler plugin and analyze your site. Uninstall and Delete the plugins which are slowing down your website speed.

Divide Long Posts into Pages (Chapters):

You might know that longer posts rank higher in search engines and also gets a large number of shares. This is one of the On Page SEO Techniques.

If you have written a longer post with more than 5000 words and If you are using a lot of images then it will hurt your site performance.

You should divide your post into multiples posts or so-called chapters. It will improve your site speed, user experience & helps to reduce bounce rate.

Divide Comments into Pages

If you have popular article then you might have received a lot of comments on it & it is a great sign of popularity & engagement, but it will reduce your site speed.

The simple solution is breaking your comments into multiple pages & WordPress has an inbuilt solution to do this.

Just head to Setting–>Discussions & select Break your comments into pages option:

break comments in pages

Disable Pingbacks & Trackbacks

WordPress Pingbacks & Trackbacks were helpful to know who has linked or mentioned your article across the web. It can reduce your site speed & you should not use it.

Go to Discussion Settings and uncheck “Allow link notification from other blogs” option.

disable pingbacks

You can use tools like SEMRush to monitor your backlinks or brand mentions instead of Trackbacks and Pingbacks.

Lazy Load Disqus

Disqus is a comment hosting platform used by thousands of the websites. If you are using Disqus instead of the default WordPress comment system, you should lazy load it to improve site performance.

You can use Disqus Conditional Load plugin to lazy load comments.

8. Update WordPress and All Plugins

The WordPress is an Open-Source project and maintained by over 400 developers. It releases the updates frequently which contains the features like security and bug fixes, performance improvements, etc.

Your plugins & themes vendor also releases the same kind of updates frequently. You should update all your plugins, themes and WordPress Installation time to time.

Updating your WordPress, Plugins, Themes will help you to secure your site from attackers & improves website performance.

Conclusion:

Website Speed Optimization for better performance needs a lot of tweaks in your website & server. I have listed almost everything in this article to make your website faster.

Increased website speed helps to improve search rankings, conversions & user experience.Click To Tweet

Have you implemented the website speed optimization tips given in this article? Did I miss something?