5. Different ways to improve the page load time of your WordPress site

website-speed-webfriendy

Page loading time is one of the topics to debate when it comes to deriving your SEO strategies. Since 2010 Google has taken website speed into account when going an update.
A slow loading page will automatically hinder your process of getting organic traffic and improves your website traffic.
A one-second delay leads to an 11% drop in page views, a 16% drop in customer satisfaction and a 7% loss in converting your business leads into customers.
A few extra seconds will definitely lead you to a huge loss in audience engagement and business conversions.
So having a fast loading website is not only essential for increasing your visibility but also helps you in increasing the brand reputation and profits.

1. Minimize HTTP requests:

Leading search engine Yahoo figures out that over 80% of the page load’s time spent on downloading the images, styles, and scripts.
This means that more the HTTP requests you need to load, more time it takes for the page to load and retrieve which subsequently increase the page’s load time.
HTTP requests can be decreased by combining the CSS/JS Files and reducing the number of images.
Combining the images will also help you to decrease the HTTP requests which can increase your page load time.

2. Optimize your images:

Images are one of the factors that increase the page loading time. The first step you need to do while optimizing your image is to scale them appropriately.
Most of the webmasters will use huge images and scale them down with CSS. But they are not aware of the fact that the browser will load the full image size.
Scale the images before you going to upload them on your site and this will automatically increase the website loading time for your users.
Compress your images before you use and this will also reduce the image loading time. There are lots of free tools are available online and you can choose the best out of them to compress the image.

Add the below code to your .htaccess file.

php

  1. <IfModule mod_headers.c>
  2.  
  3. # 1 Month
  4. <FilesMatch "\.(ico|pdf|flv|jpg|jpeg|png|gif|js|css|swf)$">
  5. Header set Cache-Control "max-age=2592000, public"
  6. </FilesMatch>
  7. </ifmodule>

3. Browser caching:

Browser caching prevents the user to download the same things each and every time they load your page. Enabling the browser caching will helps the users to save some data on their computers and also it will increase the page loading time.

Add the below code to your .htaccess file for clearing browser cache

php

  1. ## EXPIRES CACHING ##
  2.  
  3. ExpiresActive On
  4. ExpiresByType image/jpg "access 1 month"
  5. ExpiresByType image/jpeg "access 1 month"
  6. ExpiresByType image/gif "access 1 month"
  7. ExpiresByType image/png "access 1 month"
  8. ExpiresByType text/css "access 1 month"
  9. ExpiresByType text/html "access 1 month"
  10. ExpiresByType application/pdf "access 1 month"
  11. ExpiresByType text/x-javascript "access 1 month"
  12. ExpiresByType application/x-shockwave-flash "access 1 month"
  13. ExpiresByType image/x-icon "access 1 year"
  14. ExpiresDefault "access 1 month"
  15.  
  16. ## EXPIRES CACHING ##

4. Enable gzip Compression:

The concept of compression is like reducing your website into a zip file. Compression will automatically decrease your page size which helps in improving the page loading time.
Compression will also reduce the size of HTML and CSS files to 50%-70%.
Implementation of compression will depend on your web server and its settings. Contacting your hosting company will help you in fixing this.

Enable the gzip compression add the below code to your .htaccess file.

php

  1. <IfModule mod_deflate.c>
  2.   # Compress HTML, CSS, JavaScript, Text, XML and fonts
  3.  AddOutputFilterByType DEFLATE application/javascript
  4.   AddOutputFilterByType DEFLATE application/rss+xml
  5.   AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
  6.   AddOutputFilterByType DEFLATE application/x-font
  7.   AddOutputFilterByType DEFLATE application/x-font-opentype
  8.   AddOutputFilterByType DEFLATE application/x-font-otf
  9.   AddOutputFilterByType DEFLATE application/x-font-truetype
  10.   AddOutputFilterByType DEFLATE application/x-font-ttf
  11.   AddOutputFilterByType DEFLATE application/x-javascript
  12.   AddOutputFilterByType DEFLATE application/xhtml+xml
  13.   AddOutputFilterByType DEFLATE application/xml
  14.   AddOutputFilterByType DEFLATE font/opentype
  15.   AddOutputFilterByType DEFLATE font/otf
  16.   AddOutputFilterByType DEFLATE font/ttf
  17.   AddOutputFilterByType DEFLATE image/svg+xml
  18.   AddOutputFilterByType DEFLATE image/x-icon
  19.   AddOutputFilterByType DEFLATE text/css
  20.   AddOutputFilterByType DEFLATE text/html
  21.   AddOutputFilterByType DEFLATE text/javascript
  22.   AddOutputFilterByType DEFLATE text/plain
  23.   AddOutputFilterByType DEFLATE text/xml
  24.  
  25.   # Remove browser bugs (only needed for really old browsers)
  26.  BrowserMatch ^Mozilla/4 gzip-only-text/html
  27.   BrowserMatch ^Mozilla/4\.0[678] no-gzip
  28.   BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
  29.   Header append Vary User-Agent
  30. </IfModule>

5. Optimize your CSS and JS:

