Performance should be one of the top priorities when creating a website. It is vital for its usage and loading time. A slow website generally means lost conversions and unhappy visitors who are most likely never coming back.
Great performance should be considered from the very beginning. The moment you start building your website, you should think how it will perform.
Typically, the steps of website creation include a stage where testing and optimization is performed. Unfortunately, this stage is at the end of the process, right before releasing the website into production. In most cases, at the very end of the website building, there is not much that can be done. Just imagine, optimizing an online shop with tons of products or a magazine website with lots of articles and media files.
If you don’t want to experience such a nightmare scenario with your own website, I urge you to continue reading. I narrowed down four helpful tips that can help plan and execute a better performing website.
Don’t use heavy Content Management Systems (CMS) & plugins
There are many ways to create a website nowadays. Usually, the most common choice is to use a content management system (CMS) because they are widely known as easy to use by everyone, both laymen and professionals.
CMSs offer quick setup, short time to production website and possible customizations with plugins and add-ons.
Often, the CMSs used for making websites are WordPress, Joomla and Drupal. According to the stats (July 2017), the most popular one is WordPress as it is estimated that 59.2% of all websites are done with it. The next ones are Joomla (6.9%) and Drupal (2.4%).
We have used all three at the top, most extensively WordPress and Drupal. We had some brief encounters with Joomla and from what I have seen, it is like the leading two.
Since WordPress is the one that used most extensively, I will dig a little deeper into it and try to outline the common problems in terms of performance.
Resisting the temptation of using WordPress
WordPress is an open-source, hence completely free. It also can be installed manually in less than 5 minutes which sounds irresistible. It is fine to use WordPress if you need a simple blogging website.
Apart from that, it is not suitable for websites such as business ones where a lot of customization is needed.
WordPress & plugins issues
WordPress is out-of-the box solution and when you need to add specific content features, the nightmare begins. Tailored content is customized by adding plugins which make things worse as some them are never updated or done by amateur developers or extremely heavy.
When plugins are not updated, they are an easy target for hackers. Sucuri.net reports that in Q1 2016 25% percent of websites hacked are due to outdated plugins. The plugins that made these websites vulnerable are the famous and widely used RevSlider, Gravity Forms and TimThumb.
Another issue with WordPress plugins is the conflict between them which can break your whole website. This can be a painful experience because you may need to start building your website from scratch.
WordPress & Premium Themes
Since WordPress is the most popular CMS, it created work for many designers and developers. There are many marketplaces where you can buy decent looking themes for $15 - $120. This may sound as a great solution, getting an already customized theme to save some development time. Not so much though.
Marketplaces are full of themes created by not very experienced developers. All the authors aim for many sales and they build themes which are full of bells and whistles. They add sliders, galleries, page builders and many additional plugins. The result is a heavy theme which makes a very slow website. Also, some themes have poor quality code.
I am wondering, why do you need a multi-purpose theme that has shop, blog, magazine, corporate layouts and unlimited features. These authors also put some pre-built layouts which you may never use. Why pay then $70-80?
WordPress & Support
Being an open-source solution, WordPress doesn’t have any support available. If you or your developer want to address a specific issue, it means that there is no one to help you out. It also means that you either pay someone for support or spend countless hours searching for a solution in community websites and forums for developers.
If you are a blogger and need only to post articles from time to time, go ahead and use WordPress. If you need a fast and custom website, you should consider a solution which considers your content from the very beginning.
Optimize CSS, JS and Image files
CSS & JS
One of the proven ways to speed up any type of website or app is to reduce the sources used. Such minification means to get rid of all excessive characters from your HTML, CSS and JS files.
A good practice is to remove white spaces, new lines in the code, comments and any additional unused code you may have.
By doing this, it will speed up website load time and reduce the code that needs to be requested from the server.
Some great online minification tools:
- CSS Minifier (https://cssminifier.com/)
- CSS & JS Minifier (http://www.minifier.org/)
- CSS Compressor (https://csscompressor.com/)
Plugins for the automated task systems:
- Grunt: grunt-contrib-uglify
- Gulp: gulp-uglify
- Grunt: grunt-contrib-cssmin
- Gulp: gulp-minify-css
Website performance depends to a large scale on the way images are displayed. Rendering of images is tightly connected with user experience. Achieving good UX, which satisfies website’s visitor, means to pay attention to their specific circumstances. One of these is the load speed which is a major factor in user’s perception of overall experience. Websites that use many media files should be optimized as much as possible for different internet connections.
One way to do that is to serve all your media with Content Delivery Network (CDN) and employ caching to make sure all visual files are rendered swiftly.
Pay special attention to CSS, JS, HTML and image files. Proper minifying, caching and delivery should be used to ensure a blazing fast website or app.
Use Service Workers
Fortunately, there are new ways of speeding up websites and deliver better performance to users. Adding a service worker (SW) to your websites will offer rich offline experiences which is particularly important for users with problematic connections.
A service worker is a simple script running in the background, totally separated from a web page, which support offline interaction with content. It even includes features such as push notifications and background sync.
Here is how service worker works:
Service worker is a programmable network proxy, allowing you to control how network requests from your page are handled. (@GoogleDevelopers)
If you want a very fast website or app and you would like rich offline experiences for your visitors, opt for a service worker as it won’t disappoint you.
Better Performance = Better User Experience
We have already established that better performance means better user experience. Better UX is crucial for serious businesses and their success in the competitive world. Sometimes, an easy solution for building website ends up being a real nightmare.
Our professional team of designers and developers can help you plan and create your business website to delight your customers. Talk to us to start planning!