Page speed optimization is an increasingly hot topic in inbound marketing and SEO. With Google’s Core Vitals update, user experience is now the most important factor  for search engines. This means marketers should be focusing not just on keywords or the content that they’re delivering, but also things like reducing load page speed, lowering bounce rate, and prioritizing the most important pieces of content. 

When it comes to website speed, many factors contribute to long load times. When these get stacked, you’re left with what we call  “website bloat.” It’s kind of like when you eat too much asThanksgiving dinner:Individually all of the things that you’ve added to your plate  served their purpose, but an hour after dinner,  things are running a little more slowly.

Have you ever conducted a search for a recipe online only to find yourself in a site-loading nightmare? Your screen is cluttered with ads, chat boxes, email subscription pop-ups, and images and videos that take forever to load. It’s a user experience nightmare when all you wanted was a recipe! 

If your website takes forever to load, users can’t access the information they need efficiently and will probably seek it elsewhere, resulting in not only missed opportunities for you, but increasing your bounce rate and subsequently decreasing your search engine rankings. 

Your website was probably built with a certain version of your organization and marketing process in mind. However, as you’ve grown you’ve added landing pages, plug-ins, tracking scripts, new images, widgets, and other content that’s important for your prospects. If this content wasn’t added by a skilled web developer, or if your original website wasn’t built to accommodate growth, you may now be experiencing website bloat and slower page load times. 

Let’s take a look at factors that could be contributing to your slow page loading times and explore what you can do to optimize page speed: 

1. Image Size & Optimization

Images make up an average of 21% of a website’s total “weight.” When adding images to your website you need  to balance a small file size with maintaining visual quality. When you use images that are too large, you’ll have high quality, but bog down the page loading times. When you use images that are too small, you’ll have poor quality, which will also have a negative impact on user experience. 

To optimize images for the web, use tools such as:

• Photo-editing software
• Wordpress plugins
• Manual resizing in image file manager

If you’re lucky enough to be on HubSpot CMS, your images are automatically resized on upload. 

If you’re not, we recommend Squoosh, a free app for image optimization. The Squoosh app lets you see different steps when optimizing images, which is useful for design novices. It has a bar that can be moved across the image to check the resolution difference between the original and resized image.Drag and drop the image you want to optimize to the app, click “download” to get the resized version, then load it to your website.

Note: PNG and JPEG are the best file types for uploading images. PNG images are best for simple images and JPEG is best for images with a lot of color. 

2. Video Size & Optimization

Video accounts for more than 50% of daily media consumption in the U.S. The growing popularity of video marketing makes it essential  for any brand hoping to increase user engagement, but videos require significant  bandwidth. 

Here are a few tips:

Use Externally Hosted Content

To make sure your page load times don’t suffer,  load your videos onto a hosting platform like YouTube, Wistia, or Vimeo before embedding them on your website. While there are benefits to self hosted content (the pros and cons of which can be viewed in this article from Invisible Harness), we usually recommend that clients use external video hosting (review the pros and cons of self-hosted videos). 

Carefully consider where your videos are hosted. YouTube, for example, weighs down your site with ad scripts and data collection. When the video ends, other YouTube videos are displayed, which threatens to draw visitors away from your website. Wistia and Vimeo may be better options.

Use Lazy Loading

Be sure your developer uses lazy loading for video content. Lazy loading will only load the content visible to the visitor, then load additional content as the visitor begins scrolling. This helps ensure a user is engaged before loading the rest of the page.

Use the Right File Type

Using the proper file format will ensure your video loads properly and displays on all browsers and devices. H264 is the most compatible video codec (file type); it’s considered the best choice for efficiency and compatibility. You can learn more about it in this article from dacast: Best Video Codec for Web Streaming. 

Other Optimization Tips

• Make the video part of the website layout. You don’t want to take over the screen. Give your users the option to expand the video if they choose to. 

• Make it slow-connection friendly. Be sure that users with slow internet connections have an option to view a more compressed version of the video file. In this article, Wondershare breaks down both their video compression tool and other available options for compressing your videos for web pages. 

