How to optimize CSS to reach the top of website performance

, that is, it makes more sense.

  concatenated and minimized CSS

modern build tools, CSS preprocessors such as Sass, and WordPress plug-ins can combine all parts into one large CSS file. Then remove unnecessary white space, comments, and characters to minimize the file size. With HTTP/2 and later versions of
, there are fewer performance problems for multiple files, but a single file requires only one header for more efficient gzip compression and caching. A separate CSS file for
is useful only if you have one or more stylesheets that change frequently, perhaps several times a week. Even so, most static CSS code can still be merged into one file. For more tips, check out our tutorial on how to minimize CSS and JS. The

  avoid Base64 Encoding

tool can encode an image into an base64 string, which you can use as antag for HTML and as a data URI:
.background {
  background-image: url('data:image/jpg;base64,ABC123...');
}
in CSS background, which reduces the number of HTTP requests but harms CSS performance:

base64 strings can be 30% larger than their binary equivalent strings.
browsers must decode strings before they can use images, and
changing one image pixel invalidates the entire CSS file.

only considers Base64 encoding if you are using very small, infrequently changed images where the resulting string is not longer than URL.
that is, you can use UTF8 to encode reusable SVG icons, for example.
.svgbackground {
  background-image: url('data:image/svg+xml;utf8,');
}

  remove CSS Hacks and IE Fallbacks


unless you are unlucky and have a lot of Internet Explorer users, you can remove conditional stylesheets and hackers from your CSS. In most cases, IE users will still see something, especially if you are using a "mobility first" design, which will display a simpler linear view by default. The result may not be good, and it won't be perfect pixels, but it's best to consider the accessibility of all users in your development budget. The

  preload CSS file


tag provides an optional preload attribute to start downloading immediately rather than waiting for the real introduction in HTML:



  
is particularly useful in WordPress and other CMS, where plug-ins can add style sheets at the bottom of the page.

  's use of key inline CSS


analysis tools may suggest that you "inline key CSS" or "reduce render blocking stylesheets." This can improve performance by recognizing the basic style used by the elements above the fold (the style that is visible when the page loads)

inlines the key CSS into the
tag inloads the remaining CSS asynchronously to avoid rendering blocking. This can be achieved by loading stylesheets in the "print" style that the browser gives lower priority. After the page is loaded, JavaScript switches it to "all" media style (

ensures that JavaScript is not available when CSS works):tools such as critical and criticalCSS can help extract the styles of elements in the view.


