5 Tips to Increase the Speed & Performance of Your Web Pages

As we all know, the Google Gods tend to favor light, fast pages when serving up search results. In this post, I'm going to break down my top 5 web performance tips to consider when you want to optimize specific pages to be lightning fast.

1. Decide what you're optimizing for on each page. UX or SEO?

One of the best things you can do as you're building out your website is to be intentional with the GOALS of each particular page. These are a couple of examples to illustrate what I'm talking about.

Goal: Increase the number of free-trial signups for our product.

This type of goal lends itself to optimizing for UX rather than SEO. When building a page like this, you might want to include big, beautiful images of your product. Perhaps you'd add a few demo videos which show how easy it is to use or the problem it solves. You may even want to include a bunch of testimonials that further strengthen how awesome your product is. Live chat widget? Oh yeah! Throw that puppy on the page to field questions from potential leads.

All these elements add a decent amount of "weight" to the page and that's ok when you're optimizing for UX in this sort of scenario.

Goal: Increase organic website traffic with content marketing.

This type of goal is where optimizing for SEO really matters. Think blog content or what HubSpot calls Pillar Pages. When creating a page like this, you want to focus on the written content and do your very best to resist the urge to add in heavy media elements. A few lightweight images sprinkled throughout won't be an issue and will help strengthen your points. Just keep this page content-rich and media-light and you'll be in great shape.

These are the types of pages that do well with the Google algorithm and are generally the type of content people search for.

Wrapping it up.

So long as you're crystal clear on which pages you want the best chance to rank for organic search traffic and which can include all the "bells and whistles" because your focus is UX, your website will rock.

2. Optimize ALL your images.

Without a doubt, the single largest culprit when it comes to a slow web page is using unoptimized images and I see it all too often.  There are three areas you want to pay special attention to when it comes to images and their file size. Those are:

Image Size (dimensions)

Make sure the image you're uploading is sized to fit the area where you're about to add it. There is an awesome Chrome browser extension called Page Ruler Redux that will help you in this process. 

Once you install the extension you can simply click the icon and then measure any element on your page.

In this example above, I'd want to make sure my image is around 430 x 310px.

Image Compression

Another great way to reduce the file size of an image is by finding the sweet spot in how much it can be compressed without looking too fuzzy or pixilated.  Let's use my pal, Baby Yoda, as an example. 

Here is Grogu with ZERO image compression:
500x500px - File size: 138kb

Here is Grogu with a LARGE amount of compression:
500x500px - File size: 10kb

Can you spot the difference in the image? It's subtle but if you look closely you can see the pixelation in the second image. Your goal should be to find the right amount of compression that's going to give you the smallest file size and best-looking image.

I recommend using Adobe Photoshop to get the very best results.  With your image property sizes, simply click FILE > EXPORT > SAVE FOR WEB. Then you're able to play with the Quality settings to compress the image when saving.

Image File Format

The format of an image file you upload has an impact on the file size.  Make sure you are using the appropriate one. 

• .JPG / .JPEG
  This is the most common and widely used format of images across the web and will be perfect for a majority of the images on your website.
• .PNG
  This image format will typically result in larger file sizes and is best only used for images with a transparent background.
• .SVG
  These are great for when you're uploading a vector-based image. Think icons or even your logo since chances are it was created as a vector file.
• .GIF
  This format is largely reserved for animated images that cycle through a number of frames. Gifs can get up there in file size, so you'll want to use them sparingly.
• .WebP
  This new format has been picking up momentum as it generally has better compression than JPEG, PNG, AND GIF. However, you'll want to be aware that Internet Explorer 11 doesn't support this format. 

Wrapping it all up...

Images play a major role in how optimized your web pages are for speed.  While the CLEAN theme, as well as HubSpot, contain features like lazy image loading to help make your website fast, it's just as important to do your part in making sure the images served up are optimized and ready to rock.

3. Turn off jQuery in your HubSpot account

The CLEAN theme comes pre-installed with a version of the jQuery library out of the box. Because HubSpot also has a way to enable an older version of jQuery from your Content Settings, sometimes this can get left turned on.  Basically, this is loading two separate versions and needlessly slowing down your website.

To turn this off, go to your Content Settings, then WEBSITE > PAGES.  It's that easy.

4. Reduce or remove 3rd party scripts and embedded items

When it comes to page speed, everything adds up. Especially when it comes to including external tools that give you a nice little embed script to add to your website. These can often add significant weight to the page. 

Here are just a few examples I've seen and/or used myself.

• Live Chat
  Obviously, an extremely useful tool but adds weight. Consider only adding it to pages where you're not focused on optimizing for SEO.
• Analytics and Tracking
  The good news is that HubSpot has a lot of this built-in. However, there are other analytics platforms you may choose to add which carry their own weight.
• Embedded video
  YouTube, Wistia, Vimeo, etc. all add weight to the page in order to provide a functional video player.

You can generally find these in your Content Settings under WEBSITE > PAGES > TEMPLATES in your HubSpot account.  These scripts tend to live in the head or footer HTML.

Some scripts you'll want to include here, like a tracking or analytics package for example. That's something you'd want globally across your entire website.  Whereas a feature like Live Chat, you may only want on specific pages and not those you're optimizing for SEO.

The point here is to make you aware of all the potential areas and elements where page weight can be intentionally optimized based on your goals.

5. Keep the "Bells & Whistles" minimal

The CLEAN theme has a lot of bells and whistles.  From the MEGA menu to parallax scrolling, animations, background videos, scrollers, and much more, there's a lot to choose from to make your website feel and look dynamic and alive.

While each of these features is awesome, they do add weight to the page as a majority require additional JavaScript to make them work.

When you're creating pages with the intention to be optimized for SEO I would highly encourage you to forgo all the bells and whistles.  Save those for the pages you're optimizing for UX instead.

In conclusion...

The CLEAN theme and how it's been developed is only one piece of the puzzle when it comes to website performance. While it includes features like lazy image loading or best practices like deferring JavaScript/CSS, YOU have more impact with the content you add than you may realize. 

Design with intention. :)