📷

Working at an IT company, web performance optimization is an issue that you encounter frequently and cannot avoid.

Do you know any performance optimization methods?
Please explain all the performance optimization methods you know.

If you search for “performance optimization” or “web performance optimization” on Google, you’ll find numerous theories and materials. The methods can vary depending on which aspects you focus on. Here are some methods that come to mind quickly:

• Load styles at the top and JavaScript at the bottom.
• Use Webpack.
• Minify JavaScript whitespace.
• Remove unnecessary divs when writing HTML.
• Optimize CSS:Write styles considering reflow and repaint.
  Remove unused CSS.
  
• Optimize images:Utilize lazy loading for <picture> and <img>.
  Use sprite images.
  
• Optimize core web metrics (LCP, FID, CLS).
• Use CSS for animations rather than JavaScript.
• Add expiration dates in headers.
• Implement SEO (Search Engine Optimization).
• Use CDN.
• Use Gzip.
• Reduce the number of files.
• Lower library dependencies.

Just listing these methods can be overwhelming. This post will briefly categorize performance optimization into “loading optimization” and “rendering optimization.”

📋 Performance Optimization Methods

Browsers load resources from the top down. After reading the HTML file, they interpret it line by line. When encountering CSS or JavaScript files, the rendering of the web page is temporarily blocked during the interpretation of these files. If users see a “lagging” screen during this process, they may leave the page or become frustrated. To avoid aggravating users, web performance optimization is essential.

From a markup developer’s perspective, performance optimization can be divided into two main categories: “rendering optimization” and “loading optimization.”

Performance Optimization = Rendering Optimization + Loading Optimization

By comprehensively optimizing the rendering and loading processes, you can improve the core web metrics (LCP, FID, CLS).

📌 Performance Measurement Tools

• Lighthouse
• PageSpeed Insights

📌 Rendering Optimization

Rendering-blocking resources refer to sources that prevent the browser from rendering, typically CSS and JavaScript files (not all CSS and JS are rendering-blocking).

The goal of web page rendering optimization is to minimize reflows while quickly rendering the screen.

📌 CSS Optimization

✔️ Write Styles Considering Reflow and Repaint

• The order of how browser styles are drawn. If CSS properties affecting layout (width, height, etc.) are changed, a “layout” redraw occurs, known as reflow.
• If properties that do not affect layout are changed, only the paint operation is redrawn, known as repaint.
• To maintain performance, it’s better to use properties that only cause repaint.

✔️ Remove Unused CSS

Since CSS is a rendering-blocking resource, removing unused CSS is beneficial. You can check for unused CSS using Google Chrome Lighthouse.

✔️ Write Concise Styles

Avoid complex selectors. The more complex and extensive the CSS, the longer it takes to render the layout. Use simpler selectors to maintain lower specificity.

📌 HTML Optimization

✔️ Avoid Inline Styles

• Writing inline styles leads to unnecessary code duplication.
• Inline styles can cause reflows during rendering.
• It’s standard and better for maintenance to write styles in stylesheets.

✔️ Avoid Complex DOM Trees

A deep DOM tree with many child elements increases its size. A larger DOM tree means more calculations during changes.

• A smaller, shallower DOM allows for faster calculations.
• Remove unnecessary wrapper elements.

📌 Animation Optimization

• When implementing animations, using CSS is more performance-friendly than JavaScript APIs or libraries.
• The transform property does not cause reflow or repaint, only compositing, improving rendering speed.
• Setting position to absolute or fixed prevents affecting surrounding elements.

📌 JavaScript Optimization

✔️ Avoid Forced Synchronous Layouts / Layout Thrashing

• Changing the position or size of elements before the layout stage completes forces a layout, known as a forced synchronous layout.
• Repeatedly causing layouts is called layout thrashing.

📌 Loading Optimization

📌 Rendering Blocking Optimization

✔️ Load CSS in Head, JS at the Bottom

• When a web page loads, HTML and CSS are parsed simultaneously. Since both are visually critical, they should be rendered quickly.
• When the browser encounters a script, it pauses HTML parsing, downloads the file, and executes it. Therefore, loading JS after the structure is complete is preferable.

✔️ Use Media Attributes

• Using the media attribute allows conditional loading of CSS.
• This is useful for responsive web design.
• Google Chrome Lighthouse considers stylesheets without a media attribute as rendering-blocking resources.

✔️ Async / Defer

The async and defer attributes allow script files to be downloaded in parallel, preventing web page interpretation from pausing.

• async executes the script immediately after downloading.
• defer executes the script after the web page is fully rendered.

📌 Image Optimization

✔️ Use the Picture Tag

• The picture tag’s type attribute provides images suited to the user’s environment.

✔️ Utilize Lazy Loading for Images

• The loading attribute allows for lazy or parallel loading of images.
• Available values: auto, lazy, eager.

✔️ Use Sprite Images

• Combine multiple images into one and use CSS’s background-position to display parts of the image.
• This reduces the number of resource requests.

📌 Using Webpack

• Use the module bundler Webpack to bundle CSS and JS files, reducing resource requests.

📌 Using Gzip

• Using Gzip compresses text-based files to improve loading times.