/* critical styles */
body { font-family: sans-serif; color: #111; }

  

technology significantly improves performance and audit scores. Sites or applications with a consistent interface should be easier to implement, but they may be harder to implement elsewhere:
build tools are essential for all sites except the simplest. The "fold" on each device of the

is different.
sites can have a variety of layouts and require different key CSS.
's key CSS tools can fight against specific frameworks, HTML-generated clients, and dynamic content.
is a technique that mainly facilitates the loading of the first page. CSS is cached for subsequent pages, so additional inline styles will increase the weight of the page.
Rendering


  individual connections and shrinks using media queries will benefit most sites, but sites that require a large number of larger screen styles can split CSS files and load using media queries:


this example assumes a move-first approach. The mobile device loads core.css, but may not need to download or parse the rest of the stylesheet.

uses progressive rendering

  progressive rendering is a technique for defining separate stylesheets for individual pages or components. It can benefit very large sites where a single page is made up of a wide range of components.


loads each CSS file immediately before referencing components in HTML:
works well in most browsers. Safari displays a blank page until all CSS is loaded, but it should not be significantly worse than a single large stylesheet.
  
  
...

  
's adoption of the Web component also encourages the use of range styles that are loaded when rendering custom elements.
optimizes CSS performance

  CSS technology and properties put different pressures on browsers, CPU, memory, bandwidth, and other resources. The following tips can help you avoid unnecessary processing and slow performance.


uses modern layout technology (Grid and Flexbox)

  based on floating layout is difficult to create, uses a large number of properties, requires continuous adjustment of margins and padding, must be managed by media queries, and requires a lot of browser processing. They have been the only viable layout for many years, but they are no longer necessary. Use any of the following options:


CSS Flexbox is used for one-dimensional layout, and you can wrap to the next line. It is an ideal choice for menus, image libraries, cards, etc.

CSS Grid is used for 2D layouts with explicit rows and columns. It is very suitable for page layout.
is both easier to develop, uses less code, renders faster, and adapts to any screen size without media queries.

very old browsers do not recognize modern flexbox and grid attributes, so each element becomes a block. Display them in a simple mobile linear layout: there is no need to use floating-point-based fallback to simulate the design.
replaces the image

  with CSS gradients and effects. If possible, select the CSS code instead of the image. Experiment with gradients, boundaries, radii, shadows, filters, blending modes, masks, clipping, and pseudo-element effects to reuse or replace existing images.


CSS effects use less bandwidth, are easier to modify, and can usually be animated.
avoids overusing the high-cost attribute

  you may have concise declarative code, but some CSS require more processing than others. The following attributes trigger painting calculations, which can be costly when overused:


uses CSS transitions and animated

position: fixed
border-radius
box-shadow
text-shadow
opacity
transform
filter
backdrop-filter
background-blend-mode


  CSS transitions whenever possible, and animation is always smoother than the effects supported by JavaScript, which modifies similar attributes. They are not handled in very old browsers, but this is best because these browsers may run on poor-performing devices.


however, please avoid too much animation. These effects should enhance the user experience without adversely affecting performance or causing carsickness. Check prefers-reduced-motion media queries and disable animation if necessary.
avoids animation attributes that trigger relayout

  changing the size (width, height, fill, border) or position (top, bottom, left, right, margin) of an element may cause the entire page to be relaid out at each animation frame. The most effective properties to animate are:


: blur, contrast, Shadows, and other effects

opacity

filter: translate (move), Zoom or rotate Graph elements

transformbrowser can use hardware-accelerated GPU to render these effects in its own layers, thus affecting only the compositing phase. If

must animate other attributes, you can improve performance by using position:absolute to remove elements from the page flow.
Note complex selectors

  browsers will quickly parse the most complex CSS selectors, but simplifying them will reduce file size and improve performance. Complex selectors are usually generated when deeply nested structures are created in CSS preprocessors such as Sass.


indicates which elements will change the

  CSS will-change attribute allows you to warn you about how the element will be changed or animated so that browsers can optimize ahead of time:


can define any number of comma-separated values, but this attribute can only be used as a last resort to solve known performance problems. You should not apply it to too many elements and make sure it is given enough time to initialize.
.myelement {
  will-change: transform, opacity;
}
considers that CSS Containment

  Containment is a new CSS feature that allows you to identify isolated subtrees of a page, thereby improving performance. Browsers can optimize processing by rendering (or not rendering) specific blocks of DOM content. The


contain attribute accepts one or more of the following values in a space-delimited list:
: no Containment


noneapplied: the layout of the element is isolated from the rest of the page-its content does not affect other elements

layout: the child elements of the entity are not displayed outside their boundaries

paint: the size of the element can be determined without checking the child elements-the dimension is independent of the content

sizeis also mentioned Two special values are provided:

: apply all containment rules (except no rules)


strict: apply layout and draw

contentimportant: a page has a list of


containing the applicationcontain: strict;Apply if you change the contents of any child item


, the browser will not recalculate the size or position of that item, other items in the list, or any other element on the page.

most modern browsers support CSS Containment. Containment is not supported in Safari or older applications, but Containment can be safely used in these applications because browsers will ignore this attribute.

Responding to the "Save-Data" header

  Save Data is an HTTP request header that indicates that the user has requested reduced data. In some browsers, it may be marked as "Lite" or "Turbo" mode. When


is enabled, each browser request sends a
header:Save-Datawhen a Save-Data is detected, the server can respond accordingly. In the case of CSS, it can send a simple mobile linear layout, use OS fonts, switch to block colors, or load low-resolution image backgrounds.
GET /main.css HTTP/1.0
Host: site.com
Save-Data: on
Note: the server should return the following header when modifying the request to ensure that the minimum content is not cached and reused when the user turns off Lite/Turbo mode: this header can also be detected by the
client JavaScript. When "Save-Data" is not enabled, the following code adds the bestUX class to the
Vary: Accept-Encoding, Save-Data
element:, the stylesheet can then respond accordingly without any server action: the

if ('connection' in navigator && !navigator.connection.saveData) {
  document.documentElement.classList.add('bestUX');
}
prefers-reduced-data media query provides an alternative CSS-only option, although at the time of this writing, no browser supports this option: the
/* no hero image by default */
header {
  background-color: #abc;
  background-image: none;
}
/* hero image when no Save-Data */
.bestUX header {
  background-image: url("hero.jpg");
}
summary
/* no hero image by default */
header {
  background-color: #abc;
  background-image: none;
}
/* hero image when no Save-Data */
@media (prefers-reduced-data: no-preference) {
  header {
    background-image: url("hero.jpg");
  }
}

  has many options for optimizing CSS performance, but for new projects Please consider the following approach:


Use the mobility-first approach: first write the simplest mobile layout, and then add enhancements as the screen space and browser feature set increases.

Split the CSS into separate files with identifiable responsibilities: the CSS preprocessor or CMS plug-in can merge the CSS parts into a single file.
Add a build step: provides tools to automatically delete code, identify problems, connect, zoom out, reduce image size, and so on. Automation makes life easier, and you are less likely to forget the optimization steps.
Record stylesheets: style guides with documented examples will make your code easier to obtain and maintain. You will be able to identify and delete the old CSS without paying any price.
finally, learn CSS! The more you know, the less code you need to write, and the faster your Web application will become. No matter which platform and framework you use, it will make you a better developer.


			

	Disclaimer: All articles on this website, unless otherwise specified or marked, are original and published on this website. Any individual or organization is prohibited from copying, stealing, collecting, or publishing the content of this site to any website, book, or other media platform without the consent of this site. If the content on this website infringes on the legitimate rights and interests of the original author, you can contact us for assistance.