It is now almost 2022 and you've probably realized that the quality of your website has a significant impact on your business. Most businesses realize they need a new website, but do not realize how detrimental this can be.
In this blog post, we'll go over more than 20 quick facts that will help you not only realize this problem, but give you the opportunity to fix them on your website (or you can just use our Las Vegas Web design services for a completely optimized, and customer-focused website).
Throughout the course of this blog we reference terminology that you may not understand. Make sure you read out post that covers all this terminology
Read Our SEO Metrics PostWe've all heard the saying don't judge a book by its cover, and it's a great rule to live by, but current customers are ruthless when it comes to first impressions.
Current consumers make up their mind about a website in less than 50 milliseconds - that's less than .05 seconds! The reason being is there are so many websites in the world today (actually more than 1.7 billion). Chances are, there are other businesses that offer a similar service to yours with a website that leaves a positive first impression on the viewer.
Keep on reading to see why these viewers have a bad first impression of your website.
Let's say you escaped the .05 seconds of harsh judgment and the viewer starts to browse your website. 38% of those viewers will actually leave your website if they feel something is difficult to navigate, the layout is not properly curated, or a myriad of other issues listed below:
Everything we have read so far shows us how bad UI/UX can be for your bottom line. Now let's say you manage you keep customers on your website despite a bad first impression and with a bad layout, they find what they need and make a purchase - 88% will not ever return to your website again after that. Even if you do manage to sell an item, you are missing out on a repeat customer.
Quick Tip: Make sure you follow the the basics in User Experience - Visual Hierarchy, Contrast, White Space, Accessbility and Alignment
Read Our UI/UX TipsNow let's say you have a well-laid-out design that adheres to good UI/UX principles, but you still cannot convert visitors to customers, we'll lay out some of the common issues that also take away from potential conversion rates.
According to a study, 39% of people will stop engaging (i.e. leave a website) if the images won't load or take too long to load. Think about it, would you go to a store that has broken windows in the front, or if their cashier is nowhere to be found when you want to checkout? Probably not, the same way someone will not shop on a website if the images are slow loading or don't load at all. It shows a lack of attention and detail.
Quick Tip: Learn how to make your website much faster and pass Google's Core Web Vitals test to increase your search engine ranking
The Ultimate Guide To Understanding Google's Core Web Vitals47% of users expect a website to load in less than 2 seconds. Here is a photo from Pingdom
As you can see as the load time increased the bounce rate significantly increased as well. If we look at 4 seconds, 24% of people left the website without any interaction.
70% of websites lack a clear call to action on their home page! That means after someone has (briefly) vetted their website and has approved them as their choice, they have no clear way of getting in touch!
In June 2021, Google released a new update to their search engine algorithm that brings in new ranking factors to determine how websites are "graded & scored" and consequently ranked on their search engine. As a result, poorly optimized or built websites are now moving down on relevant SERPS (Search Engine Results Page). Lowering your position on search engines can be very concerning for small businesses that rely on their website to bring in new customers.
This new update's most prominent ranking signals are mobile responsiveness, Largest Contentful Paint, and Cumulative Layout Shift. Each one is independently important, and combined help Google determine what makes a good website. We will discuss each one in-depth and show you how you can fix each of them. By the end of this post, you will completely understand Google's Core Web Vitals, and we will show you how to improve each of the most significant problems quickly and efficiently.
Largest Contentful Paint (LCP) is defined by Google as The Largest Contentful Paint (LCP) metric reports the render time of the largest image or text block visible within the viewport relative to when the page first started loading. Simply put, it means how long it takes to load the largest picture or element on your website. Elements that are included are:
<img> elements<image> elements inside an <svg> element<video> elements (the poster image is used)url() function (as opposed to a CSS gradient)Most of this is beyond the scope of this posting, but it is essential to understand how it works.
Quick Fact: 39% of people will stop engaging with a website if images won’t load or take too long to load
Read More Quick FactsGoogle suggests that your LCP loads in 2.5 seconds or less for it to be considered good.
First Input Delay (FID) measures the time it takes from when the website starts loading until a user can interact with it (click on a link or add something to the cart). First Input Delay is an important metric because it helps identify two key issues: how long a user waits until they can find what they need and how clean and optimized the code is.
We have all been there before; we visit a website - try to click on a link or scroll down, and the website freezes or is unresponsive. That is FID, the latency between the website and the user being able to interact with it. It is caused by the browser trying to run the website's code while the website looks like it is fully loaded.
Have you ever been reading an article on a website (Looking at you News Companies) and as you try to scroll down, a popup occurs, and BOOM - you accidentally click on the button and get redirected only for you to have to wait for the page to load then go back to the previous article and find your place? That's Cumulative Layout Shift. This video from Web.dev perfectly summarizes what CLS is
Many different reasons cause cumulative Layout Shift (CLS); a few of the main culprits are:
CLS is measured by the number of elements that change throughout the entire lifespan of the page.
When it comes to fixing these issues, many of them are intertwined with similar solutions for both. Once you understand Google's Core Web Vitals, implementing the required changes will be much simpler, and your score will drastically increase to help your Google Ranking.
To fix the Largest Contentful Paint, you need to decrease your loading times; they are usually caused by large files (images and videos), 3rd party scripts or embeds, and slow servers.
To fix your large file sizes, you need to upload smaller images. Gone are the days when you could upload a 5000 x 5000 image. The maximum sized image you should ever use on a website is 2048 x 2048. Anything bigger than this is a waste of bandwidth and loading times. You also need to optimize your images through an image optimizer - Squoosh is an excellent application for this. However, it is very cumbersome to do each image one at a time.
For Sigma+, we automatically resize all images you upload to your website (yes, you can still upload your 5000 x 5000 photos!). Next, we pass them through an Award Winning Image Optimizer, all without any effort from your end. After that, you upload them as expected, and we do everything behind the scenes. Additionally, we automatically convert all JPGs and non-transparent PNGs to WebP to reduce the file size by another 20% - 30%.
Then we dynamically size images based on the type of device your visitors are using and let the browser decide which size is the best by using the Srcset HTML Property.
As an additional speed boost, we lazy load all images and videos on the website so that they only load once the viewer scrolls to that position on the website.
Another severely underused Image format is Scalable Vector Graphics (SVG). It is not an image but rather a block of code that tells the browser to create this image. SVG's are significantly smaller in size and reduce loading times. They are great for logos or other small graphics. However, the file size will quickly become larger than a typical image if it is very complex.
As you can see in the comparison of our two logos above, the SVG clearly wins. The PNG version is 13.4kb, which is 4.6x larger than the SVG. Additionally, the SVG is a vector graphic, so the image will never become pixelated. Try it out! Zoom in on your computer or phone, and you will see that the PNG will become pixelated while the SVG remains pixel-perfect.
While most website hosting plans you find at the big companies are cheap, they are also very slow and shared with dozens if not hundreds of other websites. This is called shared hosting, and avoid it as much as possible! Should you still want to host with a cheap server, then there are a few solutions. You should apply all the solutions listed to all websites regardless of the server.
Quick Fact: 47% of Users expect a maximum of 2 seconds loading time for an average website
Read More Quick FactsWhen you purchase any plan from Sigma+, we put your website on its own server to ensure that no one else can slow it down!
When optimizing your website, you need to add/enable caching on both the browser and server to ensure that the end viewer receives an already loaded version of your website instead of their computer or phone having to download all of it.
Next, once you have added/enabled caching, you need to minify your CSS and Javascript to reduce the time it takes to load. Also, if you have the ability, selectively load which assets are loaded on each page of yours to ensure that unused code is not being processed for a page that is not using it.
When we initially created our business & Sigma+, we had speed optimization in mind. Therefore, each page of your website selectively loads only the needed files, increasing your loading speeds drastically.
Reducing First Input Delay is a bit trickier than optimizing your images. To fix FIP, you will need to reduce your dependence on 3rd party code libraries (yes, we all love chat widgets and nice animations). In our case, we decided that we did want a chat widget on our website, so we reduced our dependency on other libraries to ensure that we would keep the chat widget.
One example of this that we see from many of our customer's previous websites is that they have a plugin for this and a plugin for that. One recent case study we evaluated was a new customer of ours who had a slow website, so we took a look. We found that he was using multiple WordPress Plugins to create his image sliders and carousels. In this case, he unknowingly loaded in two different image slider codebases when he only needed one.
Some of our customer's websites use sliders for the images and galleries. However, we use them sparingly and with great attention to detail to keep our Core Web Vitals in line.
One of the most essential Core Web Vital to improving a good UI/UX Experience for the customer is CLS. Fixing Cumulative Layout Shift is much easier than the other two ranking signals.
Adding image height & width attributes to all images throughout your website conveys to your website browser that it needs to keep that space free for when the picture will load. If you do not add these attributes when the image loads, the browser will have to retroactively make space for the image after the website's layout has loaded.
When creating animations with Javascript or CSS, use the transform property instead of paddings or margins to prevent the elements from shifting other elements.
Lastly, please do not load more unexpected content after it appears that the website has already fully loaded!
We hope that after reading this article you have a better understanding of Google's Core Web Vitals and how they can affect your business and how you can easily fix these issues to continue growing your search engine ranking.
We tested our website to showcase how well we understand Google's Core Web Vitals and how we have implemented them for our software. You can see the results below (yep, that's 100%)!
