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...
At 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…
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.
AddOutputFilterByType DEFLATE application/atom+xml \
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!
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 application/x-shockwave-flash "access 1 month"
ExpiresByType image/x-icon "access 1 year"
ExpiresDefault "access 2 days"
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.
Header set Connection keep-alive
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.
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.