Most Common Website Performance Issues & How to Solve Them

Poor website performance and slow page loading can ruin a website’s user experience and hurt your business. Studies show that you have approximately 5 seconds from the time a user lands on your website to make your case for conversion. These first few moments are the most critical to overall success, and yet some websites spend the majority of that time just trying to load the page. 

As a general rule, your site should load in 2 seconds at most to avoid SEO penalties and provide a good user experience. Moreover, every extra second of load time results in at least a 4% decrease in conversions. 

At HIVE Digital Strategy, we optimize websites frequently as part of our Growth Driven Design program, and in the process, we’ve encountered many of the same issues on site after site. The following article is part of our series on website performance. In a previous blog post, we discussed how to test your website and which website performance metrics to measure. In this post, we will explain how to fix the most common issues that we encounter when optimizing a website.

Images Are Not Optimized

Images are a huge part of your website, so optimizing them is critical. Image optimization is arguably more important than optimizing scripts and fonts because images are a larger percentage of the page load. Luckily, images are much easier to optimize than scripts and fonts, especially for non-developers. As a general rule, you should optimize your images before placing them in your content, but even if you are optimizing an existing set of images (such as the list that GTmetrix suggests for you in your results), the steps are the same.

Optimizing Image Sizes

As a developer, I get asked about optimal image sizes all the time. It’s an important consideration for your design and even more so for your website performance. 

Here’s how to find an image’s optimal size:

1. Open the web page in Chrome and right-click on the image and select Inspect
   
   
2. In the top left corner, click the icon to toggle the device toolbar
   
   
3. Set the responsive viewport dimensions to a width of 2600px - this is typically the largest screen size that I account for in responsive design
   
   
4. Again right-click and Inspect the desired image and make sure that the <img> tag is highlighted in the Elements tab
   
   NOTE: if the desired image is being used as a background or exists inside of a constrained container, select the element that contains the width and height properties of the desired image and follow the next steps
   
   
5. Click to the Computed pane of the Inspector sidebar
   
   
6. The dimensions in blue are the optimal dimensions for this image. Crop the desired image to these dimensions and save it as a .jpg before compressing the file.
   
   NOTE: If your image contains transparent portions such as the one used in our example above, save the file as a .png before compressing.

Optimizing Image Files

There are plenty of options online to compress images, but my favorite to use is TinyPNG. TinyPNG uses smart lossy compression techniques to reduce the file size of your WEBP, JPEG, and PNG files. This process selectively decreases the number of colors in the image, which in turn requires fewer bytes to store the data. The effect is nearly invisible but it makes a very large difference in file size and provides a quick win for your site speed optimization efforts.

From the TinyPNG home page, simply upload your image or images. They will be automatically optimized and the amount of savings displayed. Click to download the optimized files and upload them to your site in place of the larger, unoptimized files.

Adding Lazy Load

Lazy-loading is a technique that defers loading of non-critical resources at page load time. Instead, these non-critical resources are loaded at the moment of need. Where images are concerned, "non-critical" is often synonymous with "off-screen". Some CRMs, including HubSpot have front-end lazy loading options, but I prefer to include a light-weight plugin like this one and set the rules to include all <img> and <iframe> elements in the main JavaScript file.

Code Is Not Optimized

Minifying Styles and Scripts

When creating HTML, CSS, and JavaScript (JS) files, developers tend to use spacing, comments, and variables to make code and markup readable for themselves and others who might later work on the assets. While this is a plus in the development phase, it becomes a negative when it comes to serving your pages. Web servers and browsers can parse file content without comments and well-structured code, both of which create additional network traffic without providing any functional benefit.

To minify JS, CSS, and HTML files, comments, and extra spaces need to be removed, as well as crunch variable names so as to minimize code and reduce file size. The minified file version provides the same functionality while reducing the bandwidth of network requests.

There are several options for online minification, but if these files are updated often, you’ll want to incorporate minification into your front-end development workflow. If you are using the HubSpot CRM, you’re in luck! HubSpot will take care of this for you. Otherwise, check out the Autoptimize plugin for WordPress or Gulp Uglify for your workflow. 

Following Placement Best Practices

In order to reduce the Largest Contentful Paint as much as possible, code must be placed strategically so that only styles and functionality required above the fold are called in the <head> tag of the document. Everything else and especially scripts like jQuery should be placed in the document’s footer. 

If you are using HubSpot, make sure that all of your modules and templates require JavaScript code using the proper { % require_js position=”footer” % } { % end_require_js % } wrap.

PRO TIP: always check for duplicated code, especially common resources like jQuery and FontAwesome that may be included as part of individual modules or plugins in addition to the templates files.

Fonts Are Not Optimized

To provide a more consistent user experience and reduce server load times, limit font use to no more than four unique families and include them in a single call when possible. When using Google Fonts, add pre-fetching and display swapping (get the exact code snippets from our checklist). Always include a fallback family in the font-family CSS properties across the entire site. This will prevent font flickering or invisibility while the custom families load. You may also want to include a media query that displays the fallback font on small screens to completely eliminate the need for font scripts on mobile.

In the next post in this series on optimizing your website performance, we will talk about all the ways that HubSpot CMS optimizes your website for you, as well as a few quirks to keep in mind to keep your site running smoothly.

Get the steps and exact code to fix the issues above and optimize your website with our guide and checklist that we have used for all of our Growth Driven Design clients. This information is proven to get a website to score an A on GTmetrix. 

Do you need help getting your website to perform optimally? Let’s chat about how our Growth Driven Design program can turn your website into an ROI machine.