Optimize WordPress Web Page Loading SpeedPosted by tagicon_admin | September 10, 2015 | in : Tips & Tricks, Wordpress
There could be many reasons for a slow loading problem of WordPress Sites. A web page speed depends on many aspects of the site. A well developed site must need optimization to get the proper page loading speed. I will show you a complete step by step ways to make an WordPress site more fast loading and will bring a page speed to half of its previous.
To get a full review of a web site page speed, there are many website performance testing tools on the Web. Among them, Google PageSpeed Insights and GTmetrix are best. Get on to the testing tools and test your website score for individual pages. And they will provide you an detailed report of the issues it finds. Basically I will show you, how you can solve those issues to make the website page speed faster.
Leverage Browser Caching: You can use different caching plugins to do that too, but I suggest not to go for caching plugins for a simple task. A simple block of .htaccess codes will solve your problem. Enter this block of codes into your .htaccess file.
## EXPIRES CACHING ##
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 text/css "access plus 1 month"
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 2 days"
## EXPIRES CACHING ##
Enable gzip: When a user hits your website a call is made to your server to deliver the requested files.
The bigger these files are the longer it’s going to take for them to get to your browser and appear on the screen.
Gzip compresses your webpages and css before sending them over to the browser. This drastically reduces transfer time since the files are much smaller.
For Apache servers, add this block of codes into your .htaccess file.
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/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/html
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/xml
# Remove browser bugs (only needed for really old browsers)
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4.0 no-gzip
BrowserMatch bMSIE !no-gzip !gzip-only-text/html
Header append Vary User-Agent
Serve Scaled Image: A scaled image might be needed on different sections of site for different purpose. And thus, a single image might be used in different place. But the size might be different in different places. For a WordPress site, you can easily scale an image for particular post or section with add_image_size function. You can define the actual size it needs and wordpress will automatically scale the image to defined size for the targeted section.
Optimize Images: Images and media files are one of the main reason for slow web page speed. Reduce the load times of pages by loading appropriately sized images.
• Reduce file sizes based on where images will be displayed
• Resize image files themeselves instead of via CSS
• Save files in appropriate format depending on usage
To optimize the images, you can get rid of the image white spaces or extra spaces that might be used for designing. You can stylize with css.
Use images on proper formats. A .png formatted image which is usable in .jpeg should be converted. And images should be used in proper dimension which is perfect for the particular section.
We can shrink the image size with different software and plugins too. On this case, my favorites are JPEG Mini, Tiny PNG as external software and WP Smash and Tiny PNG for WordPress plugins for internal use.
Code Minifying: Minifying the codes will also speed up the site. But in this case, you just cannot minify your markups as you might need them to customize later on. Here we can get help from another WordPress plugin called “Autoptimize”. It will minify your codes separately and will load as cache while loading. If you need customization, you will just need to do what you need, and clear the caches of this minify plugin.
Now check your site performance on Google PageSpeed Insights and GTmetrix. You will see the difference between before and after. Enjoy the Fast Web Page Loading Speed.
Here is the Before and After reports from a live site:
You can check on our Other Tips & Tricks Here