Optimising WordPress and the server

kc web design kent - wordpressAt kc web design kent we’ve become obsessed with getting WordPress to work at peak performance over the last few months so we thought it would be good to document some of things we’ve been doing to increase WordPress performance and reduce loading times. Not all of these things work on all servers and you may get different millage out of some but they’re all worth a try and a look at the principles behind them. First off, lets look at the server…

Server optimisation

The first thing to look at is the server and with htaccess files enabled there are a few tricks that we can use to speed things up. A great place to look at advanced htaccess rules is the brilliant HTML5 Boilerplate but it can get quite complex. To start with lets just tackle the major ones.

GZIP and Deflate

Compression is very important and can speed up your WordPress site a considerable amount. Check if either of these modules are installed for Apache or just add the code for both into your htaccess file. Here’s an example for deflate. Please note the mod_filter wrapper around this code, if you don’t have the filter module enable in Apache then this won’t work so check its installed or in later versions of Apache just remove these wrapper tags.

 

<IfModule mod_deflate.c>
<IfModule mod_filter.c>
AddOutputFilterByType DEFLATE application/atom+xml \
application/javascript \
application/x-javascript \
application/json \
application/rss+xml \
application/vnd.ms-fontobject \
application/x-font-ttf \
application/x-web-app-manifest+json \
application/x-httpd-php \
application/xhtml+xml \
application/xml \
font/opentype \
image/svg+xml \
image/x-icon \
text/css \
text/html \
text/javascript \
text/plain \
text/x-component \
text/xml
</IfModule>
</IfModule> 

EXPIRES CACHING

Setting the cache expiry means the server won’t be dishing out new files with every page request which will speed things up for the user. Make sure to set the limits at a realistic level and if you site is always changing then set them shorter. If it never changes then set them longer!

<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "access 1 year"
ExpiresByType image/jpeg "access 1 year"
ExpiresByType image/gif "access 1 year"
ExpiresByType image/png "access 1 year"
ExpiresByType text/css "access 1 month"
ExpiresByType application/pdf "access 1 month"
ExpiresByType text/x-javascript "access 1 month"
ExpiresByType text/javascript "access 1 month"
ExpiresByType application/x-shockwave-flash "access 1 month"
ExpiresByType image/x-icon "access 1 year"
ExpiresDefault "access 2 days"
</IfModule>

Set keep-alive’s

When you run Googles Pagespeed tests – which you really should be doing – it sometimes alerts you to keep alives. This is to do with the server keep connections open while serving all the files and not closing the connection after each file is served. If you’re serving lots of small files then closing and opening new connections each time can slow things down. To keep connections open you can add this to the htaccess file.

<IfModule mod_headers.c>
Header set Connection keep-alive
</IfModule

Memory limits

WordPress can be power hungry at times. We’ve had instances at kc web design kent where a new VPS with only 256 memory was struggling with a basic WordPress site. If you can, go for more memory on your server and then change the default memory allocation for WordPress by adding this in the htaccess file.

php_value memory_limit 128M php_value upload_max_filesize 20M php_value post_max_size 20M

There are many, many more things you can do with a htaccess file but these will make a big difference on the speed and performance of you WordPress site and should be done on all installations.

WordPress optimisations

When using WordPress it’s important to know what it’s limits are and how it works on a server. We’ve already mentioned that it can be quite power hungry so just throwing any old template on it for a professional website isn’t always the best idea.

When creating your won WordPress web design theme for a client try and limit the amount of database calls you use to pull out paths to CSS and JS files and reduce the amount of queries. When using a bought theme check its not one that gives you endless options for this frontage or 3 different shop systems or endless page layouts as these will significantly increase the amount of data pulls on the site even if you’re not using half of what available in the theme. You can trim things down by removing php paths and hard coding things.

Another area to be watchful of is plugins. They can add lots of files and weight to a page that you just don’t know about. If you can do it yourself with code you know in the theme files then thats the way I would go first. If you do need a plugin then try a few out, read reviews and forums and test on a dev platform first before using on a live site.

