This is a guest post from Adam Mezzatesta, the owner of live music agency, Bands For Hire, representing a wide range of function bands and musicians across the UK. As a musician and former web developer himself, he takes a keen interest in live music and all things web related. You can connect with him on Twitter or Facebook.
As an independent events professional looking to increase your ticket sales, your website plays a huge role in your business, from branding to lead generation. Whether it’s a blog, brochure style website or the core of your business, increasing the speed of your website will do wonders for your conversion rate, bounce rate and balance sheet.
This is why Eventbrite has a 100-strong team of developers working to make their event listing pages as fast, user-friendly and effective as possible.
But what if you, like many organisers, also have a separate website that you drive traffic to, and maybe use Eventbrite’s widget to enable ticket sales there?
As a web developer, I spent many years learning about the various factors that contribute to a website’s success, and site speed should definitely be considered an important part of your overall strategy, impacting everything from the user experience to SEO.
Below are some of the things you can work on to increase your website’s loading speed to get ahead of the competition. And remember, if this is beyond the scope of your own knowledge, it may be worth passing this on to your web designer and asking for a few simple updates.
1. Optimise your images
In the age of responsive web design, we’re constantly trying to fill the screen with big and beautiful ‘Hero’ images; from a design perspective these full-width images are a vital tool to engage potential customers and keep them on your site, but from a usability stance, they can often add bloat to your file size and leave users waiting for content to load.
In order to cut down your file size, my advice is to keep the number of rotating images down to a bare minimum, or just use one optimised image in the background. If you have Photoshop or similar you’ll find that images can be optimised or saved ‘for web’ which can often bring down the size of your images to less than half.
If you don’t have access to a programme like Photoshop, try entering your domain name into Google’s page speed tool and Google will actually generate images for you with download links.
2. Use a lazy-load image plugin
When a user clicks on your website, the first thing your browser does is connect with your server and begin to download all of the files it requires – that includes every single hi-res photo from your latest blog.
But why download every image if the user can only actually see the top one or two images, especially if they’re on a mobile? Instead, consider installing a ‘Lazy-load’ plugin, which will replace any out-of-view images with an image placeholder and only load the images as they come into view.
3. Minimise unnecessary plugins and HTML
Templates are awesome, they allow non-techy folk the opportunity to create an all-singing and dancing website at a fraction of the price.
The problem with many templates is that they are there to wow you, and that means lots of fancy sliding content, lots of javascript and lots of files for your users to download. In order to keep your site up to speed, be cautious with the number of plugins you use on each page.
Do you need everything in tabs, does your header need five rotating images and does your footer need to be that big?!
4. Minimise the use of social network buttons and plugins
Social sharing has become a major part of online promotion; whether or not ‘shares’ and ‘likes’ contribute directly to your SEO efforts is a much-debated subject, but from an engagement perspective, they have huge value and will often lead to valuable new customers – usually with a higher conversion rate thanks to personal recommendations.
With this in mind, it’s a good idea to have some form of share buttons for the major social networks, but these are often bloated with large scripts, adding unnecessary file size.
I’ve experimented with various options over the years, from the standard default social network buttons, to all-in-one plugins such as AddThis, ShareThis and others. After various experiments using speed testing tools such as Pingdom.com, I was ultimately disappointed with the end results, even with the more advanced loading methods.
With my current website, I eventually settled on a more straightforward approach using images and HTML links; they work perfectly well and in most situations offer an almost identical user experience, especially on mobile where the buttons will open up the corresponding social network app.
As a quick example, you might use images (or even better, svg icons) that link to the following urls:
- https://facebook.com/sharer/sharer.php?u=http://www.yoursite.com
- https://twitter.com/intent/tweet/?text=yoursite.com&url=http://www.yoursite.com
- https://plus.google.com/share?url=http://www.yoursite.com
5. Cache your website
Caching your website is vital if you’re looking to go supersonic with your page speed. When a user lands on your site, your server has to process multiple scripts to dynamically create that web page, and this can add vital seconds to the loading time. By turning on the cache you are effectively telling your website to save the web page so that next time, your server won’t have to re-do all that hard work.
Assuming you’re using a CMS (content management system), there will likely be a setting in your configuration to turn the cache on, otherwise, there are plugins such as W3 Total cache for WordPress, to turn on the cache in a few fairly straightforward steps.
6. Turn on Gzip compression
Another vital tool in your arsenal is Gzip compression, one simple click of a button and your website speed could increase threefold, so this one is an absolute must!
By turning on Gzip compression you are basically telling your server to deliver compressed files to the browser and it’s easy peasy to implement. Check out your CMS documentation to find out how to turn on Gzip, or refer to the above link to manually turn on compression via your .htaccess file.
7. Upgrade to PHP 7
As well as keeping your website software up to date, it’s also important to update PHP on your server, if only for security reasons. Back in December 2015, the PHP development team announced the release of PHP 7, boasting an impressive performance boost that improves server speed by up to 100%.
Depending on your hosting package, you should be able to log into your control panel to make the upgrade, otherwise, contact your support team and they can do this for you.
Wait! Before you do anything, don’t forget to check that your website software and plugins are compatible.
8. Minify and combine CSS / Javascript files
As the number of CSS and javascript files increase, so too do the number of HTTP requests to your server, and this will result in significantly slower load times. With this in mind, we need to consider the various methods of reducing the number of files, and it’s easier than you might think.
Your template/theme and all of your various plugins will usually have their own CSS and javascript files, if you were to take a little peek at the source code, you’ll find there are probably far more than you may have realised.
In order to reduce the number of HTTP requests, we can combine many of the files together creating one css file and one javascript file.
Luckily for us, there are a number of handy tools to do this for us, one of which is called JCH Optimize. I’ve personally used this plugin for a number of years and highly recommend it. It’s simple to use and offers a ton of features that shouldn’t take long to get to grips with. As well as combining your files it will also minify your code, removing comments and unnecessary white space.
Whilst we’re on the subject, if your plugins are using javascript libraries such as jQuery, check that you only have one copy loading at a time, I prefer to link straight out to Google’s hosted libraries rather than host the files myself, the reason being that most users will already have a copy of this in their browser cache, so it’s one less file to download.
9. Enable browser caching
When we load a website, our browsers can save files such as images and scripts in the cache, so that next time we visit the site, the files are ready to go. To make use of this time-saving tool we just need to enable browser caching by copying and pasting a few lines of code to our .htaccess file – you’ll usually find this in your root folder. Click here to learn more about it.
Once again, if you’re using a CMS such as WordPress, you’re bound to find a range of simple plugins that will turn browser caching on for you.
10. Use a Content Delivery Network (CDN)
To put it simply, a CDN is a network of servers around the world used to distribute your website files. Not only does this reduce the load on your server, but your content is also delivered from a local server for a much speedier response.
For small company websites, I feel that a CDN isn’t going to make a huge impact and that there are more important factors to focus on. For companies with international users, it’s definitely worth considering, especially if you’re attracting a large number of visitors.
The cost of using a CDN is fairly minimal and it isn’t too difficult to implement, however, it is a subject you’ll need to research further in order to first of all choose a company, and secondly, integrate with your website.
Time to get cracking!
Depending on your technical know-how, some of these tips will be easy to implement whilst others may have you scratching your head for a few days. My advice is to create a duplicate copy of your website on another server and do some testing beforehand to compare – it’s always much less stressful working on a development site than the real thing!
Or, if you’re not feeling up to doing this yourself, why not check out your site’s page speed using Google’s tool, and unless it’s a happy ‘green,’ ask your webmaster to implement some of the suggestions above to bring your event’s website up to speed.
The list doesn’t stop there either, from ‘Mobile first’ web design to image sprites, svgs and more, there’s plenty to keep you occupied. Finally, with Google’s new AMP (Accelerated Mobile Pages) results seemingly doing well in the search results, this could well be another area to research for the future – it really does never end!
