How To Speed Up Your Showit Website

Ever been incredibly annoyed by a slow website? Let’s make sure it’s not your Showit Website.

In this guide, we’ll dive into practical strategies to speed up Showit websites, covering everything from optimizing images and videos to tweaking code for faster loading times.

Whether you’re a beginner or looking to refine your site, these insights will help ensure your website is as quick and efficient as it is visually stunning.

Does Site Speed Affect Your SEO?

Yes, search engines like Google consider page speed as a ranking factor when listing results. That’s because page speed means whoever is searching is going to have an easier time getting the info they need from a faster website. Why would Google send them to a website that’s just going to leave them frustrated and ultimately cause them to leave the page? No! Because if Google presented bad options we would stop using it and they would lose money. And considering they are a multi-billion-dollar business. Money is pretty important to them.

What Slows Down Your Showit Website

Creating a website is all about finding that sweet spot between functionality and speed. It’s tempting to add every cool feature you come across, but the fact is the more you have sometimes the slower your website.

The main culprits of ruining your Showit speed optimization are:

• Heavy Images
• Nifty animations that pop up as you scroll
• Third-party tools like your email platform, pixels, analytics, etc.
• Long videos playing in the background

In the following sections, we’ll delve into some practical tips on how to keep your Showit website not just visually stunning, but also running as swiftly as a gazelle. Because at the end of the day, a fast website is not just about improving user experience; it’s about making sure your visitors stick around long enough to see all the amazing things you have to offer.

How To Find Out Your Site Speed

Now that we understand what can slow down your Showit website, the next logical step is to figure out how fast your site is. But how do you measure the speed of a website? Thankfully, Google provides a handy tool called PageSpeed Insights that does just the trick.

Using Google PageSpeed Insights

PageSpeed Insights is like your website’s speedometer, giving you a semi-clear picture of how quickly your site loads and offering suggestions for improvement. Here’s how to use it:

1. Go to PageSpeed Insights.
2. Enter your website’s URL and hit “Analyze.”
3. Wait for a few moments as Google works its magic.

But here’s a pro tip: Don’t just run the test once. PageSpeed Insights can give slightly different scores each time you use it. To get a more accurate picture, run the test 3-4 times and calculate the average of those scores.

Interpreting the Results

When you look at the results, you’ll notice scores for both mobile and desktop versions of your site. Here’s something I always aim for when working with client websites:

• Desktop Results: Aim to get all results in the green. This indicates your site is performing well on desktop devices.
• Mobile Results: It’s a bit trickier with mobile. Try to get everything in the green except for the ‘Performance’ metric, which tends to sit in the orange.

Remember, nothing should be in the red zone. If you see red, consider it a red flag that your website needs some speed optimization.

Limitations and Realistic Goals

It’s important to note that there are some limitations. For instance, currently, you can’t use WebP images on Showit, which is one of the recommendations PageSpeed Insights might make. While this might affect your score, don’t get discouraged. The goal is to optimize as much as you can within the constraints of the platform. (Showit has said they are looking into accepting WebP images, so maybe this will change in the future)

Methods To Speed Up Your Showit Website

How to Optimize Images for Showit

We’ve already established that images are often the biggest culprits in slowing down your website. So, how do we fix this? The good news is, that with a few smart strategies, you can significantly speed up your site. Here’s a step-by-step guide to optimizing your images:

1. Choose the Right Format

• JPEGs for Regular Images: Always opt for JPEG format for your regular images. If you have illustrations, as I do on my website, take the extra step to edit these images to match the background color of your page before saving them as JPEGs. It requires more effort, but the payoff in website speed is well worth it.

• SVGs for Transparent Backgrounds: If you need images with transparent backgrounds, use SVGs instead of PNGs. SVGs not only allow for transparency but also let you change the color as needed. I recommend adding SVGs as custom icons for added flexibility and speed.
• GIF when animation is used: When it comes to adding animated elements to your website, GIFs are your best bet. They’re perfect for short, simple animations and don’t add as much load to your site as video files might. However, it’s important to use them sparingly. While GIFs are great for adding dynamic content, they can still contribute to slower load times if overused.

2. Resize Images to Exact Dimensions

It’s crucial to resize your images to the exact dimensions they will appear on your website. For example, if an image slot on your site is 400 x 500 pixels, resize your image to match these dimensions. This is important because if Showit is doing the resizing, the entire original image is still being downloaded in the background – it’s just not visible. By resizing, you’re ensuring that only the necessary pixels are downloaded.

3. Compress Your Images

Once your images are in the right format and resized, the next step is to compress them. This can significantly reduce file sizes while maintaining image quality. There are several online tools available for image compression – at the very least, make sure you don’t skip this step.

I like to use Tiny.png to compress my images and images for my clients.

Speeding Up Image Loading with Preload Code

Did you know that with just a small snippet of code, you can significantly improve the loading speed of your hero images on your Showit website? This is where the magic of HTML preload links comes in. Preloading resources, particularly important ones like your hero images, can drastically speed up how quickly they load on your page.

Note: If this step is too technical skip it. It will only improve your website speed slightly.

Using HTML Preload Links

