They provide a speedy, accurate and personal service. I am very impressed with the knowledge and the results achieved.
Mandi Cooper, FastBuy Properties
Results Focused
We've recently started using Big Surf for PPC and have been hugely impressed with the amount of research, knowledge, and time that's been invested in creating our campaign.
Caledonian Driver Training
Wealth of Knowledge
Calum at Big Surf Digital was available at short notice to deliver a comprehensive training session on SEO. We wouldn't hesitate in recommending his services.
H. Miller
Skilled and Professional
I needed some advice on marketing my website through google ads and Calum put me in the picture. He gave me loads of his time, even though he is obviously a very busy man. He is skilled and professional at what he does.
Stuart, The Academy of Professional Celebrants
Highly Recommend
Since Big Surf Digital have optimised my site, my rankings have increased considerably for my keywords and are continuing to do so. The impact on my business has been noticeable. I would have absolutely no hesitation in recommending them to prospective clients.
Rachael Roberts
How to speed up a website
Page speed is known to be a Google ranking factor, albeit a small one. What potentially makes it more important though is the effect
it has on bounce rates and conversion rates. Customers don't like using slow sites and it doesn't take long to lose a customer. There are lots of tips
and tricks to improve page speed so let's look into what they are.
Page speed is often seen as an add-on to be looked at after a site has been built. This isn't the best way to approach it though.
Speaking from experience, once a site has been built in a certain way there's only so much you can do to speed it up, without rebuilding everything from the ground up. I've worked on speeding up lots of sites over the last 10 years and with some it's
difficult to break the 80/100 score on Google's PageSpeed Insights. A lot can be done on any site but if it's packed with a ton of scripts, massive images and videos and
hosted on basic hosting it can be a futile effort. The takeaway here is: don't leave page speed until after the site is built. Page speed plugins can help to speed up
a site to a certain point but they can't work miracles.
PageSpeed Insights is Google's tool to help website owners measure how fast their websites are. It's pretty useful as it will
show you where the issues are and what's causing them. It gives a score out of 100 for mobile and desktop devices.
However this tool doesn't actually measure the speed of a website, instead it gives a score based on how efficiently items are loaded within the browser and
how speed intensive the files are.
This page gets an 94/100 for mobile and 96/100 for desktop.
I'm fairly happy with that. Working to get a 100/100 score is not essential. As long as your site is loading with a score between 80 and 100 it won't be marked down
by Google. The things to look out for in this are Largest Contentful Paint and Total Blocking Time. Addressing any issues with these will usually help to speed up a site.
Using Pingdom
It's advisable to use another tool alongside PageSpeed Insights to get a good measure of how fast a page is. Pingdom has a good test tool that
measures the loading speed from servers in different countries and also suggests ways to improve.
I've come across WordPress sites where I couldn't break the 50/100 barrier on PageSpeed Insights. Sites with enormous crisp
images as rotating banners on their homepage, which when you look into them are over 50 inches wide when they only need to be 1900 pixels. When there's scripts and more scripts plus
10 CSS files all needing to be loaded by the browser alongside massive images there's little that can be done after the fact by a speed or caching plugin. The site will need to be completely reconfigured
before it will have a chance of being nimble and fast. Web designers should bear in mind when they're designing layouts that mobile devices are going to need to download
and render their site's code and images and consider speed at the outset. Do you really need animation in the menu, or video in the background covering the screen? These things can
add to page speed without helping the user in any way.
Before we go further into how to speed up a WordPress site I should tell you that this site used to use WordPress. I had speed plugins installed like WP Rocket and Imagify and I was paying for these every month.
I was about to sign up for another paid plugin to get everything to load via a CDN when I realised that I could probably just build a faster cleaner site myself using HTML and CSS. So that's what I did. I could
stop paying for all the paid plugins for forms, speed, security and whatever else. This site is now faster than it was at any point when it ran on WordPress, and easier and quicker
to update.
I realise that option isn't for everyone though. Fortunately the content management system Gutenberg that WordPress added a few years ago is quite fast. It takes quite a while to get used
to but once you're used to it, it can help you build an easily updateable site for non coders to use.
Elementor is a popular option for a lot of web developers these days. I've no idea why. It seems far too bloated and complex but it shows up a lot with new clients. It's not fast
out of the box but if you use this Database Cleaner plugin it will speed it up somewhat. With Elementor
it's unlikely you're ever going to get to the top scores on PageSpeed insights.
The WordPress plugin WP Rocket is a decent add-on. It will move the needle considerably on PageSpeed Insights and increase speed by creating cached versions of your pages. With cached versions of the pages the browser
won't need to download all of the files every time the page is loaded. Instead the browser will be able to choose to only download files that may have changed since last it visited. This doesn't improve the
initial page loading when a user first visits the site though. WP Rocket is also useful for collecting different scripts together, loading them asynchronously or loading
after other important scripts. How effective this tool will be depends on how full your page is of scripts and outgoing URLs and how they're arranged. On some sites it works great. It's worth noting
though that you'll need to install other paid tools Imagify and Rocket CDN to get the full benefit of it. Another decent plugin is Autoptimize which can be used
to load scripts, minify code and lazy load images among other things.
Adding server side compression
Server-side compression reduces the size of files (like HTML, CSS, and JavaScript) before they’re sent from your server to the browser. This helps websites load
faster by giving the server smaller files to download.
The most common methods are Gzip and Brotli. Gzip is more widely supported, while Brotli is newer and generally more efficient at compressing text files.
When a user visits your site, their browser sends a request and includes an Accept-Encoding header indicating which types of compression it can handle, typically Gzip and Brotli.
If your server has compression enabled, it detects this header and compresses the response before sending it. The browser then decompresses the data and renders
the page.
In WordPress, one way to apply compression is through a plugin that allows you to manage HTTP headers. The WP Headers and Security plugin lets you add custom headers directly.
You could add a Content-Encoding: gzip header this way. You will also need to make sure that compression is enabled on the server as it needs to handle the compression process.
If your website is hosted on an Apache server, you can enable compression by editing your .htaccess file. This file is located in the root directory of your
WordPress installation. By adding the appropriate code, you instruct Apache to compress various file types before they’re sent to users. The following example
enables Gzip compression for common file formats like JavaScript, CSS, HTML, fonts, and XML:
Make sure your hosting provider has mod_deflate enabled on the server for this to work. After applying the changes, you can test whether compression is active using online tools like GZip Test or Pingdom.
Code compression & concatenation
Code compression is a simple trick that can help to speed up the process of a page loading. To render a page the browser needs to download it from the server,
read through it and display it in the browser.
Minifying the code will make the code smaller and give the browser less to read, by removing comments and whitespace.
Compressing the code with Gzip will mean the code is compressed on the server for faster transit then decompressed for rendering by the browser. Concatenation is the process
of combining multiple files into one. If for example you have two or three CSS files they can be combined, minified and compressed for a decent space saving.
You need to be careful when combining files though, as the order of the code can stop elements on the website working the way they should. Combining files also helps page loading times as the browser doesn't have as many files to go and download.
Image size
Images are a common factor on slow sites. When they're used within the design elements of a page they can be a real issue.
Having a big background image that fills the header of a page is common and yes it can look great. If you want a really fast site though you should try and avoid big background images. Ask yourself what's more important, the user accessing the site quickly
and buying the product, signing up to the service or reading the content easily or impressing them with an image heavy design. I'll help you out on this one. No user is ever impressed by a website's design.
They really don't care. They just want to be able to do the thing they came to the website to do, quickly.
But if you go ahead with them there are things you can do to minimise the effects. First of all edit the photo size so that it reflects the space it is going to fill. Edit different images for different sizes of screen. So you'll need a 2400px width,
a 1900px, 1600px, 800px and 500px. Then use CSS media queries to load the appropriate image for the screen size. That way when your page loads on a mobile the browser doesn't need
to download the 2400px image and can download the much smaller 500px. You can also save space by reducing the image quality as much as you can while keeping the quality.
An image CDN is a useful tool that will ensure your images load from a server close to the user that's downloading it. You should also consider WebP images as they
can save space compared to traditional image formats. I haven't tried that on this site yet, there's always more to do.
Scripts
As with images consider what functionality and scripts are essential. Do the users need to see an elaborate menu navigation? Probably not.
The more scripts you have the more work the browser has to do to render the page. Try to avoid adding a lot of scripts and when they are added make sure they're
minified, concatenated and compressed to give the page a good chance of a fast page load. For non essential scripts you can defer loading by putting them in the footer of the page. That way
the more important elements of the page will load first.
Hire us to speed up your website
If your site's speed is holding your business back we can help. We've boosted the speed of lots of clients' sites in the past and we can help to improve yours too.
