Overview
Guardian NG, an online news publication in Nigeria, takes center stage in our overview. In this evaluation, we will thoroughly examine various aspects of Guardian NG, including its performance and the overall user experience it offers. Our objective is to assess the current performance of the website and then point out potential opportunities and areas for improvement.
Tools Used
For this evaluation, we utilized a variety of tools such as Calibre, Lighthouse, WebPageTest, Google PageSpeed Insights, and Chrome DevTools.
Methodology
To conduct a thorough assessment of Guardian NG, we employed a combination of automated and manual testing methods. Our evaluation encompassed synthetic testing, which allowed us to examine the platform's performance across various devices and network conditions. Chrome DevTools played a crucial role in providing us with metrics that closely resemble real user experiences.
Time Period
Our analysis of Guardian NG was conducted within a defined timeframe, enabling us to provide an overview of the platform's performance and user experience during that particular period.
Opportunities and Possible Solutions
The performance analysis of the webpage reveals some areas for improvement in order to optimize its load speed and enhance the user experience.
According to PageSpeed Insights's synthetic measurements On Mobile, the LCP was recorded at a significant duration of 10.7 seconds and 4.2seconds on Desktop, indicating a potential issue in terms of resource loading.
A noteworthy factor contributing to this delay is the presence of unused JavaScript files.
Notably, the Largest Contentful Paint (LCP) element was lazyloaded, leading to unnecessary delays in loading the critical image resource. It is essential to avoid lazy loading the LCP image as it negatively impacts the LCP metric. The recommended solution is to preload the LCP image and utilize the fetch priority "high" for faster loading. It is advisable to reduce or eliminate unused JavaScript to minimize the processing time and enhance page rendering.
Additionally, the rendering of the entire page is hindered due to the inclusion of stylesheets or synchronous scripts in the head section that are still being loaded. This delay can be resolved by prioritizing the loading of essential resources and ensuring that the LCP element is added to the DOM promptly.
Futhermore, There javascripts which are loaded with a very high priority which means that it'll be rendered first. When pages load large JavaScript files, they need to be parsed and executed on the browser's main thread. This means that, even if your image resource is fully downloaded, it may still have to wait until an unrelated script finishes executing before it can render.
Moreover, there is a GIF image present on the webpage. [https://guardian.ng/wp-content/uploads/2023/11/VISIBILITY-AD-WIDGET-2-gif.gif] To optimize network usage, it is recommended to upload the GIF to a service that converts it into an HTML5 video format. Additionally, considering the usage of more efficient image formats such as MPEG4/WebM for animations and PNG/WebP for static images instead of GIF can significantly reduce network bytes and improve loading speed. Use transform and opacity changes for animations
To optimize the loading of third-party scripts, it is advisable to use the async or defer attributes on script tags.
To mitigate this issue, consider minimizing the number of WordPress plugins and disabling unnecessary ones, as they often load unused JavaScript. Identifying the responsible plugins can be done by utilizing code coverage in Chrome DevTools.
Use async if it's important to have the script run earlier in the loading process.
Use defer for less critical resources. A video player that's below-the-fold.
By doing so, the browser can continue parsing the HTML while loading the scripts in the background, thereby eliminating the delay in DOM construction and page rendering. The choice between async and defer depends on the priority and order of script execution. The async attribute allows scripts to execute as soon as they finish downloading, potentially leading to non-sequential execution. On the other hand, the defer attribute ensures sequential execution after the completion of HTML parsing but before the DOMContentLoaded event.
Incorporating link rel="preconnect" and link rel="dns-prefetch" tags can improve the loading speed of ads on the webpage. These tags prompt the browser to establish connections with ad-related domains in advance, eliminating delays when loading advertisements from platforms like Google Analytics and Facebook Ads. This optimization significantly enhances the overall website speed and user experience.
Lastly, it is recommended to add explicit size attributes (width and height) to the img tag in order to optimize the layout and avoid layout shifts. Setting the image dimensions explicitly ensures that the space required for the image is reserved, preventing content reflow and reducing the Cumulative Layout Shift (CLS) metric. Alternatively, reserve the required space with CSS aspect-ratio or similar. This approach ensures that the browser can allocate the correct amount of space in the document while the image is loading. There are render-blocking resources, such as CSS and JavaScript, that delay the rendering of fonts. Optimize and defer these resources to allow for faster font loading and reduce the likelihood of CLS.