Overview
Zenith Bank, a prominent financial institution in Nigeria, serves as the focal point of our review. We will delve into the bank's performance, services, and overall customer experience. Our mission is to uncover strengths and areas for improvement, providing actionable insights to enhance efficiency and customer satisfaction. Come with us as we explore Zenith Bank's offerings and discover the potential for a better banking experience.
Tools Used
To conduct this evaluation, we harnessed a range of tools, including Calibre, Lighthouse, WebPageTest, Google PageSpeed Insights, and Chrome DevTools.
Methodology
Our evaluation method encompassed a blend of automated and manual testing, ensuring a comprehensive assessment of the bank's performance and user-friendliness. In this audit, we primarily utilized synthetic testing to gauge performance across diverse devices and network conditions. Our closest approximation to real user metrics was achieved through the use of Chrome DevTools.
Time Period
This review was conducted over a specified time period, allowing us to present a snapshot of Zenith Bank's performance and customer experience during that timeframe.
Discoveries and Possible Solutions [Mobile & Desktop]
The Zenith Bank website is discovered to have failed the Core Web Vitals test. You might wonder, "Why is this Core Web Vitals test so crucial?" Well, the answer lies in the significance of user experience. When a website lags or takes its time to load, users tend to get really frustrated. And in the realm of finance, where people are dealing with their hard-earned money, every second counts. So, ensuring a fast and smooth website experience is not just important – it's a financial necessity!
According to PageSpeed Insights the First Contentful Paint (FCP), which is usually the first sight of content one sees to signify that the page is indeed loading, starts at 4.9 seconds. Note for First Contentful Paint to be considered good, it should be less than 1.8 seconds. The Largest Contentful Paint (LCP) which usually is the largest asset on the page is recorded at 8.3 seconds with less than 14% of the actual Chrome users experience LCP load times of less than 2.5 seconds. This generally means the user will have to wait for a little over 8 seconds for the page to have loaded the important contents in the viewport.
During a recent debugging session on zenithbank.com, a critical issue came to light. The Largest Contentful Paint (LCP) was observed to be at a concerning 7.6 seconds, while the First Contentful Paint (FCP) commenced at 3.3 seconds. Additionally, the Cumulative Layout Shift (CLS) was noted at 0.15.
It's important to highlight that a crucial aspect of web performance, LCP, represents the time taken for the largest image or content element within the viewport to render on the web page. In this case, it took a substantial 7.6 seconds from the initiation of page loading.
To meet the Core Web Vitals criteria, the LCP metric should ideally be under 2.5 seconds, making the current performance far from optimal. This extended loading time means that users are required to wait for over 7 seconds before the browser displays the most important content on the page. This could potentially result in a less than ideal user experience and may necessitate improvements to meet user expectations and industry standards.
A significant time gap between First Contentful Paint (FCP) and Largest Contentful Paint (LCP) may signal that the LCP resource is not immediately accessible for the browser's prioritization. This could occur if elements like text or images are managed by JavaScript rather than being readily available in the initial HTML. It might also indicate that the browser is engaged in other tasks before displaying the LCP content.
It's worth noting that during the evaluation, it was observed that the specific LCP resource in question, the background-image: url("https://www.zenithbank.com/media/3189/homepage-girl.jpg?anchor=center&mode=crop&width=1600&rnd=132452431820000000"), was added to the CSS. This practice is generally discouraged because it can hinder the efficient rendering of the page. To enhance LCP performance, consider implementing link rel="preload" for this resource. You can also boost the priority of the LCP image by adding the fetchpriority="high" attribute to the image element, prompting LCP to occur more swiftly.
Additionally, a chunk of JavaScript was inserted into the head tag, leading to a delay. To address this, you can defer the execution of these scripts by utilizing the "async" and "defer" attributes. These attributes inform the browser that it can continue parsing the HTML while loading the script in the background and execute the script after it loads. This approach prevents script downloads from hindering DOM construction and page rendering, allowing users to see the page before all scripts have completed loading.
Addressing the identified issues with the Cumulative Layout Shift (CLS), research indicates that a crucial step involves specifying a defined width and height, Futhermore; employing aspect ratio syntax is strongly advised. This approach effectively communicates to the server that a specific area is reserved for the content to be painted, contributing to an improved web page loading experience.