• Do not allow autoplay. Skipping autoplay not only decreases page load time but optimizes user experience, since autoplay videos can be unexpected and annoying for visitors. If you must use autoplay,  let the user turn on the sound themselves.  
  
  

3. Fonts & Icons

Your website aesthetic matters. Make sure your webpage is in line with your branding, and balance that closely with page load times. Having complementary fonts and icons assures cohesiveness among headings, navigation, and footers. 

Here are a few considerations:

Fonts

Specify branded fonts in your style guide can bring a cohesive look and feel to your website. . However, using too many custom fonts that need to be loaded from typescript or other external resources can bog down page load time since the fonts aren’t cached. Instead, consider specifying default and Google fonts  maintains cohesion while also ensuring that your fonts load faster, as they’re usually already cached on the user’s device.

Icons

Icons can communicate the purposes of products and services without using large photos.  Find icons in font libraries, but only load the ones you need to avoid decreasing page load speed. Font Awesome is our favorite place to browse icon libraries. 

4. Scripts & Legacy Code

Scripts

Your website consists of many different scripts that load  to automate functions or pass information to third parties such as HubSpot or Google Analytics. These scripts are responsible for  loading analytics tools, chat bots, videos, social media share buttons, and more. However, when you work with an inexperienced developer, these scripts can be misplaced on your site and have a negative impact on your page load time.

A tool like Google Tag Manager will help your developer set these up correctly and keep them out of the code, allowing your marketing team to determine where to load scripts once they have been properly trained by your development team.Check out our blog for more reasons you shouldn’t leverage cheap outsourced web development.

Website sliders, while an effective way to show  different types of information in one place, can bog down load times. Outdated plugins, slow hosting, and slow slider plugins all contribute to this, but you should also avoid slow sliders by ensuring  that slider scripts aren’t loaded on every page. Scripts should only be fired if they’re included in a page or module, loading only when that page/module is loaded. 

Poorly Written/Maintained Legacy Code

Plugins and add-ons from different developers allow companies to add functionality, but it doesn’t take long before your website is bogged down with all sorts of styling from previous site versions or unnecessarily long, poorly written code.

Plan your website effectively for long term functionality and develop a framework that will help your site run more efficiently. This is, again, why it’s so important to hire based on skill rather than price. Poorly written code is not only responsible for slow page load times, but it’s also responsible for increasing web development costs, as other developers will have to pick through the code and program around it, costing you much more than if you would had done it properly from the beginning. 

5. Hosting and DNS

Bad Hosting

Life has undoubtedly taught you that  you get what you pay for. One of the most important aspects of your website is where you decide to host it. Cheap hosting solutions can be bad business. For instance, we recommend against hosts like GoDaddy and Blue Host because of, their overloaded servers, poor support response times, and instability. Their infrastructure is slow, their servers are slow, and their support is slow – so their page load times are also slow. 

When shopping for a hosting provider,  read reviews and do your research. While hosting isn’t a high dollar expense, the costs of poor web hosting are far greater than what you pay monthly. 

DNS

Reducing the number of redirects for your domain will do a lot for reducing page load times. Each time a URL is redirected, it requires an additional HTTP request and response. According to SandboxSEO.com, each additional redirect requires an extra 63 milliseconds for the page to load. 

Having your DNS records set up properly is a critical aspect of this. 

As listed by Catchpoint.com, factors impacting page load times relative to DNS records:

• Too many aliases or CNAMES
• Exotic domains
• Geographical distribution
• Unreliable registrars
• Capacity

While redirects can’t always be avoided in a site redesign, a skilled developer can minimize the impact of these redirects by making sure you’re set up properly from the start.

All of these different factors can play a role in page loading times so it’s easy to see how pages can become bogged down. 

Every new factor contributing to the slow-down of your website is a factor in decreasing your conversion rate, meaning fewer leads and sales, meaning you lose money. If your website is burdened with these problems, it’s probably time to address each factor and begin optimizing your site. 

Trying to reduce your page loading speeds yourself can be cumbersome. Hire a skilled developer to help you optimize your website speed on an ongoing basis.