Preloading is a technique that instructs the browser to load specific resources, like images, ahead of other page content. This ensures that your most important images are ready to go as soon as your visitor lands on the page. Here’s a basic example of what this code looks like:

<link rel="preload" href="Your image link here" as="image" type="image/jpeg" fetchpriority="high">

Integrating a section about using HTML preload links to speed up image loading is a great idea. This advanced tip will surely help Showit users who are comfortable with a bit of coding. Let’s add this to the blog post:

In this snippet:

• href is the URL of the image you want to preload.
• as="image" specifies that the preloaded resource is an image.
• type="image/jpeg" defines the type of the image.
• fetchpriority="high" tells the browser that this resource has high priority.

How to Implement It

1. Identify the key images you want to preload, typically your hero or banner images. Anything above the fold.
2. Insert a preload link for each of these images in the <head> section of your HTML.

🔥 Hot tip: Check the code in ChatGPT if you are unsure and what to ensure the code is correct.

Remember, while preloading is powerful, it should be used sparingly. Only preload the most critical resources to avoid overwhelming the browser with too many high-priority requests. You can also preload fonts.

Preloading Fonts for Faster Text Rendering Code

In addition to images, fonts can also be preloaded to enhance your website’s performance. This is particularly useful if your Showit website uses custom fonts that aren’t immediately available to the browser. Preloading fonts ensures that your text appears promptly and in the desired style, without the momentary flash of unstyled text.

Here’s how you can preload a font:

<link rel="preload" href="your-font-file.woff2" as="font" type="font/woff2" crossorigin="anonymous">

In this code:

• href="your-font-file.woff2" should be replaced with the URL to your font file.
• as="font" indicates that the preloaded resource is a font.
• type="font/woff2" specifies the font file type (replace woff2 with the correct format of your font).
• crossorigin="anonymous" is necessary for fonts due to CORS (Cross-Origin Resource Sharing) policies.

Implementing Font Preloading

1. Identify the custom fonts you want to preload.
2. Insert a preload link for each font in the <head> section of your HTML, similar to the image preload links.

Just like with images, use font preloading judiciously. It’s best reserved for fonts that are critical to your website’s initial presentation.

How To Optimize Video For Showit

Videos can be a double-edged sword for your website. They’re great for engagement and storytelling, but if not optimized properly, they can significantly slow down your site. Here’s how you can use videos smartly on your Showit website:

1. Embedding Videos: The Smart Way

Showit has a maximum file size of 8 MB for direct video uploads, nudging you towards a smarter approach: embedding. When you embed a video, you’re essentially linking to a video hosted on another platform (like YouTube or Vimeo), which takes some load off your website. However, this doesn’t mean it’s without impact. Embedded videos, especially multiple ones, can still slow down your page. So, what can you do?

2. Optimize Background Videos

• Remove Background Audio: If you’re using a video as a background, consider removing its audio. This can substantially reduce the file size and, in turn, the impact on your website’s speed.

3. Be Conscious of the Number of Videos

• Limit Your Videos: More videos mean more data to load. Be strategic about how many videos you embed. While one might not have a noticeable impact, several videos could bog down your website’s performance.

4. Use Video Compression Tools

• Compress Your Videos: Tools like 8mb Video are fantastic for reducing the file size of your videos without compromising too much on quality. These tools can also help remove audio, further optimizing the video for web use.

Don’t Have Too Many Redirections Setup

As your business grows and evolves, so does your website. Changes like updating URLs or shutting down old landing pages are natural parts of this evolution. However, these changes often lead to the creation of redirects, which, while necessary, can impact your website’s speed.

Understanding the Impact of Redirects

Redirects are essentially road signs on the internet highway, telling browsers, “Hey, the content you’re looking for is not here, but I can show you where to find it.” This detour, while useful, is an extra step in the loading process. And like any additional step, it takes time.

Why Too Many Redirects Are Bad

Having a few redirects is not a big deal, but if your website is riddled with them, it becomes a problem. Each redirect creates additional HTTP requests, which means more waiting time for your visitors as their browser jumps from one URL to the next.

Best Practices for Redirects

• Keep Redirects to a Minimum: Review your website regularly and keep redirects only when absolutely necessary. If a page is no longer relevant, consider removing it altogether instead of redirecting it to another page.
• Use 301 Redirects for Permanent Changes: When you do need to redirect, use a 301 redirect for permanent URL changes. This not only helps with loading times but also preserves search engine rankings.
• Regularly Audit Your Redirects: Over time, you might accumulate redirects that are no longer needed. Regular audits can help you identify and eliminate these unnecessary redirects, keeping your site more streamlined and faster.

And there you have it! By following these straightforward yet effective tips, you can significantly speed up your Showit website, enhancing user experience and boosting your site’s performance. Remember, a swift and responsive website not only keeps visitors engaged but also contributes positively to your SEO efforts. So, take these steps, apply them to your Showit site, and watch as your website transforms into a faster, more efficient online presence. Keep striving for speed, and let your website be the one that visitors remember for all the right reasons!

Need a helping hand in speeding up your website? Creative SEO Coach is here to assist! Our 7-day Optimization Service is specifically designed to dive into the nitty-gritty of your Showit website, ensuring it runs smoothly and efficiently.