AI intelligent summary
GPT
The article discusses optimizing core web performance indicators for a Next.js-based personal blog using Cloudflare. It covers the importance of optimization, problem analysis, and solutions like lazy loading CSS, removing unused resources, and addressing common Cloudflare optimization pitfalls. The final results of these optimizations are also presented.
This article focuses on optimizing core web vitals and details the practical optimization experience of a personal blog website built with Next.js and served via Cloudflare. It explains the optimization process and methods in detail, including performance test, problem analysis, solution, and the evaluation of the optimization effect. For example, improve image loading priority, eliminate unessential resources, and use the Next.js
Image component to enhance the webpage’s core metrics.Introduction
This article uses this blog site, which is built with Next.js and delivered through Cloudflare CDN, as a case study to document its optimization process. For more in-depth and authoritative guidelines, please consult the following link
The specific solutions provided may be subject to limitations due to the underlying framework, website architecture, or my technical level. Your understanding is appreciated, and feel free to point out any inaccuracies.
The significance of optimization varies
There is a complete difference between reducing 10ms and 1000ms of page loading time with the same amount of work. Over-optimization will reduce the efficiency of development.
Whether to follow the guidelines
Not following some guidelines has little to no negative effect, but some can even result in noticeable delay.
Any optimization methods should ultimately be guided by experiments and actual statistical data.
Problem Analysis
Using
PageSpeed Insights to conduct performance tests and analyze problems in combination with server statistics
Despite being a mostly static website, its initial performance is surprisingly poor and falls below the acceptable standard.
- Largest Contentful Paint (LCP) : Measures loading performance. To ensure a good user experience, aim to have LCP occur within the first 2.5 seconds of the page loading.
- Interaction to Next Paint (INP) : Measures responsiveness. For a better user experience, aim to keep INP below 200ms .
- Cumulative Layout Shift : Measures visual stability. For a better user experience, aim to keep the CLS score below 0.1 .
For this site, which has little interactivity, the focus is on is LCP and CLS; INP is less of a concern.
The simplest approach: turn off all non-essential features unless they have a small footprint
LCP Image Optimization
According to the LCP audit at the top of the report, the LCP element is an image. The most time-consuming phase is the load delay, as it is loaded with a delay. The main cause is that it is assigned a default or low priority. To improve this, we simply need to load it with high priority.
The simplest method is to use Next.js’s built-in Image component, which also optimizes images simultaneously.
Setting the
Priority attribute of the Image component to True enables HTML-level preloading, which effectively reduces discovery and queueing delay.Follow the link below for more details:
Problems still exist after optimization
But the web vitals still fall short of expectations. Where are the problems? According to the audits from WebPageTest , it was found that the main problem is the Font Awesome CSS for website icons.
- The CSS resource is large and blocks the main thread, leading to a slower load speed.
- Additionally, it triggers many consequent requests for large font resources, competing for network bandwidth and delaying the loading of other critical resources.
Optimizing Font Awesome
Font Awesome is used to load icons, but the cost of displaying small icons in advance is not cost-efficient. Above all, I would rather accept a bit more CLS to improve other vitals. This is all about trade-offs.
Solution: lazy load CSS
Leverage useInsertionEffect – React Hook to load
// load font-awesome useInsertionEffect(() => { const link = document.createElement('link') link.rel = 'stylesheet' link.href = BLOG.FONT_AWESOME link.id = 'font-awesome' document.head.appendChild(link) // cleanup function return () => { const linkElm = document.getElementById('font-awesome') if (linkElm) { linkElm.remove() } } })
For more related resources, please refer to:
Remove non-first screen and unused resources
Analysis reveals that a large number of useless resources have been loaded, occupying unnecessary network bandwidth
Use the coverage tool for specific positioning
CSS Section
Using coverage detection, it was found that most CSS cannot be optimized and does not take up much space. However, the following methods can still be considered for optimization
JavaScript Section
According to bundle-analyzer results, a significant number of components are large or dynamically imported, which suggests lazy or on-demand loading.
Common optimization pitfalls of Cloudflare
TTFB Section
Using SaaS origin pull and other forms of Cloudflare CDN optimization may cause TTFB to increase instead of decrease.
A normal architecture diagram will include one more DNS step, i.e., CNAME DNS. If the optimized domain itself also has a CNAME or other operations, it will further increase the DNS network cost. See more specific risks at:
Please use Cloudflare CDN optimization methods with caution. If you want to use them, it's best to test first to ensure they truly improve performance.
Cloudflare’s Additional Features
- Rocket Loader is not necessarily an optimization (any optimization should be finally judged based on experiments and actual statistics)
- Zaraz is generally an optimization, but it might affect functionality
Final Optimization Result
A normal architecture diagram will include one more DNS step, i.e., CNAME DNS. If the optimized domain name itself also performs a CNAME or other operations, it will add new DNS network costs. See more potential risks here:
Of course, web performance is not fixed. It can change with any tiny factor, such as audience device performance, network conditions, site architecture, and site functions.
So it must be continuously monitored, using tools like Cloudflare Web Analytics or Chrome Core Web Vitals .
Not at the moment
Main Reference Not available
acceptable become a member Telegram's Little Warehouse of Seven Rows | Internet Memories | Blogs cap Seven lines Technical Exchange Group Find more tips oh 🥰 and also discuss various issues in the chat group ❓
Welcome to the Bottom comment section. Share your thoughts and experiences with Let's discuss and improve together!
- Author:Qi Xing
- URL:https://blog.qixing1217.top/article/nextjs-cloudflare-web-core-metrics-optimization-guide
- Copyright:All articles in this blog, except for special statements, adopt BY-NC-SA agreement. Please indicate the source!
