Enhance Your WordPress Site Performance - 1

Saurabh Dhariwal

Saurabh Dhariwal

Published On -

05 August 2019

Last Updated -

12 September 2023
WordPress
A Guide to Enhance Your WordPress Site Performance - 1

“What’s best for the customer is the best for the business.” says, Chris Brown, the CEO of MarketCulture Strategies. The time that a user invests in your website is what your success is dependent upon. The entire nature of the business can flourish & fall on the basis of what & how you serve the needs of your customer. And in today’s superfast world of supersonic internet connectivity & usage, one can’t afford to have a slow-performing website. Every aspect of the website needs to be structured & targeted towards the needs of your target audience.
 

USER EXPERIENCE = LOOK + FEEL + USABILITY 
 

The two major components that have a direct effect of a slow-performing website is - one, the look & feel of the website and second, the usability factor of it. And hence, the enhancement of your website does matter. There are several tools available, which can help you check the score of your website and make you aware of how well optimised it is. We guide you through this process of checking the score of your website. 

And the WordPress website users, on how to optimise & enhance your WordPress site. An enhancement, which will lead to enriched user experience, wealthy quality of your website and eventually elevated & fruitful results.  

A Guide to Enhance Your WordPress Site Performance - 1

1) Host

  • Upgrading your web hosting plan is the simplest and easiest way to improve the speed of your website.

  • If you have shared hosting, you should either move to a VPS or dedicated option.  VPS (Virtual Private Servers) hosting is the best option to go for as it uses multiple servers for content distribution.

  • Your hosting should be capable to respond quickly. Response time will vary based on the server.

  • Your hosting should be able to handle multiple requests at a time. It should slow down at the time of heavy traffic.   

  
2) WordPress Theme

  • The theme which you select for your WordPress site counts responsible for the performance of your site.

  • Your theme should be lightweight and speedy.

  • The theme should not contain unnecessary images and all images should be appropriately optimized.

  • The number of files should be less for the display of the page on your site. For that, we need to combine multiple CSS into a single file. The file should be optimized. 


3) Use Effective Caching

  • A site crashes every time when it is being loaded with excessive users visiting it at the same time. Caching comes at the rescue here by avoiding the need to render the website, every single time that a user visits. 

  • Caching stores the already visited version of the website in the temporary storage area, called cache memory.

  • The web page that is cached, will not require to send the database requests each time. 

  • There are multiple plugins that can be used for caching purpose like W3 Total Cache and WP Super Cache. 

  • One can also set up caching under your general setting through VPS and dedicated server. It is only in the case of the shared server that this feature of caching is not available. 


4) Optimize Images

  • There should be a way to optimize an image on your site. If the user uploads an image with heavy file size, then it will affect the loading time of your page. In order to solve this problem, you should install a plugin which will optimize an image to reduce the file size, not reducing and affecting the quality.

  • There are various plugins available for this purpose such as Wp-SmushIt, Optimus, and so on. 

  • Other aspects of image optimisation like saving & compressing images for web, website caching, minimizing the number of JavaScript & CSS files, et al are explained in-depth in an independent. 


5) Add an Expire Headers 

  • Expire headers is a technique of letting the browser decide, whether the requested file should be fetched from the server or the browser’s cached data. 

  • Expire headers, hence, sends the request for loading the link, only after the specified rule time to use the cached data is expired.  

  • This reduces the extra load on the server and eventually helps in raising the speed of the website.

  • Below we share the guideline to serve your static files with Expire headers, which will be cached by the browser: 


1. For Apache Server

<IfModule mod_expires.c>
			  ExpiresActive On

			  # Images
			  ExpiresByType image/jpeg "access plus 1 year"
			  ExpiresByType image/gif "access plus 1 year"
			  ExpiresByType image/png "access plus 1 year"
			  ExpiresByType image/webp "access plus 1 year"
			  ExpiresByType image/svg+xml "access plus 1 year"
			  ExpiresByType image/x-icon "access plus 1 year"

			  # Video
			  ExpiresByType video/mp4 "access plus 1 year"
			  ExpiresByType video/mpeg "access plus 1 year"

			  # CSS, JavaScript
			  ExpiresByType text/css "access plus 1 month"
			  ExpiresByType text/javascript "access plus 1 month"
			  ExpiresByType application/javascript "access plus 1 month"

			  # Others
			  ExpiresByType application/pdf "access plus 1 month"
			  ExpiresByType application/x-shockwave-flash "access plus 1 month"
			</IfModule>

 

2. For Nginx Server

Nginx configuration to set Expires header for images and static assets
Assuming you are using a Unix operating system (Ubuntu, in my case);


Solution
Go to /etc/nginx/sites-available.

Open your site configuration in an editor. For example, vi veerasundar.com (Use sudo if necessary).

In the server configuration, add the code to set Expires header if a request is made to a static file. Here’s my complete configuration for this server.

server {
		        listen   80;
		        server_name veerasundar.com;
		        access_log /location/of/access.log;
		        error_log /location/of/error.log;
		        location / {
	                root   /location/of/www;
	                index  index.html index.htm;    
	                if ($request_uri ~* ".(ico|css|js|gif|jpe?g|png)$") {
	                        expires 30d;
	                        access_log off;
	                        add_header Pragma public;
	                        add_header Cache-Control "public";
	                        break;
	                }
	            }
	        }

 

After making the changes, save the file and restart nginx - sudo /etc/init.d/nginx restart.

6) Add LazyLoad to your Image

  • LazyLoad is the process of having only the images visible in the visitor’s browser window. When the reader scrolls down, other images begin to load, just before they come into view.

  • As a result, it will increase your page load time as well as it will save your bandwidth because you are loading less data for users who don’t scroll all the way down on your page.

  • There are many plugins to implement this functionality such as jQuery Image LazyLoad, Lazy Load, etc.


7) Disable Hotlinking and Leaching of Your Content

  • Hotlinking refers to loading content from another site like google fonts, few images, etc.

  • This will increase your bandwidth and page speed.

  • To overcome this situation, load content as much from your site only. Download external content in your site and load it from there.

Conclusion 
Time doesn’t differentiate and hence is equally divided amongst all us human beings. And hence, the more we respect that of others & ours in general, the more benefits it is prone to bring to us. And empowered with an experience of 160+ WordPress development, our passionate WordPress developers have framed the above suggestion for you to attain a high-performing website. To get in touch with them & learn more about it you can definitely get in touch with us. Contact us for any kind of further query or suggestions regarding the above topic of WordPress Site Optimisation.