Matt Angel | Digital Marketing

Website Performance

Website Hosting And How It Impacts Visitor Results

Posted in Website Performance

Web hosting has a big impact on site performance – including search visibility and visitor engagement.

Every website needs a home on the internet. It’s where your website files are store. And more importantly, it’s where your website files are served from to display on your visitors phone or computer screen. It’s not difficult to find very inexpensive website hosting. Particularly if you have a relatively small website. But regardless of the size of your website, the hosting service you use can have a big impact on things like how fast your website loads. And how fast your site loads can impact how search engines regard and rank your website on search results pages.

Many website design companies will also offer website hosting – just like this. And as a general rule, it’s not a bad idea to run with the hosting provided. But there are a couple of things to look out for.

Dedicated WordPress Hosting

If you’re website is built on WordPress, you consider using dedicated WordPress hosting. Dedicated WordPress hosting is specifically designed with the unique demands of WordPress in mind. Managed WordPress hosting can also come with useful automations and protections built-in. The WordPress core software is regularly updated. Generally these are minor tweaks to the software which won’t effect your website or CMS experience. Less often, WordPress will release a major upgrade.

Most WordPress website’s make use of a small or sometimes vast number of plugins. And the developers of these will also provide periodic updates. Sometimes the update is to the functionality of the plugin, other times the update is to maintain compatible with WordPress core upgrades.

And if your website uses an off-the-shelf theme, there will sometimes be updates to these as well.

Managing software updates.

The thing to be aware of here is that for the most part, all these software upgrades are not necessarily compatible with each other. This means that making upgrades can be a delicate exercise – with WordPress core, plugins and themes possibly causing conflicts that can take your website down altogether.

Some managed WordPress hosting services provide automated upgrades with conflict testing. This means that the software on your website will always be up-to-date, without the costly hassle of dealing with plugin or theme conflicts.

If you’re using website hosting provided by your website designer, it’s a good idea to ask whether it’s dedicated WordPress hosting. You can also ask about how WordPress and plugin updates are to be handled. Will they occur automatically, will they be done for you, or do you need to look after it yourself? Remember, keeping WordPress core and plugins up-to-date is essential to keep your site secure and performing at it’s best.

Shared Hosting

If you choose to arrange your own website hosting, it’s likely your website will exist in a shared hosting environment. This quite literally means that your website is sharing disk space and bandwidth with other websites. It works on a similar principles to banks lending money. That is, their counting on everyone not wanting to withdraw funds at the same time. Shared hosting environments work on the principle that not every site is going to be using its allocated bandwidth at the same time.

How Web Images Could Be Hurting Your Site.

Posted in Site Speed, Website Performance

Website images are a key element of every web pages. Many modern website designs include full screen background images or full screen width banner or hero images. Custom photography as well as vast troves of stock images give website designers and owners endless possibilities to use high quality website images. But all those images account for a huge proportion of your page file size – and as we’ve talked about in previous posts – page file size is a techy thing, but it’s really important for optimal website performance. If your website is professionally designed and built, your website images should be optimsed. But if your website hasn’t been professionally built, your images are likely not optimised for web. If this is you, or if you manage images on your existing website, this post looks at how to ensure your images aren’t messing with website performance.

There is a lot of confusion about website images and quality. None of the steps outlined below will have any effect on the display quality of your image.

What Format Should My Images Be In

Generally speaking, jpeg and PNG images are best for the web. There’s now a newer image format which has been created especially for the web. It dramatically reduces your page file size, which is an awesome thing. We’ll look at how to take advantage of this new image format shortly. First, let’s take a quick look at the difference between jpeg and png images.

JPG and PNG Image pros and cons

Both PNG and jpeg images are what’s known as ‘bitmap’ or ‘raster’ images. The biggest difference that effects how we use them for the web is that a png can include a transparent background. Let’s say your business logo is company initials – “ACE”. And it has to show over different coloured backgrounds. The background of a jpeg image will always appear white. Even if you deleted the background in a photo editor, for example, when you save the image it will save with a white background around it. When we then place that image over a different coloured background, the white will show up.

In this instance the png comes to the rescue. With this file format we can choose to preserve the transparency of the image. The PNG will appear just as we saved the file, with no background of its own. This allows the background of whatever is underneath the image to show up and appear as the background of the image itself. For this, we sacrifice a little file size. As a general rule, png images with transparency will produce a larger file size than jpeg images. However, by following this guide you’ll find out how to ensure those images are as small and website friendly as can be. If your image requires a transparent background, use a PNG. Otherwise, Jpeg is your safest otion.

What size should my images be? And what’s image resolution?

The short answer to keep in mind is – no bigger than they need to be.

Full screen width images. Regardless of the display height, if your image is going to span the width of the screen, it must be at least 1920px wide. But it shouldn’t be much wider. Depending on the source, you could could have an image up to 5000px wide. So the first step is to resize the image so that it’s width is no more than 2400px (this is the absolute max width you could need). You’ve just reduced the file size by around 50% already.

Full screen width and height images. If your image is also to display at full screen height, you can leave the image as is for now. But if your image is to be used in a banner style, it’s likely you can ‘pre-crop’ the image, removing those portions which won’t display. This is likely to give you another 20% – 30% in file size savings. So already, we’ve reduced your image sizes pretty significantly. The reality is though, we need to get them smaller still.

In content images. Images shown within the page content can usually be used at much smaller sizes than full width background style images. It can be difficult to predict exactly what size will be need but we can use this as rough guide. If it’s to cover less than half the full width of a desktop computer screen, you can reduce the width to around 1200px. Based on this you can make further common sense reductions. Staff profile photos, product images and so on can generally be saved at 1000px wide.

Okay and what about the resolution?

In the previous section we talked about image size in pixels. This isn’t to be confused with resolution. You could have an image 5000 pixels wide or an image 150 pixels wide. And both could have a screen resolution of 72 PPI. PPI stands for pixels per inch of screen width. And 72 PPI is the standard resolution for website images. There’s no need for any of your images to have a higher resolution than this.

Compressing images for the web.

Now that you have your cropped and resized image, it’s time to remove any of the unnecessary background data that your image includes. Whether your using images taken with a camera or phone or downloaded from an image stock library, your image likely contains lots of extra meta information that makes the file size larger than it needs to be. Intelligent optimisation tools can also further reduce the file size by resampling the image. This results in imperceptible quality loss but very significant reduction in size.

There are several ways to compress and optimise images for the web. If your website uses WordPress, there are several plugins that work well. These plugins can be used to optimise all your existing images as well as new uploads. We’ll look at these more closely below.

Stand-alone image optimization tools are also available online. TinyJPG and TinyPNG both accept either PNG or JPG images. Similarly, Optimizilla provides for both image formats. Both platforms work the same way – simply upload your images, let them be processed, and download optimised result. Just remember to distinguish your optimised versions from the original versions when you upload them to the website.

WordPress Image Optimisation Plugins

A number of widely used and well-supported WordPress plugins can help with image optimisation. The makers TinyJPG mentioned above produce a plugin which achieves the same result right within the WordPress dashboard. In independent tests, TinyJPG norally performs extremely well. ShortPixel, Imagify and Optimole perform similarly well.

Working with images in WebP. As mentioned in a previous section, there’s a new web-specific image format on the block. It’s called WebP. But don’t go converting all your website images just yet. While this format offers even more reduction in your image file sizes, it’s not fully supported across the web. To make use of the new image format consider providing an alternative, webP version of each image on your site.