Tips for Evaluating and Improving Your Website’s Performance

Website performance is an important, but often overlooked, aspect of a website. Not every visitor to your site will have a fast and reliable connection. In this article we give you Tips for Evaluating and Improving Your Website’s Performance.

Many of those visitors will be on connections with variable connection speeds, a reality in today’s increasingly mobile-centric world of web design. Other visitors may be in areas or countries where connection speeds are simply slow to begin with.

Even if a person has lightning fast Internet speeds, a website that loads quickly will benefit them as well.

After all, no one has ever said “this website loaded too fast for me!”

Taking a website’s performance seriously is an important step in ensuring the overall success of that website.

Let’s look at some of the tools that can be used to evaluate a site’s performance, as well as some of the culprits which may be negatively impacting that performance.

Table of Contents

Evaluation Tools

Knowing how your site is currently working is the first step to improving performance.

Here are some helpful tools that you can use to assess your website:

Pingdom Tools Website Speed Test – This site will evaluate the download size and speed of a site and show you all the resources (images, CSS, Javascript, etc) that the site needs to render properly
What Does My Site Cost? – This site puts a dollar amount to the data download on your website and shows you what the cost would be in various countries throughout the world. If your site has an international audience, this can be especially helpful
Webpage Test – This helpful site provides you with a wealth of information and tips for how you can improve a site’s performance.

Once you’ve evaluated a site, you can look at the areas of that site that could use improvement from a performance/download size perspective.

Images

Let’s take a look at the image formats that we have available to us as web designers.

JPGs

JPG files are a good choice when they need substantial color depth on an image – like with a photograph. If the image you are using on your website is a photo or a person or a place, then a JPG is likely going to be the right choice for you.

JPG files can be saved in a range of different quality settings. While you may lose some of the visual quality and crispness of an image as you get towards the lower settings, you will also reduce the file size of the image and make it better from a download/performance perspective. The compression of JPG images make them a good choice for web images.

GIFs

GIF files can be used for graphics that have only a few simple colors. Many illustrations and even logo files are common choices for GIFs.

GIF files also support transparency, but it is an “all or nothing” approach to that transparency. Areas of a GIF can either be fully opaque or fully transparent.

If an image has hard lines and angles and requires parts of the image to be fully transparent, a GIF file can be used.

Finally, GIF files can also include simple animation. Animated GIFs are often used online for humorous purposes and as memes.

PNGs

PNGs can be used in a number of ways online. Like JPGs files, they include substantial color depth and can be used for photos. The downside to using PNGs instead of JPEGs is that the file size of PNGs is often much greater than the JPG counterparts.

The image quality is also greater, but when you consider download speed for web images, JPGs are often a better choice than PNGs.

Where PNG files excel is with transparency. Like GIFs, PNGs do support transparency, but PNGs offer a range of opacity support. This means that image areas do not need to be either fully transparent or fully opaque.

With PNG, you can have semi-transparent areas. PNGs also support images with curved areas, like circles, that also need transparency.

Because these images are raster-based, which means they are made of small pixels or squares of color, this support for different levels of transparency allows for smooth looking curves and edges.

If you have an image that is a complex shape and requires transparency, PNG is typically the best choice.

SVG

SVG means Scalable Vector Graphics. This file format has been around for quite some time, it has really started to grow in popularity recently and it has become an important part of many responsive websites. SVG files are vector-based.

This means that they are created with mathematical lines as opposed to pixels of color. SVG files are often very small in file size, but they can be scaled to any dimensions needed without changing that file size, making them very attractive for web delivery and improved performance, especially with responsive websites.

SVG files are used for simple illustrations, like icons, and they can be styled and animated with CSS.

WebP

WebP is an emerging file format that has been developed by Google specifically for web use.

Designed to be compressed, WebP supports color depth like JPGs and PNGs do, and it also supports alpha transparency and even animation, making it something of a workhorse image format!

Currently, only Google Chrome and Opera support the WebP file format natively, but as this is an emerging format, expect other browsers and software packages to extend support for this file type in the future.

Optimizing Images

No matter which image format you use, you should make sure those images are optimized for web delivery. You can use optimization tools like ImageOptim (for Mac) or FileOptimizer (for Windows) to losslessly compress your images and remove unnecessary metadata from your images while retaining their quality.

Fonts

With web fonts, designers have access to a wide range of typefaces that can be used reliably on the websites they design and develop.

This is awesome from a design variety standpoint, but it can be a step in the wrong direction for webpage loading time.

Every time you use a new web font on a site, that font needs to be retrieved from the server and loaded on the page (unlike system fonts that are loaded directly from a person’s computer).

Loading multiple fonts for a page can definitely impact download speed.

Animation

Animated effects, like a slideshow-like “carousel” display on a website’s homepage, can add some nice visual WOW factor to a site, but it will do so at the expense of download time (remember, every one of those large images needs to be loaded onto the page, along with the Javascript needed to run the animation effects).

From a download performance perspective, just one image/message on your homepage’s billboard area is preferable to an animated carousel.

Additionally, research conducted on the use of these animated carousels shows they are less than effective anyway, so by removing that effect, you can often improve download speed without any negative impact on the site as a whole.

Web Hosting

The elements of your webpages are not the only factor that impacts performance. Your website hosting provider also plays a role in this equation.

By using the evaluation tools linked to earlier in this article, you can discover some suggestions that apply to your website hosting settings. Share those findings with that provider to see what they can do on their end to improve your site’s performance from the server level.

Wrapping Up

We hope these Tips for Evaluating and Improving Your Website’s Performance have been helpful. A website that loads fast is a wonderful thing. This is increasingly important as more people use mobile devices to access websites.

An important part of your job as a web professional is to ensure that your websites take performance seriously and are ready to do their part in making sure the pages load quickly for all users, regardless of device or connection speeds.

Join The Logo Community

If you would like more personal tips, advice, insights, and access to our community threads and other goodies join me in our community. You can comment directly on posts and have a discussion.

Useful Links & Great Deals

Author Bio
Diane H. Wong, a writer for the do my essay service. She worked as an SEO specialist for more than 5 years. It helped her estimate and analyze the business sphere better.