If there’s one place first impressions are absolutely critical, it’s your website - and we’re not just talking about design and content. The speed of your pages is one of the most important determinants to its success.
A slow loading website can damage your reputation as well as cost you money, because you’ll lose out on conversions. Conversely, a high performing website will have a positive, domino effect on your business’ success. It will attract more visitors, which then increases sales leads, and ends up bringing in more customers.
The very first step in ensuring you have a fast loading website is to use a robust website builder, which provides the best technology. However, your job isn’t over after this. It’s your responsibility to make sure that the content you include on your site doesn’t get in the way of its performance.
You will need to find the right balance of media, choose where you place your items, and what type of content and extensions to use in the first place. For example, animated GIFs can add some pizzazz to your pages, but are often heavy files and consume a lot of network bandwidth. Also, text loads faster than images, so be attentive to how you order your elements.
There are many factors to consider, but you’re certainly capable of it. Plus, you’ve come to the right place. This article provides you with everything you need to know about website speed optimization and how to improve website performance.
What is website speed optimization and why is it so important?
Once a site’s link is clicked, website speed is the amount of time it takes the web pages to download, display in the browser, and become responsive to user interactions.
This term should not be confused with “perceived performance,” which is the way that visitors assess your website’s performance based on what they see on their screens first (which is not necessarily the elements that load first). Because they are two different, yet equally important notions, you should always work on improving both your website’s speed and perceived performance in parallel - something the tips mentioned below will help you achieve.
Your next question is probably “what is considered good website speed?” The answer to that is industry specific, but it’s highly recommended that, on average, your pages load in under three seconds.
Finally, you’ll wonder: Why does website speed optimization matter (outside of the frustrations arising from our extremely short attention spans)? Well, loading time affects usability, conversion, user engagement, and search engine visibility.
Usability impacts: It may seem obvious, but the faster your website loads, the sooner its features can be used, such as items which help visitors navigate to shop, speak with customer service, or simply just understand the purpose of your site. Therefore, allowing these features to be visible faster will create happier, returning visitors. It’s as simple as that.
User engagement impacts: Users are more likely to engage with your website when they can move quicker through processes. For example, if you have an online store and each step of the checkout process takes more than a couple of seconds to load, it’s understandable that many potential buyers will abandon the process altogether. The same can go for filling out forms or jumping between pages. You can see here the detriment such issues will have on your number of site visitors and overall business goals.
Conversion impacts: One specific goal most site owners are focused on is conversions. In fact, as tiny as a 100-millisecond delay in page speed can lead to a 7% decrease in conversion rates for your website. If your visitors can’t utilize your features fast enough, they’ll move on to the next one without a doubt.
Search engine visibility impacts: Google takes into account website speed when ranking sites (known as SEO, Search Engine Optimization). Therefore, if you want yours to appear higher in specific keyword search results, you’ll have a better chance for every millisecond faster your pages are visible to the eye.
Now that you understand what website speed is and why it’s important, it’s time to do something about yours. Below, you will learn how to improve your website’s performance to make your sure that your customers and Google are content.
Recommended tips to improve website speed optimization:
Don’t overload your homepage
Prioritize the above the fold content
Avoid having too much media on your website
Optimize your image sizes
Be conscious of your text-image relationship
Use text over other design elements whenever possible
Reduce the number and styles of fonts
Limit your use of animations
Focus on mobile performance
Limit the number of third party applications
01. Don’t overload your homepage
If you only take one thing away from this article, it’s this tip. In short: keep it clean and avoid overly long homepages.
Packing your homepage with too much content and media (text, images, videos, and animations) can have a negative impact on your success. It can take too long to load, and it may overwhelm your visitors to the point where they might miss the important content on your page, and leave without ever interacting with it.
An organized homepage with minimal content will allow your site visitors to easily absorb the presented information from the moment they enter your website - helping them understand your main message faster.
If you are worried about losing pertinent content, there’s also a fix for that. You can spread out your content across multiple pages. This will give all of your valuable information their own ‘space’ to shine. And don’t worry, content outside of your homepage can be easily accessible to viewers when you add buttons to help them navigate, like 'See More,' or 'Check Out My Blog/Gallery.'
02. Prioritize the above the fold content
‘Above the fold’ refers to the section of your website’s homepage that’s visible to visitors immediately when the page loads, and before they scroll down. It’s the most important section of your site as it’s the first thing anyone will see when they enter, and it’s the first section that loads.
Use this section strategically, by drawing in your visitors’ eyes while the rest of your site’s content loads. You can do so through meaningful text and relevant, attractive photos. The most basic guidelines are to include your header and subheader text (like company name and slogan), your logo, and a CTA (call to action) button.
Essentially, cover the main information your visitors needs to know, while keeping the page clean and straightforward. Likewise, a good rule of thumb to follow for this section: If it aligns with your main message, keep it. If it draws your visitors attention away from that, place it below the fold or on a different page of your site.
Yet, there is one exception to that rule. You should make sure that your above the fold content is made up of limited animations. As animations slow down the visibility they are applied to (more on this below) this will allow users to see more of your content from the get-go. Instead of animations, use text, images, or logos for visual effects.
03. Avoid having too much media on your website
Aside from just your homepage, you should do some much needed spring cleaning of your site’s content altogether. Here again, focus your efforts on reaching quality over quantity.
Just like a brick and mortar shop owner wouldn't put all of their inventory in their store windows, you shouldn’t overcrowd your website. In fact, your website is your storefront, and every item that you place on it has a performance cost.
More specifically, some forms of media are highly detrimental to your site’s performance, as their heavy bandwidth and slow loading times affect the performance of everything else.
Photo galleries with endless scrolling are one of these “slow loaders.’ Each photo - no matter how small of a file size it is - will impact your page speed. And in a photo gallery, all of those photos aren’t visible at once anyways. To make the adjustments that will improve your page speed, reduce the number of images in a photo gallery to only your most valuable ones - especially if it’s on your homepage.
Embedded content is another issue. One apparent example of this is embedded videos from YouTube or Facebook. Because it’s an external source, your website host (for example Wix.com) won’t be able to optimize it and control the loading time. Therefore, if it loads slow, no one can fix the problem except you.
Yet, this doesn’t necessarily mean that you should avoid embedded content altogether. A good compromise is to reduce it, like only placing one or a few videos on your site. Another alternative specific to embedded videos is to use background videos or add a video box instead. Since your website host has control over these elements, they will have a less detrimental impact on your website speed optimization.
In summary, when it comes to website media, ask yourself: Is it worth it? Does it benefit my conversion goals? If you answered no to these questions, simply take it out.
04. Optimize your image sizes
The simplest tip here is to use JPEG files for images instead of PNG files whenever possible. (If you aren’t sure what we’re talking about, check out this guide to file sizes.)
This is because JPEG files are generally more web-optimized than PNGs, which means that they are smaller and download faster, while retaining almost the same level of quality. And unless you need transparent images, or you’re a professional photographer, JPEGs provide sufficient quality and usability. To convert your images, there are many free tools available online to do so, like TinyJPG, Compressor.io, and ImageOptimizer.
Sites that are hosted on Wix.com automatically get an extra benefit of having their images converted to the WebP image format. WebP is a relatively new image format, introduced by Google, that provides better compression, and thus better performance for both JPEG and PNG files. Wix uses WebP with all browsers that support this new and improved format. On top of this, for any images that you crop in the editor, Wix will automatically optimize the size for your web pages.
It’s important to note that while our platform will do its utmost to provide the best performance, there is one thing that we don’t do: We never degrade image quality. The look of your images that you present to us is your prerogative, and we do not interfere with that.
There is one more special for you: ‘lazy loading images.’ Initially after you load a Wix site, the images might appear to have low-resolution. This is just a placeholder while the high-resolution images load. It’s a technique we use to improve both your site’s speed and perceived performance, by preventing your visitors from ever seeing a blank page.
05. Be conscious of your text-image relationship
Text and images are like having two pet dogs: Sometimes they are best friends, and other times they aggressively fight with each other. Therefore, you need to lay out separate territories for each of these elements, in order to give them the necessary breathing space and let them work together in harmony.
One example of this is to create contrast. It’s best explained through a scenario: A white background color, colored image, and white text. Since text loads faster than images, your white text on a white background will seem invisible to browsers until the image is loaded. Avoid this by taking colors into account when choosing your design elements.
The other golden rule to go by here: Avoid placing text in images. The only reasonable exception to this is logos. This is because text in images loads slow, so you’ll lose information and also leave your visitors with a blank canvas until your site is completely visible. On top of loading issues, text in images doesn’t aid in website accessibility. Instead of this, the simple fix is to just place your text in a text box on top of your images, allowing everyone to be happy.
06. Use text over other design elements whenever possible
As mentioned above, text loads faster than images and animations. But this isn’t the only reason why you should focus your design attention on pretty words. A fast-loading text header draws attention to your site’s main message immediately, and therefore, enhances your visitors’ overall experience.
The other key reason is SEO (search engine optimization), or the efforts taken to ensure that your website ranks higher on specific keywords in search results. Without getting too technical, there is one thing you should note: Detailed and quality text will help Google (and other search engines) better understand what your website is about - thus directly improving your chances to rank higher. Media only has an indirect SEO impact, by improving your visitors' overall experience, or having them stay longer on your page. Therefore, if you want to choose the most optimal form of content to bring more visitors to your site, text is the way to go.
07. Reduce the number and styles of fonts
You may consider reducing the number of font families on your site to just two or three. This will help you paint a consistent style for your brand, as well as give off an aura of cleanliness and professionalism. After all, first impressions of your site and business are lasting moments you can’t get back. Yet, as you expected, we’re not suggesting this based off what our designer friends have to say, it’s also another way to shrink your site’s loading time.
It’s not just a numbers game though: The type matters too. If you want to use custom fonts, for example, note that these are graphic elements (like images and videos), which means that they will require downloading before appearing on your web pages - which may affect the performance of your web pages.
Lastly, avoid too many font weights (bold, underline, italics, etc.). These also require additional downloads, and as you guessed, more time added to your site’s loading speed.
Bottom line: Don’t give up on custom fonts or font weights altogether. Rather, choose wisely when you put these features on your site and only use them when you want to fulfill a clear, distinct purpose - that’s all.
08. Limit your use of animations
Have you ever heard the saying about food consumption: ‘Everything in moderation?’ Well, from your website’s perspective, it’s specifically referring to your use of animation. Similar to desserts, they have addictive properties and always leave you wanting more - yet they are heavy files which load ridiculously slowly.
We know we can’t stop you from using animations altogether though, because they are quite attractive files. However, you can be selective about which ones you use. Specifically, avoid animated GIFs. These monstrous files are the heaviest of them all, even when they are teeny tiny. And when animated GIFs are large, they won’t only load slow themselves, but they will delay everything else on your website.
Another best practice when it comes to animation: Move them lower on your pages, below the first fold. This way, you prevent your visitors from having an overwhelming experience when landing on your site, and ensure that there is something meaningful to read right away that loads at a reasonable pace.
Finally, you can use online tools like GIF to MP4 to convert your site’s animations into videos. Videos give the same visual experience as animations, especially GIFs, but load much faster. Additionally, video playback happens immediately after the first buffer. GIFs, on the contrary, must be fully downloaded before playback - affecting the perceived performance of your site.
09. Focus on mobile performance
More and more people are surfing the Web from their smartphones each day, and you can bet that they will expect your site to look pretty on their palm-sized screens. Wix automatically creates a mobile-optimized version of your site, so you don’t have to worry about building one from scratch. However, just having a mobile site is only the first step. As your site is much smaller on mobile devices than desktops, you need to make the best use of that space. For example, your above the fold section will hold much less information on your mobile version. Therefore, choose wisely what you place there. The basics include: your company name, logo, and a CTA.
Additionally, make sure you eliminate or even hide all elements that affect your performance. This can come in any form, from multiple font styles and formats to images, animations, videos, special effects, and more.
To make the most of this tiny screen space, you can replace those slow loading elements with other features, like a Welcome Screen that flashes your logo or a photo while your site loads, or a Quick Action Bar to make all of your contact information just one easy click away.
10. Limit the number of third party applications
Third party applications (TPAs) are features which you can add to your pages that aren’t created by your website host. For example, an Instagram Feed, rating widget, or map to display your location - many of which are available, for free, through the Wix App Market.
TPAs use something called iFrames, which are essentially Web browsers inside of your site. In layman's terms, when you use a TPA, you are trying to load a website inside of your website - what’s more, one that’s out of the optimization limits of your website host. In conclusion: TPAs can add significant time to your websites loading speed.
However, it is evident that TPAs provide a lot of functionality. You just need to be smart about how you use them. You should always ask yourself if these apps are really necessary to achieve your website’s goals. There are other tests you can do to make your decision. First, disable each app, one-by-one, and see if you notice a difference in your site’s speed. Second, try to identify any overlaps in different TPAs functions. For example, do you need a photo gallery and an Instagram Feed? Both of these displays your photos, while a gallery is something provided to you by your website host, meaning it will load much faster.
How to monitor speed overtime
After you’ve made all the necessary changes to make your site speedy fast, you’ll want to measure your results. If you have a Wix site, you can check the performance yourself with this Wix site speed test.
For non-Wix users, there are numerous other website performance tests to try. Some examples of the most popular include PageSpeed Insights by Google and Pingdom Tools. Both of these let you know your page speed and other important insights, like the reasoning behind it’s slow-loading or ways to improve it.
Key takeaways
Understand perceived performance: This is how fast your site visitors perceive your website to perform based on what loads first on their screens. For example, if the content on your homepage below the fold loads before content above the fold, visitors will see a blank screen when they enter your website. This is why content placement and type are both critical elements.
Every item that you put on your website has a performance cost: When you want to add an element - whether it’s text (length, style, or type), video, image, animation, or application - ask yourself: Is it worth it? Does it align with my most important goals? Does it benefit my conversion rate? If you answer ‘no’ to even just one of these, you might want to consider taking it out or, at least, not placing it above the fold of your page.
Don’t overload your homepage: This is usually the first page that your visitors will see on your website, which means that it’s the first page to load. As a best practice in web design, you should keep it clean. The less items you have and the less heavy files you use, the faster your page will load and the higher the likelihood visitors will stick around.
Ready to take your business online?
Create a stunning website with INTELLIGENT today!
*Source https://www.wix.com/blog/