Your CSS will load before your website starts loading and hence as long as CSS and JSloads longer the user needs to wait.
Optimizing CSS anf JS will help the user to download faster and load your website in a quick frame of time. CSS and JS minimization also removes the extra files from your code which increases the page loading time.
Online users always demand better online experience so just a second delay will cost you heavily. So follow the above-mentioned ways to improve your page loading time.

php

  1. <IfModule mod_headers.c>
  2.   <FilesMatch "\.(js|css|xml|gz|html|ttf)$">
  3.     Header append Vary: Accept-Encoding
  4.   </FilesMatch>
  5. </IfModule>

Add the below mention complete code to your .htaccess file..

php

  1. <IfModule mod_headers.c>
  2.  
  3. # 1 Month
  4. <FilesMatch "\.(ico|pdf|flv|jpg|jpeg|png|gif|js|css|swf)$">
  5. Header set Cache-Control "max-age=2592000, public"
  6. </FilesMatch>
  7.  
  8.  
  9. ## EXPIRES CACHING ##
  10.  
  11. ExpiresActive On
  12. ExpiresByType image/jpg "access 1 month"
  13. ExpiresByType image/jpeg "access 1 month"
  14. ExpiresByType image/gif "access 1 month"
  15. ExpiresByType image/png "access 1 month"
  16. ExpiresByType text/css "access 1 month"
  17. ExpiresByType text/html "access 1 month"
  18. ExpiresByType application/pdf "access 1 month"
  19. ExpiresByType text/x-javascript "access 1 month"
  20. ExpiresByType application/x-shockwave-flash "access 1 month"
  21. ExpiresByType image/x-icon "access 1 year"
  22. ExpiresDefault "access 1 month"
  23.  
  24. ## EXPIRES CACHING ##
  25.  
  26. </IfModule>
  27.  
  28. <IfModule mod_deflate.c>
  29.   # Compress HTML, CSS, JavaScript, Text, XML and fonts
  30.  AddOutputFilterByType DEFLATE application/javascript
  31.   AddOutputFilterByType DEFLATE application/rss+xml
  32.   AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
  33.   AddOutputFilterByType DEFLATE application/x-font
  34.   AddOutputFilterByType DEFLATE application/x-font-opentype
  35.   AddOutputFilterByType DEFLATE application/x-font-otf
  36.   AddOutputFilterByType DEFLATE application/x-font-truetype
  37.   AddOutputFilterByType DEFLATE application/x-font-ttf
  38.   AddOutputFilterByType DEFLATE application/x-javascript
  39.   AddOutputFilterByType DEFLATE application/xhtml+xml
  40.   AddOutputFilterByType DEFLATE application/xml
  41.   AddOutputFilterByType DEFLATE font/opentype
  42.   AddOutputFilterByType DEFLATE font/otf
  43.   AddOutputFilterByType DEFLATE font/ttf
  44.   AddOutputFilterByType DEFLATE image/svg+xml
  45.   AddOutputFilterByType DEFLATE image/x-icon
  46.   AddOutputFilterByType DEFLATE text/css
  47.   AddOutputFilterByType DEFLATE text/html
  48.   AddOutputFilterByType DEFLATE text/javascript
  49.   AddOutputFilterByType DEFLATE text/plain
  50.   AddOutputFilterByType DEFLATE text/xml
  51.  
  52.   # Remove browser bugs (only needed for really old browsers)
  53.  BrowserMatch ^Mozilla/4 gzip-only-text/html
  54.   BrowserMatch ^Mozilla/4\.0[678] no-gzip
  55.   BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
  56.   Header append Vary User-Agent
  57. </IfModule>
  58.  
  59. <IfModule mod_headers.c>
  60.   <FilesMatch "\.(js|css|xml|gz|html|ttf)$">
  61.     Header append Vary: Accept-Encoding
  62.   </FilesMatch>
  63. </IfModule>

5 Best WordPress Plugin you can use for caching and Boost your page load time.

See the below mention links:

  1. WP Fastest Cache
  2. W3 Total Cache
  3. WP Super Minify
  4. WP Smush
  5. Autoptimize

About webfriendy

Sumit Malviya | Web developer and Blogger

View all posts by webfriendy →

7 Comments on “5. Different ways to improve the page load time of your WordPress site”

  1. Excellent blog here! Also your site loads up very fast!
    What host are you using? Can I get your affiliate link to
    your host? I wish my website loaded up as fast as yours lol

  2. After exploring a number of the blog articles on your site,
    I seriously appreciate your technique of blogging. I book marked it
    to my bookmark website list and will be checking back
    soon. Please check out my website too and let me know how
    you feel.

  3. Thanks for ones marvelous posting! I really enjoyed
    reading it, you will be a great author.I will make sure to
    bookmark your blog and will come back sometime soon. I want to encourage you to ultimately
    continue your great job, have a nice afternoon!

  4. I am really loving the theme/design of your web site.
    Do you ever run into any web browser compatibility
    issues? A number of my blog visitors have complained about my blog not operating correctly in Explorer but looks great
    in Firefox. Do you have any solutions to help fix this issue?

Leave a Reply

Your email address will not be published. Required fields are marked *