Now Available - One-Time Audits! See Pricing

Increase Page Speed Scores After a Redesign

Shutterstock 2233704499 Increase Page Speed Scores After a Redesign Vizion Interactive Reading Time: 8 minutes

Although a redesign is often attractive, it may introduce elements that may slow down your website and reduce your page speed scores. These issues can range from complex code to high-resolution images and redirects.

For instance, unoptimized visuals cost Imagify almost a third of its speed performance. All it did to sky-rocket its mobile scores from 68 to 95 was:

  • Reducing/resizing images
  • Activating RocketCDN
  • Implementing lazy loading, code minification, and browser caching with WP Rocket

By the end of this post, you’ll discover the new features or omissions you made during your redesign that dipped your scores. Also, stick around to see extra tweaks that’ll improve your site’s speed besides fixing problems.

How to Increase Page Speed Scores After a Redesign?

It sounds simple to replicate what Imagify did and improve your speed score. But let’s look at image optimization as an example.

Moz user Egol says, “I have pages with 40 to 50 to 100 images…”

Now, imagine you have 30 such pages on your website. That’s anywhere from 1,200 to 3,000 images.

The time it takes to deal with images alone is mind-numbing. Remember, you still need to simplify code, reduce redirects, and lower file sizes.

Luckily, various tools (like Imagify) and tricks can help improve scores faster and easier.

But before you get started, use checkers like PagesSpeed Insights and GTMetrix to identify the top issues slowing your site.

For instance, PageSpeed Insights highlights the top problems on your site with a red triangle.

Picture7 Increase Page Speed Scores After a Redesign Vizion Interactive

Image source

Once you know the concerns to prioritize, you can dive into the solutions below.

Optimize Images

The best way to optimize images for faster page speeds is to lower their file sizes as much as possible without degrading the image quality.

But what is a good image file size?

ImageKit recommends 70 Kb to 100 Kb.

You can attain this sweet spot by compressing images with tools like Bulk Image Compressor. As a bonus, this tool even allows you to set size dimensions and quality. This all-in-one solution also lets you compress all your images at once.

Picture8 Increase Page Speed Scores After a Redesign Vizion Interactive

Image source

Unfortunately, you’ll have to extract all your existing site images, compress them, and re-upload them. That is still tons of work!

However, if you’re using WordPress, you only need a plugin like Imagify or WP Smush Image. These tools scan your site and automatically optimize large images. So you don’t need to download or re-upload pictures.

Note: Some tools have size limits for image optimization. For instance, Imagify only resizes images under 2MB on a free plan and 33MB for paid users.

Reduce File Size and Quantity

Besides pictures, you can enhance your page speed by compressing videos, eBooks, downloadable guides, etc. Only include necessary files and reduce their size where possible.

Correctly adding videos eliminates the pressure on your resources. It’s best to embed videos from external players like YouTube or Wistia. Why?

Most external media players play videos using JavaScript instead of embedding them into your site’s native structure. For this reason, your native website elements like navigation menus, text, and images will load before the videos.

This asynchronous loading sequence ensures embedded videos don’t interfere with your speed.

Meanwhile, self-hosted videos embed themselves into your site’s structure. So, they weigh down your website and slow your speed.

Of course, anything you embed on your page, self-hosted or otherwise, adds code. Internet service providers and search engines must scrape and load each added code. As such, excessive code snippets will slow your site.

Additionally, ad-saturated external players like YouTube add more code than those without, like Wistia. So, opt for the latter to lower the impact on your speed.

Similarly, you can host audio, eBooks, PDFs, and other files externally to reduce the strain on your resources. Some popular hosting options include Dropbox and Google Drive.

Finally, compress any self-hosted files using tools such as:

Most third-party hosted services use their own Content Delivery Network (CDN). A CDN helps distribute content across multiple servers globally, significantly reducing load times by delivering data from the server closest to the user. This improves the hosted service’s performance and ensures faster access to the end user. 

Minify Code

You may add unnecessary elements like commas, duplicated data, and comments during your redesign for readability and code maintenance. Removing these formatting characters mistakes from CSS, JavaScript, and HTML allows the browser to download and process files faster by reducing the payload.

Fortunately, many code minification tools are available for most popular Content Management systems (CMSs). So, you don’t need to be a developer to do this.

For example, you can use:

Based on a test by Themeisle, Fast Velocity Minify can improve your speed by almost 10%. Here are the comprehensive results:

Picture9 Increase Page Speed Scores After a Redesign Vizion Interactive

Image source

Alongside code minification, take advantage of AMP. This open-source framework uses JavaScript, HTML, and CSS (with restrictions) to create faster mobile pages. 

AMP removes unnecessary elements like JavaScript-based trackers and ads that may slow pages. As such, these pages have basic formatting and load almost instantly.

You can use treeshaking to reduce JavaScript file sizes by removing unused codes and loading only the needed scripts for specific pages. By splitting large JavaScript into smaller, page-specific ones, treeshaking improves your site’s performance and reduces the load times. 

Reduce Redirects

Redirect chains and loops are among the top problems that arise during redesigns. They occur when you change page URLs several times during subsequent redesigns.