Be careful of render blocking elements. Google Pagespeed loves this one and its always cropping up, especially on WordPress sites. Render blocking elements are CSS or mainly JS code in the head of a page that prevents the rest of the page loading and working before these files have loaded themselves. Jquery is the main culprit and some WordPress plugins like to stick a lot of code in the head so watch out for those. These days its good practice to put all JS in the footer to avoid this problem. If you have to put scripts in the head you can add this little bit of PHP code just before you body tag to help ease the problem…

<?php flush(); // http://developer.yahoo.com/performance/rules.html#flush ?>

And lastly, minify all HTML/CSS/JS and use a caching plugin such as WP Super Cache to speed up serving pages to users. After you change any of these points above check on Google Pagespeed for improvements and keep optimising until you get a good score.

Oh, and one more thing, you could also use a CDN service like Cloudflare to server all you static files. We used it on kc web design kent as a test and saw some big improvements.

Paul Ledbrook

If you have a new project or existing website that needs improvement, email us or call 0845 3631162 , we’d love to hear from you.

What’s new?

Dark Mode vs. Light Mode: A Comprehensive Guide for UI design

In recent years, the topic of dark mode vs. light mode in UI design has sparked heated discussions and debates among designers and users alike. While some argue for the sleekness and modernity of dark mode, others swear by the clarity and simplicity of light mode. But which one is truly better for user experience...

This is What a UI Designer Can Learn from Urban Planning: A Comprehensive Guide

When it comes to design, there are many areas that can influence and inspire new ideas. One of these areas is urban planning. While the two may seem vastly different, there are actually many valuable lessons that a UI designer can learn from the world of urban planning. Good design is subjective, contextual, and intentional....

Why Intuitive Technology Is the Future of UI Design

If you’ve ever used a piece of technology that seamlessly integrated into your daily routine, then you know what it means to experience great user experience (UX) and UI design. The founder of StreamAlive, a leading tech company, believes that good technology shouldn’t feel like technology at all. It should simply feel like a natural...

Latest Inspiring Web Design Trends And Techniques For 2024

The web design landscape for 2024 is set to be a dynamic and revolutionary one, with a blend of evolutionary and reactionary trends. From sci-fi-inspired design to adaptive headers and teleprompter typography, the upcoming year will witness a diverse range of innovative approaches. Additionally, bold and experimental typography, dark mode design, 3D elements, virtual reality...

The Unrivaled Excellence of our Web Design Agency Canterbury

Unveiling the Best Web Design Agency Canterbury In the bustling digital landscape, where every business vies for online supremacy, only a select few ascend to the zenith. Canterbury, a city steeped in history, is also home to unrivaled web design excellence. A top-rated web design agency Canterbury, kc web design Ltd, has been a beacon...

10 Things to Consider When Designing a High-Converting web app UI design

Your web app’s user interface (UI) is the first thing that users will see and interact with, so it’s important to make a good impression. A well-designed web app UI design can help you attract and retain users, and even increase conversions. Here are 10 things to consider when designing a high-converting web app UI...

How to Use Web Design to Improve User Experience

Introduction Your website is your online storefront. It’s the first impression that potential customers will have of your business, so it’s important to make sure it’s designed in a way that is user-friendly and easy to navigate. Good web design can help you improve your user experience (UX) in a number of ways. It can...

We’ve been featured on The Best Music Website Designs by DesignRush

A huge thank you to the guys at DesignRush for featuring the website design work we did with Go To Hear on their ‘Best Music Website Designs’ feature. Head over to the Best Design Trends page now to see our designs along with all the other fantastic music website designs. If you want to read...

SEO for web design – How to Optimise Your Website for Search Engines

Search engine optimisation SEO for web design is crucial for any business with an online presence. Optimising your website for search engines can increase its visibility, drive more traffic, and boost conversions. Follow these tips to make your website more discoverable and rank higher in search results: Choose the Right Keywords for SEO for web...

kc web design ltd