Speed is a what makes your website more usable, optimized for conversions, more enjoyable to browse and loved by search engine algorithms.
.htaccess is a configuration file, usually found in the root of your web domain, that can increase your website security, but also significantly increase WordPress speed.
Gzip File Compression
Compressed files result in a reduced HTTP response times. Gzip compression zips your HTML documents, scripts and stylesheets. Note that images and PDF files are already optimized and crunched and should not be further compressed.
With file compression you save server bandwidth and decrease amount of time for browser to download the files.
Apache servers
mod_pagespeed is an Apache module developed by Google. It automatically applies web performance best practices and you should always check with your hosting company whether it supports it. While at it, ask them to assist you install and configure it. Once installed you can copy/paste the code below, to your .htaccess file.
<IfModule pagespeed_module> ModPagespeed on ModPagespeedEnableFilters extend_cache,combine_css,combine_javascript,collapse_whitespace,move_css_to_head </IfModule>>
I know GoDaddy, DreamHost, EdgeCast, SiteGround and MediaTemple (not on their shared hosting plans) support the mod_pagespeed module, so if you’re with them, you can just insert the code to your .htaccess.
If your hosting company doesn’t support the mod_pagespeed module, then you can use the mod_deflate module. Just copy and paste the following piece of code to your .htaccess file.
<IfModule mod_deflate.c> AddOutputFilterByType DEFLATE text/html text/plain text/xml application/xml application/xhtml+xml text/css text/javascript application/javascript application/x-javascript </IfModule>
Nginx servers
If your host uses Nginx servers, to enable gzip compression you need this code in your .htaceess
server { gzip on; gzip_types text/html text/css application/x-javascript text/plain text/xml image/x-icon; }
Browser Caching
By setting browser caching you’re telling browsers to keep particular files for a specified period of time. When the file is needed again, the browser will pull from its local cache instead of requesting it from the server again.
Browser caching saves a lot of your bandwidth. A first-time visitor will make several HTTP requests to download all your website’s files, but by using the Expires and Cache-Control headers you can make those files cacheable. This avoids unnecessary HTTP requests on subsequent page views.
Apache Servers
It’s done through the mod_expires and mod_headers modules.
These rules go to .htaccess for setting Expires headers:
# BEGIN Expire headers <IfModule mod_expires.c> ExpiresActive On ExpiresDefault "access plus 5 seconds" ExpiresByType image/x-icon "access plus 2500000 seconds" ExpiresByType image/jpeg "access plus 2500000 seconds" ExpiresByType image/png "access plus 2500000 seconds" ExpiresByType image/gif "access plus 2500000 seconds" ExpiresByType application/x-shockwave-flash "access plus 2500000 seconds" ExpiresByType text/css "access plus 600000 seconds" ExpiresByType text/javascript "access plus 200000 seconds" ExpiresByType application/javascript "access plus 200000 seconds" ExpiresByType application/x-javascript "access plus 200000 seconds" ExpiresByType text/html "access plus 600 seconds" ExpiresByType application/xhtml+xml "access plus 600 seconds" </IfModule> # END Expire headers
and these are the .htaccess rules for setting up Cache-control header:
# BEGIN Cache-Control Headers <IfModule mod_headers.c> <filesMatch "\.(ico|jpe?g|png|gif|swf)$"> Header set Cache-Control "public" </filesMatch> <filesMatch "\.(css)$"> Header set Cache-Control "public" </filesMatch> <filesMatch "\.(js)$"> Header set Cache-Control "private" </filesMatch> <filesMatch "\.(x?html?|php)$"> Header set Cache-Control "private, must-revalidate" </filesMatch> </IfModule> # END Cache-Control Headers
Max-age directive is not necessary for Cache-Control header because it’s already set by the mod_expires module.
Nginx Servers
For Nginx this would be:
location ~* \.(jpg|png|gif|jpeg|css|js)$ { expires 50h; }
MySQL Database Size
WordPress 2.6 brought several improvements, autosave being one of them. Revisions of your posts and pages are being created while you type and this increases MySQL Database. The bigger the database, the higher the response time. You can either disable the revisions feature alltogether by inserting the following code snippet in your wp-config.php:
define('WP_POST_REVISIONS', false );
or by installing a plugin called Optimize Database after Deleting Revisions and setting a limit on allowed revisions per post.
Whichever you choose to do you’ll definitely feel the difference in WordPress speed.
There’s lots one can do to increase WordPress speed, using CDNs (content delivery networks) or applying performance best practices and using .htaccess is just one of many methods.
If you need help speeding up your WordPress website, you can get in touch using the contact form and I’ll try to help you.
Do you need this as well as services like CloudFlare?
Thanks
John,
With internet security, one can never be too paranoid. So yes, you can have both CloudFlare enabled and still work on increasing your WordPress security through .htaccess.
Hi Dragan,
Thanks for replying. I actually meant to ask if the speed tips for .htaccess are needed with Cloudflare.
Thanks
John
Sorry John, my bad. The answer is still “yes”, you can do both, they won’t interfere with eachother.
Thanks!
Thanks for the tips but how much will this help with the page speed vs a cache plugins which i use w3t cache and Better WordPress Minify because i won’t mind removing them if the .htaccess method works just about the same way
The two complement each other. For speed it’s best to use both methods, cache plugins + .htaccess. Note: As of recently, we’ve stopped using WordPress cache plugins due to their instability and security risks (W3 Total Cache included).
For compatibility issues between W3 Total Cache and mod_pagespeed, you can read more here http://wordpress.org/support/topic/plugin-w3-total-cache-googles-mod_pagespeed-and-w3
We are using ngx_pagespeed with centmin mod – http://www.centminmod.com
We have achieved faster website with nginx + ngx_pagespeed and CDN. You can try those out to speed up your site too.
Thanks for sharing this with us, Farzana.
Dear Dragan, its a good article but I do not agree that “the bigger the database, the slower the response time”.
If the amount of queries made when a user views a page is the same then the database size will not matter.
Hey Tom, I believe you’re right, if a database is regularly defragmented and in a good shape.
But still, every post revision requires a separate row in multiple wp_ tables. Removing older revisions frees up disk space and eases MySQL’s burden.
Hi Dragan,
I have started using Blogger along with WordPress, and i was wondering if the same can be used on this platform.
Please shed some light on this issue!
Piyush
Hi, Not sure about Blogger, never used it. But, server side tweaks should work just fine and you need to be on a self hosted website in order to have access and make these changes.
That’s ok ! thanks for this post, Now, my WP increase about 10% speed up than before.
You can also increase website speed by lessening the homepage posts to 3. Do include the pagination numbers at frontpage to make navigation a breeze.
Thanks Faust.
Nothing beats common sense :)
Hi, Does it affect Google Adsense or Analytics codes in the website (because they have text/javascript codes) ? I really want to use it in my WordPress website. Please help. Thanks
It shouldn’t affect them in any way.
I have an question, If I am using WP Super Cache then I need to configure “Apache Servers”? Or shoulf I disable the plugin?
WordPress plugins optimize WordPress, and when you configure “Apache Servers” you optimize the server side. The two don’t collide, in the most cases.
It’s not working for me (“Internet Server Error”)
Can you help me? Please Dragan
Thanks.
Zain
Which piece of code did you try to implement? Don’t copy/paste it here, because the comments editor won’t allow you to insert code, just tell me.
It works!
My sites’s grade via YSlow jumped from C to B upon implementing the above.
Thank you so much, Dragan Nikolic!
Hey Dragan – This is just what I’ve been looking for for my client’s websites. Thanks man!
Glad I could help.
Cheers, Mike.
My website freejobpoint.com is performing slow. Please check and suggest
You need to do many things, some of which are:
Eliminate render-blocking JavaScript and CSS in above-the-fold content
enable compression, reduce server response time, enable browser caching, optimize images, minify JS, minify CSS and HTML, get rid of render-blocking JavaScript and CSS above-the-fold content…
By disabling hotlinking and compressing images increases site speed considerably. Google page speed cdn can be counter productive as it sometimes does not load the advertisements and it has huge impact on shared hosting.
Hey thanks for your advice and for stopping by. I thought Google’s PageSpeed was out of service https://developers.google.com/speed/pagespeed/service
I got an increase from the Google Page Speed test from 40/100 to 86/100.
I also used website auditor from Link-assistant.co.uk/wsa (dont know if links are allowed) but you can always copy/paste – it tells me exactly where my issues are – not only with page speed, but also with HTML errors, 404s as well as all the SEO type info re h1 headers, page titles etc.
I will have to check to see if analyses the .htaccess file as well.
Thanks, Peter. And bravo for the Page Speed improvement.
Thanks this helped to speed up my site. I see 90% and above in gtmetrix score.
Great to hear that.
Website speed, besides being a ranking factor, greatly improves user experience and may increase conversion rates.
Thanks man, This helped my site “techflout.com”
Great to hear that, Sandeep.
Cheers.
In which format do you prefer the images on your website? Most of the times I use images in png format. Does this have some kind of an impact on the speed of the website?
It depends on the type of the image. If an image is heavy with graphics and colors, you can use JPEGs, for every other instance you can use PNG.
Thanks for stopping by.
it maked my site load under 3 sec thanks.
Great to read that :)
Thanks for the tips. It’s seems it’s the same like .htaccess rules added by WP Rocket Plugin
Hey, thanks for stopping by. I wasn’t aware of the WP Rocket Plugin adding these same .htaccess rules.
I’ll definitely try the plugin myself.
Very useful data, I was also looking for something that would speed up the website for me a bit. So how do we use it will also reduce the consumption of our pages because this part will already be in the browser’s memory?
I’m not sure I understand the question. But using htaccess to speed up your WordPress website will also reduce the amount of data a browser has to deal with.
My website loads very slow. However, my competitor loads within 2 seconds. Kindly advise.
Thanks for the tips. It’s seems it’s the same like .htaccess rules added by WP Rocket.