A chain arises when URL A sends users to URL B, which directs them to URL C, etc.

Meanwhile, loops happen when a redirect creates a circular reference, with one redirect leading back to another. Unlike a redirect chain that eventually reaches the destination, a loop prevents the page from loading altogether. Most browsers will stop processing after 30 attempts and display an error.

The longer a redirect chain, the more the HTTP requests and loading time required.

You can check for redirects manually. However, it’s easier to use plugins or tools like Screaming Frog.

Here’s a guide from Screaming Frog on how to use their tool for this.

Screaming Frog Increase Page Speed Scores After a Redesign Vizion Interactive

Once you identify chains and loops:

  1. Go to the source pages.
  2. Locate the affected anchor texts.
  3. Change the links so that they lead directly to the final pages.

Additional Ways to Improve Page Speed Scores

If you addressed all changes that lowered your speeds but still desire better performance, there are a few more things you can do:

  • Implement a Content Delivery Network (CDN): These networks boost speeds in three ways:
    • Reduce the distance your pages take to reach visitors.
    • Reduce data transferred through methods like compression and minification.
    • Optimize the performance of server-side infrastructure through methods like efficient load balancing.

You can set up a free CDN like Cloudflare if you have a small site or want a free solution. On the other hand, advanced offers from paid options like StackPath may benefit you more for high-traffic websites.

  • Use browser caching: This technique speeds up your site by saving files within the browser cache. Upon the next request, the browser fetches files from the cache rather than the server. As a result, fewer MBs need downloading, which improves page performance.

You can enable browser caching by reusing static assets and ensuring the cache-control headers are properly configured on the server. This ensures that files like images, CSS, and JavaScript are stored locally, reducing load times on subsequent visits. WordPress plugins like Hummingbird can help you manage and adjust cache expiration dates easily. 

  • Try lazy loading: This technique delays some page elements, like images or videos, until the user needs them. With fewer resources required, your page takes less time to load. And your Lagest Contentful Paint scores improve.

You can activate lazy loading with tools like WordPress’ a3 Lazy Load and Joomla’s JSLazyLoading.

Pro tip – very often the hero image of a blog post is going to be in the Largest Contentful Paint – don’t lazy load these images as they will unnecessarily lengthen the LCP time.

  • Focus on above-the-fold content: Optimizing your above-the-fold content can help you boost the perceived performance. Believe it or not, this is part of what dictates your page speed.

Ask yourself, “If someone opens my site without checking the time, do they think it loads fast?”

Visitors often assume your page loads longer if the last things to load are at the top. So, structure your code properly and move longer-loading elements lower.

You can use DNS prefetching for all third-party resources, such as Google Tag Manager, Google Services, external scripts, fonts, tracking tags, and CDNs hosted on different domains or subdomains. This technique helps speed up the loading of external assets that impact the user experience. 

Why Do My Page Speed Scores Change With Every Test?

If you test your website speed from different locations, your scores will differ. Likewise, different URLs provide different results. Also, each tool has different capabilities, so what you use impacts your results.

For instance, if you tested your site using Google PageSpeed Insights from your office in Queens, the tool provides results based on the nearest US server. Once you test again during your London business trip, PageSpeed Insights will grade you using UK servers.

That’s why you need a speed tester that allows you to set your testing location. This feature is especially important if your customers come from a specific area.

By testing your speed with tools like GTMetrix, you can pick locations and mimic your customer’s environment. So, you’ll get a real picture of your site’s performance to your audience.

Picture10 Increase Page Speed Scores After a Redesign Vizion Interactive

Image source

Moreover, your tool should allow speed assessments with different connection speeds. Unlike GTMetrix, which has this feature, PageSpeed Insights only uses 4G (super slow). That means you’ll only get results for that connection type (your site’s slowest performance).

However, if different results are showing for the same parameters (location, connection speed, device, etc.), either:

  • Results clash for the same URL: Arises from non-constant elements like changing server response times or scrolling banners. Here’s a response from Googler Dave Mankoff on this issue:

Picture11 Increase Page Speed Scores After a Redesign Vizion Interactive

Image source

  • Results clash for different URLs: The number of redirects affects your scores. Let’s say you test Vizion.com and www.vizion.com. PageSpeed Insights assumes it has to go from vizion.com to www.vizion.com rather than test the latter directly. Here’s ex-Googler Doantam Phan’s response regarding the difference:
  • Picture12 Increase Page Speed Scores After a Redesign Vizion Interactive

Image source

Should You Hire Someone to Speed Up Your Site?

You can always follow recommendations from speed-testing tools by yourself. However, that means resizing and compressing files.

You must also eliminate unnecessary redirects and code elements, add a CDN, lazy loading, etc. If you aren’t a developer or have coding experience, these tasks can be time-consuming.

They won’t just take the time you could be investing in other duties. You may create new problems in the process.

Boost Your Results with a One-Time Audit!

Contact us now, and let’s fix all the speed-lowering issues you added during your redesign ASAP.

At Vizion Interactive, we have the expertise, experience, and enthusiasm to get results and keep clients happy! Learn more about how our Website Design and Development services can increase sales and boost your ROI. But don’t just take our word for it, check out what our clients have to say, along with our case studies.