website structure and website design

High Performing Websites – Why they They Matter.

High Performing Websites – Why they They Matter.
By Greg Dubois | November 28, 2017
Share:

When creating a new website, or updating an existing one, a lot of emphasis is put into the look and feel and the content. We consider colors, font sizes, concepts like “above the fold” and the tone of our messaging. However, that isn’t everything to a successful website – I’m talking about how websites are made and their overall performance. Sites that are slow to load or feel clunky to navigate through can have considerable negative effects on bounce rates and conversions.

Avoid TL;DR (Too Long; Didn’t Read) with a site that takes forever to load

The speed of your website is important and I want to share some best practices below that can help you avoid creating a slow site. But first, some background...

As a developer at Ridge Marketing my role in the creation of a website comes towards the end of the process. I take the approved website designs and content and bring them to life in the browser. Outside of making sure that the client gets a website that matches the pdfs that they have seen, I consider one of my most important tasks is to make a website fast.

To understand how to optimize performance, we must first understand how a web page goes from being requested by a user to fully rendered on their screen.

  1. A user enters in a url into their browser address bar
  2. The browser sends a request to find the correct server that contains all of the data that is associated with that page.
  3. The server gathers what it needs and starts sending it back the other way to the browser. This includes images, HTML, CSS and JavaScript.
  4. The browser then parses that data and starts constructing the page for render.

The above is a simplified version of the whole process, but you can probably already tell that a lot needs to happen in a short amount of time. Steps one through three are part of the Hypertext Transfer Protocol, or HTTP. They also revolve around the server hosting the website. At Ridge Marketing, we put our trust in hosting companies like WP Engine or SiteGround to provide best practices and quick response times.

Step four above is the result of all the work we did both with the client and independently. There are controllable items we as developers need to consider so that step four doesn’t hold up the entire process.

So, what are common reasons for a page to load slowly?

  1. Large images that are scaled down with HTML or CSS to fit their container, or images that are not properly optimized for the web.
  2. If the webpage is requesting a large number of files. Every file that is being referenced on the page creates another request to the server which increases time.
  3. CSS and JavaScript files that are not minified. Minifying is the process of removing unnecessary spaces and line breaks to reduce the file size provided. Sometimes even re-writing some of the text to make the character count shorter.
  4. Webpages that are not structured properly. Browsers read HTML from the top down, and will pause briefly when it encounters a reference to a new file.

Let’s go through these items and I can outline how we make sure none of the above happens on our clients’ websites.

1Poorly optimized images (aka don’t use the same images for print and web)

According to the HTTP Archive, roughly 60% of data being transferred across web traffic are images. With this information, we know that providing correctly-sized images are pivotal in a website’s performance.

To do this we make sure to always save them at the exact dimensions we need at “web” quality, which is 72 dpi (dots per inch). In comparison, when our design team creates a piece meant for print it is normally in the range of 300 dpi. A high dpi will provide a high-quality image, but at the cost of greater image size. In print pieces this is not a concern, but for the web it is quite important.

From there, we take the image and run it through an image optimization tool to try and cut down the file size as much as possible while trying to preserve overall quality.

2Large number of file requests between the browser and server

A webpage, as mentioned above, is comprised of several different file types. These include CSS to make the page look the way it does, JavaScript to add extra functionality and interaction and images to provide extra graphical context.

There are a few of different ways to combat this problem:

  1. Try and combine similar file types as much as possible. Instead of 3 CSS files, can we put them together into 1, larger file. To expedite development time, we will often use free plugins that other developers have made and give access to for free. While this has its pros, one of the cons is that we might end up with several different JavaScript or CSS files. Most of the time we can use concatenation to link or connect them, reducing the number to 1 or 2.
  2. Making use of the new HTTP 2 standard. HTTP 2 has been around for a couple years now, but previously there was a penalty for requesting many files. With version 2 the protocol is able to field multiple requests at once and significantly reduce the overall number. In a website URL, the difference between HTTP and HTTPS is that the HTTPS site has a SSL certificate, which can improve the site security, but also make the site faster. That’s because HTTP 2 will only work with domains that have a valid SSL certificate. We also know that Google likes sites that use HTTPS and will give them a higher search ranking position. These reasons are why we always encourage our clients to get a SSL certificate set up. Sounds like a win-win to me.
  3. For pages that require a lot of images, we will implement a method known as lazy loading. Lazy loading is a technique that allows images to load only when the user actually needs them. For example, images that are located far down on a webpage will load in right before they are scrolled into view. This also ties in nicely with our image optimization above.

3Reducing overall file size of the resources being requested

After we complete our concatenation of similar files, the next step is to strip out white space, line-breaks, and whatever else we can to save those precious kilobytes. This might sound tedious, but luckily there are numerous tools we can employ that automate this work for us.

4Improperly structured webpages

Browsers read HTML code starting from the top and go line by line to the bottom. When they encounter a reference to another file, they will pause temporarily to read through it. Good practices tell us that we should try to put as many file references as possible below the content of the page.

The exception would be the CSS, because we do not want users to see an un-styled page. This method allows us to ensure that the browser does not get sidetracked. The most crucial parts of the page - the content and how it looks - are prioritized so that users see something on their screen more quickly.

The Bottom Line

Optimizing website performance plays an important role in your business’s online presence. Normally people know they want a fast website for a better user experience, but they aren’t sure what makes it fast or what could be changed to make it faster – now you know!

The good news is that at Ridge Marketing, we’re always thinking about the intricacies that make a site faster and more efficient. You can work with your project manager on the messaging, design and content that will attract and retain site visitors; meanwhile, we’ll help boost your site’s performance by taking the steps that the end user will never see.

Share:
Blog Home Next Article