How To Increase WordPress Website Speed?
Website speed means how much time the browser takes to load a full webpage from the website hosting server. Site speed is an important determinant in measuring websites’ performance. A fast website presents a better user experience and creates a good impression on the visitors’ minds.
On the other hand, If your site takes much time to load, then most visitors will leave the site and you will not have a chance to show them the content of your site. The site will lose its users and also SEO ranking since search engines take it as a ranking factor. Slow site speed decreases the conversion rate and increases the bounce rate as users possibly leave the site before it loads.
Studies have shown that a site-loading speed of more than 2 seconds usually results in about 47 percent of visitors bouncing off the website. So, to keep about half of your visitors interested, you should speed up your WordPress. (Source: codeinwp.com)
If you want to multiply your business websites’ revenue, beat your competitors, and to get repeat visitors you must need a high-speed website. Let’s dive into the article to learn the best 10 tips for WordPress speed optimization:
1. Choose a Better Web Hosting Provider:
One of the biggest reasons for slow site speed is poor web hosting service. Good hosting services provide facilities to optimize speed and give some extra care for keeping the site up and fast. If the web hosting server is not configured properly it will impact site speed.
There are two major types of web hosting service such as dedicated hosting and shared hosting. It is recommended to host websites on dedicated cloud servers rather than hosting on a shared server. In shared hosting, multiple users/websites are hosted on a single web server. Oftentimes shared hosting fails to provide fast loading times especially during peak traffic hours.
on the other hand, a dedicated hosting server that is solely devoted to one user provides the most optimized performance than shared hosting.
Shared hosting is preferred in terms of lower cost though. There are several good shared hosting providers like Bluehost, Siteground, Hostgator, etc. You should justify and explore the resources to get on board with a better web hosting service.
2. Use a Lightweight WordPress Theme:
Heavy WordPress themes with too many elements and higher page sizes decrease the site performance.The Minimalist WordPress themes are faster than a typical theme. The faster loading theme contains less code with optimized CSS and Javascript code; makes fewer requests to the server, and the total page sizes comparatively small.
In general, developers give more concerned with visual aesthetic looks than speed and performance. The excessive use of javascript and other animation not only beautify the site but also makes it heavier. In resultant it will slow down the site.
Before choosing a theme for your dream website you should pick a lightweight theme that is speedy, contains clean, professional coding, and optimized page sizes.
3. Image Optimization:
Images are vital for making web content attractive and more compelling. however, large image sizes increase the page loading time. For this reason, you have to optimize and compress your images before placing them on the website.
There are different types of image file formats. The most used formats are jpg and png. jpg is lossy compressed file formats while png is a lossless format. JPG is the preferred choice when it’s important to have a small-sized file.
There are several image optimization tools and plugins are available. These free tools help to optimize and reduce the image sizes. For instance: Online tools Tinypng, ImageOptim and WordPress plugins Smush, ShortPixel etc. are popular for image optimization.
Heads Up! sometimes image optimization tools destroy image quality and make the image blur. So you have to use them carefully.
4. Leverage Browser Caching Code:
By configuring browser caching code you can optimize the site speed. In general, a website contains lots of images, interactive contents and scripts and it takes time to load these from the server one by one.
Generally leveraging your browser’s caching means that you can specify how long web browsers should keep images, CSS, and JS stored locally.
Browser caching code tells the browser that the downloaded files can be stored for a certain amount of time and reused from the local copies instead of requesting the server for them again and again.
That way the user’s browser will download less data while navigating through your pages for their next visits, which will improve the loading speed of your website.
There are two caching control response headers. one is Cache-Control headers and another one is Expires headers.
Cache-Control is the newest version and more useful for having finer control over caching behavior. It is also the recommended method.
- Cache-Control Header Code for Nginx Server:
Step 1: To add the header module, open the default Nginx configuration file in nano or your favorite text editor:
$ sudo nano /etc/nginx/sites-available/defaultStep 2: Find the server configuration block, which looks like this:
...
# Default server configuration
#
server {
listen 80 default_server;
listen [::]:80 default_server;
. . .
Step 3: Add the following two new sections here: one before the server block, to define how long to cache different file types, and one inside it, to set the caching headers appropriately.
. . .
# Default server configuration
#
# Expires map
map $sent_http_content_type $expires {
default off;
text/html epoch;
text/css max;
application/javascript max;
~image/ max;
}
server {
listen 80 default_server;
listen [::]:80 default_server;
expires $expires;
. . .
step 4: To enable the new configuration, restart Nginx.
$ sudo systemctl restart nginx- Expires Header Code For Nginx Server:
Just copy the code as shown below and add it to the server block. This will set the expired headers in Nginx:
location ~* \.(jpg|jpeg|gif|png)$ {
expires 365d;
}
location ~* \.(pdf|css|html|js|swf)$ {
expires 2d;
}- Cache-Control header for Apache server:
Find your .htaccess file in the root of your domain and add the below code
Header set Cache-Control “max-age=604800, public”- Expires Header Code for Apache Server:
Copy and paste the below code into your .htaccess file:
<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/webm "access plus 1 year"
ExpiresByType video/mp4 "access plus 1 year"
ExpiresByType video/mpeg "access plus 1 year"
# Fonts
ExpiresByType font/ttf "access plus 1 year"
ExpiresByType font/otf "access plus 1 year"
ExpiresByType font/woff "access plus 1 year"
ExpiresByType font/woff2 "access plus 1 year"
ExpiresByType application/font-woff "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 image/vnd.microsoft.icon "access plus 1 year"
</IfModule>5. Enable GZIP Compression:
The loading speed of a website depends on the page size that has to be downloaded by the browser from the webserver. If we can reduce the file sizes that are required to load while browsing a website, then the website will load faster. In this regard, Gzip compression is a popular method for reducing file sizes.
You can use Gzip to compress the files and make the files smaller; thus it will take less time to transfer the resources from the server.
- Nginx Gzip configuration
step 1: For Nginx users, the following snippet can be added to the configuration file(/etc/Nginx/Nginx.conf) in order to enable Nginx Gzip.
gzip on;
gzip_disable "msie6";
gzip_vary on;
gzip_proxied any;
gzip_comp_level 6;
gzip_buffers 16 8k;
gzip_http_version 1.1;
gzip_min_length 256;
gzip_types text/plain text/css application/json application/x-javascript text/xml application/xml application/xml+rss text/javascript application/vnd.ms-fontobject application/x-font-ttf font/opentype image/svg+xml image/x-icon;
step 2: Save and close the file to exit.
step 3: To enable the new configuration, reload Nginx.
$ sudo systemctl reload nginx- Apache Gzip configuration:
Add the following snippet to your .htaccess file. This code needs to be placed at the end of the existing code of the .htaccess file to enable Apache Gzip compression for JavaScript, XML, text, fonts, HTML, and CSS.
<IfModule mod_deflate.c>
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
AddOutputFilterByType DEFLATE application/x-font
AddOutputFilterByType DEFLATE application/x-font-opentype
AddOutputFilterByType DEFLATE application/x-font-otf
AddOutputFilterByType DEFLATE application/x-font-truetype
AddOutputFilterByType DEFLATE application/x-font-ttf
AddOutputFilterByType DEFLATE application/x-javascript
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE font/opentype
AddOutputFilterByType DEFLATE font/otf
AddOutputFilterByType DEFLATE font/ttf
AddOutputFilterByType DEFLATE image/svg+xml
AddOutputFilterByType DEFLATE image/x-icon
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE text/javascript
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/xml
</IfModule>
6. Use Powerful Optimization Plugins:
There are several WordPress performance optimization plugins. These are used for page caching, minifying and optimizing CSS, HTML, and Javascript code, image lazy loading, CDN integration, removing render-blocking resources from above the fold, database optimization, and so forth.
Check out the online resources to choose the lightweight and the most efficient plugins that are compatible with your theme. You can use free or paid plugins and these are available on WordPress.org. A few of the plugins that I can recommend are WP Rocket, Autoptimize, Async JavaScript, WP Fastest, etc.
7. Cleanup and Optimize WordPress Database:
It is important to clean up the WordPress database by removing non-essential information. Unwanted files increase the database size hence it causes negative impacts on the website performance, enlarge database backup size and speed.
To optimize your database delete spam, post revisions, drafts, tables, unused tags, trashed posts, transient records and redundant files, etc. There are plugins to help you out to streamlined your website database or you can do it manually by placing some back-end code on the wp-config.php file.
8. Try to Use a Fewer Number of Plugins:
WordPress is popular for its user-friendliness and the availability of a bunch of versatile plugins that ease the task of establishing a website with all the required features and functions. Not to mention, WordPress Plugins make it possible to customize a website without coding knowledge. But it must be a problem for your site’s performance if you overload your site with dozens of plugins.
Minimize the use of plugins as much as possible. Uninstall and deactivate the less important plugins. Here is a simple trick, while looking for a plugin for a specific function, at that time also look for alternate methods such as coding resources or third-party service to accomplish the tasks. You will find simple solutions and straightforward code snippets that you can implement in the back-end without professional coding knowledge instead of doing it with a plugin.
9. Minify JS, CSS and HTML Files:
Minification is a popular method for reducing page load times and enhance website accessibility. It is referred to the activities of removing the useless characters, unused code, comments, whitespaces from CSS, JavaScript and HTML resources, use of shorter variable and function names in the code and so on. By minifying the codes it reduces the amount of data and loading time for the browser to render a page; thus it improves the website speed and saves bandwidth.
While creating resources for websites, developers use spacing, comments, long-form variables names to make the code readable and these are useful for them, But these characters are worthless for web servers and browsers during translating the webpage to end-users. Well-structured minified code serves the same functionality with improved site speed and performance.
10. Use CDN Service:
The users of your website may face different loading speed depends on their geographical location and distance from your hosted server. The more distance the website data needs to traverse the more will be the loading time. The site loading time will rise if the visitors are located far away from your web hosting server. For example: If your hosting provider server is located in the USA, the visitors of Asia will get slower speed than the visitors of the USA.
Content Delivery Network (CDN) services allow you to fasten the speed of your site by using their servers. These network servers serve a webpage against an end-user request from the possible nearest location. When you take this service your host CDN will keep a copy of your website in their various data centers that are located in different countries.
As CDN service providers create network servers all around the world, you can offer the same optimized loading speed to your users regardless of their location.
There is a popular CDN service like Cloudflare, MaxCDN, StackPath, etc. CDNs also provide internet security, mitigate DDOs and bad traffic attack, keep your web hosting server secure and persistent.
Wrapping Up:
The fastest Site speed is the first and foremost factor for a great user experience and boosting SERPs rankings. Here the above-mentioned tips are vital for any WordPress website’s speed optimization though many other ways and steps can be taken depending on your website’s requirements.
I hope this WordPress speed optimization guide will help you to improve your website’s performance. If you’ve enjoyed this article please let us know your thoughts in the comment section below.
Stay tuned and enjoy learning 🙂
