Reduce complaints and actively think of solutions to problems. Problems and their solutions always coexist. I started reading "Design Books for Everyone" this week, hoping to improve my product aesthetics.
Performance Optimization#
Image Format Optimization#
Optimize LCP. By converting images to Base64 format, the parsing, connection, and download time of images can be saved. Of course, the increase in the number of bytes in the Base64 string will increase the size of the HTML, thereby increasing the amount of data transmitted over the network, which will deteriorate the TTFB indicator. Both 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 from a data perspective and give better SEO weight.
Among them, LCP is the most critical indicator, Largest Contentful Paint, as the name suggests, it refers to the time when the largest element in the web page is painted on the screen. The official requirement is that it should be within 2.5s when entering the 75th percentile to be considered excellent:
Its principle is to use standard Web APIs for calculation 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 current browsing page.
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 can be said to be 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 large 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, it can be reproduced. I plan to submit an issue to Chrome or web-vitals to fix it. I provide an idea, get 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 loading 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 the LCP value obtained in the onLCP callback minus this value be used as the correct LCP reporting value? 🤔
Fishing Harvest#
Content-Driven Web Development Framework#
Astro framework has a concept called "Island architecture". Unlike SPA applications, SPAs rely on the execution of all bundled JavaScript to create complete page content, and JavaScript is a blocking resource for parsing and rendering, which slows down web performance. Astro views the page as a sea, and all page modules/components float on it. Among them, interactive/exist interactive modules are called "Islands". Different islands are isolated from each other and can communicate with each other. Therefore, Astro supports multiple framework modules to exist on the same page at the same time.
- On-demand loading. "Islands" are based on partial & selective hydration technology, which is conducive to performance optimization. Most static modules in web pages exist in the form of fast static HTML, and only the modules that require interaction are loaded on-demand with JavaScript.
- Parallel loading. In the figure below, the heavier low-priority Carousel island will not block the high-priority Header island. Both are loaded independently in parallel. The Header will respond to user operations with interactivity faster.
- Support directives. Declare the loading strategy of each module explicitly, see Template Directives Reference for details.
An Open Source Icon Library#
lucide provides a quick way for developers/designers to import icons. Different frontend frameworks have corresponding packages support.
The code also considers performance optimization, compresses SVG, and supports tree-shaking capability.
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, highly customizable, and can create your own component library. Compared with npm package component libraries, it only provides basic implementations, and developers can modify the specific interactions and styles themselves.
Interesting Things#
Comparison of Knowledge Acquisition through Different Channels#
This week, I subscribed to Ruan Yifeng's Network Log, which mentioned a method of quickly learning and acquiring knowledge, as shown in the figure above. Theory + practice can gain some knowledge, and more knowledge will be learned from the problems encountered in practice. This reminds me of the error book and bugs. Errors indicate that there are deviations between cognition and theory, and correcting errors will deepen the understanding of theory.
Free and Login-Free Photography Works#
pexels is a website that provides free and watermark-free video/image photography works for downloading without logging in. It provides hot searches, rankings, photography contests, blogs, and photography stories.
Design Tool Collection#
freepik provides many online design tools, image processing tools, and icon downloads. However, the free version can only download in PNG format.
Submarine Cable Map#
From Submarine Cable Map, you can see the deployment of submarine cables worldwide. Various continents in the world are like circuit board chips, submarine cables are like leads, and the cities at both ends are like pins.
Viewing GitHub Repository Stars Trend#
star-history is an online website for viewing the stars trend of GitHub repositories, which supports embedding in Markdown.
It also provides a Chrome extension.
After installation, 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 carefully curated weekly newsletter 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, which helps deepen your understanding of React.