image compression

5 Fixes For Your Slow Website

5 Fixes For Your Slow Website 618 803 Greenlight Managed IT Support Services | Sydney | Melbourne

Recently one of our customers was starting to experience occasional web site slowness due to their ever increasing website size and popularity of their WordPress site. As always, our team of talented engineers were onto the problem straight away and I thought it would be useful to share our thoughts on some of the things you should consider to optimise your WordPress site.

WordPress is one of the world’s most popular Content Management Systems (CMS). Its engine is used by an impressive list of websites that includes the likes of e-bay, Yahoo! and the Wall Street Journal. Even our own humble little site is built using WordPress. With any CMS, there are five critical factors that can transform the visitor experience (and improve your bottom line).

Core infrastructure

This should be the first question you should look at with any web host. Is this shared hosting, or are you using a VPS? Even if your site only has a few hundred visits a month, you should consider looking at using a VPS. It is only a slightly higher cost per month, but it gives you (or your IT support team) visibility in to what is going on. For example it allows us to pinpoint the hardware limitations that may be slowing down the web site, or even causing it to crash. There are tools out there to isolate exactly which part of a website is causing the problem. None of these tools are of any use in your standard consumer shared hosting environments, such as websites accessible through cPanel.

The Webserver

Not all webservers are created equal. While Apace has been around a long time and is the default for many websites, newer web servers such as nginx are engineered to provide a much faster response under high load scenarios. Again, you may need a VPS to take advantage of this technology as many hosting control panels do not support nginx.

Optimising Templates and Plugins

Many WordPress sites use third party templates and plugins that are incorporated into the site. What you may not know is that many of these templates refer to components that are hosted on remote website. Combining all this content onto your site, and using tools like Google’s Pagespeed can yield some truly great results.

Compressing Images

In some cases, images can also be optimised without any loss in quality. By default most modern SLRs take photos of sufficient quality to produce image the size of a billboard. This is probably overkill for many websites and by using image manipulation tools like Photoshop, or even Google’s free Picasa, you can shrink the images file size considerably without any noticeable loss in quality.

Caching

Most web pages are generated in real time as visitors browse your web site. Because much of the website content does not change much, it is possible to prepare the content in advance. We call this caching. There are two ways to achieve this. The first is to use a Content Distribution Network (CDN). The second is to use a WordPress to like WP Super Cache.
Why should we care about website performance? Research shows that speeding up your website pages by even a few seconds can have a dramatic effect on sales. And of course your competitors’ websites are only a few clicks away…

Image Formats — Why Getting It Wrong Could Cost You Money

Image Formats — Why Getting It Wrong Could Cost You Money 150 150 Greenlight Managed IT Support Services | Sydney | Melbourne

We often take images for granted, despite using them so extensively in everything from proposals, to our websites and marketing collateral. The days where companies were able to get away with mediocre looking websites are over, as people become more visually oriented. You may have noticed the popularity of visual websites such as Pinterest and the millions of photography websites that have flooded the internet over the past few years. The trend of beautiful photography and sleek looking websites is only going to increase, and for this reason we thought we would take a look at some of the basic principles of image formats for use both online and offline.

What makes a good image?

Effective use of images have a few core principles. They should:

  • Be relevant
  • Convey information
  • Convey the mood
  • Be instantly recognisable
  • Complement the colour palette

Image formats

Not all images are made equal. You may have wondered about the different types of images and their differences. The most commonly used image formats on websites and in marketing collateral are:

  • jpeg (or jpg)
  • gif
  • png

Images should always be saved in RGB (Red Green Blue) and not indexed colour. This is based on the principle that the majority of colours used in images and photography can be created by combining the base colours red, green and blue.

JPEG – Joint Photography Experts Group

JPEG are the ideal format to use when images contain many different colours. Images such as stock photos of people or scenery for example can contain hundreds or thousands of individual shades of colour, and incorrectly saving them in the incorrect format can mean losing much of the impact of the original photograph. JPEG (or JPG) files tend to be larger in size than GIF or PNG images, and should be used sparingly for effect.

jpeg-photo-example

This image includes a wide range of different colours, and is best saved as a jpeg file.

One often overlooked fact is that jpeg images are ‘lossy’ and suffer from what designers refer to as ‘jpeg rot’. This means that every time a jpeg file is saved, it loses some quality. Let’s say you take a jpeg photo and begin to remove red eye effects, perhaps cropping the photo and adjusting the brightness and contrast. Each time you make one of these changes, the overall quality of the image gets just a little worse.

For this reason, it is best to save an editable master file in your photo editor’s proprietary format, such as PSD files in Adobe Photoshop. When you’ve finished making your changes, THEN you can export them (or ‘Save for Web’) as a jpeg file.

GIF – Graphics Interchange Format

GIF files are ideal for flat colour photos. Common examples of these are vectors and company logos, which often only contain a few colours. These image types can benefit from transparency, which makes using them over solid colour backgrounds simple. GIFs are best suited for straight edged transparencies.

PNG – Portable Network Graphics

Much like GIF files, PNG images are again best suited for images containing few block colours. Unlike the GIF, they can be used when the edges of an image are rounded or diagonal, or when a semi-opaque transparency or a drop shadow are used.

greenlight-logo-png-example

Our logo is an example of an image with relatively few colours, making it suitable as a png or gif image.

Resolution – Print vs. Digital

When aiming for quality, the clarity of an image is measured differently depending on whether the media type is printed or digital.

Print media is measured in DPI (Dots Per Inch) and the best practice is to use a 300 dots per inch or higher to ensure the end result is true to the digital edition.

Digital media quality is measured in pixels. Images on your computer are measured in tiny dots called pixels, and screen resolutions refer to the number of pixels represented on it. Most computers allow you to change the resolution to a certain degree– changing your resolution from 640×480 pixels to 1024×768 for example will result in images that look much smaller given there are a much higher number of pixels per inch in the same amount of space.

Image compression

All image formats can benefit from compression techniques, and in the majority of cases there is an acceptable trade-off between quality and file size. Compression is particularly important for images stored on your website, as research has shown that a slow website will result in a higher bounce rate by customers as well as search engine optimisation penalties.

Because the major search engines base their ranking algorithms on factors they perceive to create a good user experience, it is often good practice to consider these and other factors you can remedy to improve the user experience of your website.

Most photo/image editing software will allow you to preview the effect compression will have on the quality of an image. It is important to remember that most website CMS platforms will have options to resize images within the GUI– as a rule of thumb, we strongly advise against this practice. Instead, use a quality image editing software such as Adobe Photoshop to scale images in pixels (the unit of measurement you will want to use for your website and marketing collateral) prior to inserting them in your media. This will ensure minimum loss of quality whilst ensuring your images load as quickly as they can.

A recent report from Strange Loop found that a one second delay on your website can cost you 7% of sales. Whether you are an eCommerce business or have a brochure site, this can have drastic repercussions on your bottom line. If the leads or sales generated by your website are worth $1,000 a month, that means $70 a month– or $840 a year– in lost revenue.

At Greenlight ITC, we often are asked to improve the speed of our clients’ websites. Sometimes the servers you are hosting your website on are sharing bandwidth with hundreds or thousands of other websites, and you need something more suitable to the amount of traffic you are receiving. Other times, your website may need to be optimised. In either case, we are always happy to provide a free assessment to improve the speed of your website, which we can implement for you or that you can fix up on your very own.

 

[social-bio]