Reduce complaints and actively think of solutions to problems. Problems and their solutions always exist together. This week I started reading "Design Books for Everyone" in the hope of improving my product aesthetics.
Performance Optimization#
Image Format Optimization#
Optimize LCP. By converting images to Base64 format, parsing, connection, and download time for images can be saved. Of course, increasing the number of bytes in the Base64 string will increase the size of the HTML, resulting in more data being transferred over the network, which may worsen the TTFB metric. Both factors need to be balanced.
Issues with web-vitals reporting#
web-vitals is a set of web performance metrics defined by Chrome, such as FCP, LCP, CLS, TTFB, etc., which objectively evaluate the user experience of web pages based on data and provide better SEO weight.
Among them, LCP is the most critical metric, which stands for Largest Contentful Paint. As the name suggests, it refers to the time it takes for the largest element in the web page to be painted on the screen. The official requirement is that it should be within 2.5 seconds for the 75th percentile to be considered excellent:
Its principle is to use standard Web APIs to calculate and provide corresponding libraries to report various performance data web-vitals. The example code is as follows:
import {onCLS, onINP, onLCP} from 'web-vitals';
function sendToAnalytics(metric) {
const body = JSON.stringify(metric);
// Use `navigator.sendBeacon()` if available, falling back to `fetch()`.
(navigator.sendBeacon && navigator.sendBeacon('/analytics', body)) ||
fetch('/analytics', {body, method: 'POST', keepalive: true});
}
onCLS(sendToAnalytics);
onINP(sendToAnalytics);
onLCP(sendToAnalytics);
You can also install the Web Vitals plugin to easily check the performance of the currently browsing webpage.
You can enable configuration to print and display in the console:
By the way, why is the TTFB of Bilibili so poor (doge)?
The console information is very detailed. But I found a problem. When opening multiple tabs, even though the new page has been loaded and pre-rendered, when switching to the new page, the content appears instantly, but the FCP and LCP calculated by web-vitals have a significant deviation from the actual situation. The screen recording of the reproduction is as follows:
As long as a new page is opened and switched back after a while, the problem can be reproduced. I plan to raise an issue with Chrome or web-vitals to fix it. I provide a solution: obtain the actual first entry time of the user into the page as the starting point of the timer and calculate the LCP. The code is as follows:
if (typeof document.hidden !== 'undefined') {
// When the current page is refreshed, it is the starting point of the timer
if (!document.hidden) {
window.firstInViewTime = 0;
console.log(
`Page is visiable in ${window.firstInViewTime} ms, right now.`
);
} else {
// Page is loaded in the background
document.addEventListener(
'visibilitychange',
() => {
// Switch to the page when switching tabs
if (document.visibilityState === 'visible') {
window.firstInViewTime =
new Date() - window.performance.timing.navigationStart;
console.log(
`Page is visiable in ${window.firstInViewTime} ms, delayed.`
);
}
},
// Only trigger once, not repeatedly
{
once: true,
}
);
}
} else {
console.warn('Page visibility API is not supported in the browser.');
}
This temporary code is hosted on StackBlitz. So, can we subtract the value of LCP in the onLCP callback from this value to obtain the correct LCP reporting value? 🤔
Gains from Slacking Off#
Content-Driven Web Development Framework#
Astro framework has a concept called "Island architecture". Unlike SPA applications, where SPA relies on the execution of all bundled JavaScript to create complete page content, JavaScript is a blocking resource that slows down web performance. Astro views a page as a sea, and all page modules/components float on it. Among them, interactive modules/components are called "Islands". Islands are isolated from each other but can communicate with each other. Therefore, Astro supports multiple framework modules/components to exist on the same page simultaneously.
- On-demand loading. Based on partial & selective hydration technology, "Islands" are optimized for performance. Most static modules in web pages exist in the form of fast static HTML, and only the necessary modules with interactions are loaded on-demand with JavaScript.
- Parallel loading. In the example below, the heavier low-priority Carousel island does not block the high-priority Header island. Both islands are loaded independently in parallel. The Header island will respond to user interactions faster.
- Support for directives. Declare the loading strategy for each module/component explicitly. See Template Directives Reference for more details.
An Open Source Icon Library#
lucide provides a quick solution for developers/designers to import icons. It has packages for different frontend frameworks.
The code also considers performance optimization and supports tree-shaking.
An Open Source Component Collection#
shadcn/ui provides a collection of well-designed components that can be easily imported into projects through CV or CLI. It is highly customizable and allows developers to create their own component library. Compared to npm package-based component libraries, it only provides basic implementations, and developers can modify the specific interactions and styles themselves.
Interesting Things#
Comparing Knowledge Acquisition through Different Channels#
This week, I subscribed to Ruan Yifeng's Network Log, which mentioned a method for quickly learning and acquiring knowledge, as shown in the above figure. Theory + practice can gain some knowledge, and more knowledge will be learned from the problems encountered in practice. This reminds me of error notebooks and bugs. Errors indicate deviations from cognition and theory, and correcting errors deepens the understanding of theory.
Free and Login-Free Photography Works#
pexels is a website that provides free and watermark-free downloading of videos/photos of photography works. It provides hot searches, rankings, photography contests, blogs, and photography stories.
Design Tool Collection#
freepik offers many online design tools, image processing tools, and icon downloads. However, the free version only allows downloading in PNG format.
Submarine Cable Map#
From the website Submarine Cable Map, you can see the deployment of submarine cables worldwide. The continents around the world are like circuit board chips, and the submarine cables are like wires, with cities at both ends like pins.
Viewing GitHub Repository Stars Trend#
star-history is an online website for viewing the stars trend of GitHub repositories. It supports embedding in Markdown.
After installing the Chrome extension, you can open any repository and click on the plugin to see the stars trend.
React Digest#
A carefully curated weekly newsletter for React developers.
React Digest is a weekly newsletter curated for React developers.
I read an article called Understanding SSR with Hydration: Pros, Cons, and Scenarios for Software Architects in it, which specifically talks about Hydration related to SSR. It's quite good and worth reading a few articles when you have time. It helps deepen the understanding of React.