CSS shorthand properties not only are convenient, but also offer us a way to reduce the size of our style sheets by cutting down on excessive and verbose rules.
Using shallow CSS selectors can also significantly reduce the size of a style sheet, as well as make code more maintainable and modular.
Applying the DRY principle with the csscss redundancy checker can further winnow bloated CSS files by enabling you to remove superfluous properties.
避免使用@import。@import 会串行化资源请求。
尽量使用 <link>。可以并行化请求。 # 针对http1.x。
<head>里提前放置 css。
理由：
1) 防止flash of unstyled content 出现。
2) 减少 re-render and repaint the entire DOM.
使用性能更快的选择器。常见的 tag: div，descendant: div ul li ，class: .listitem，direct child: section > ul > li 性能都差不多，其他的 Sibling，Pseudo，Attribute 比较慢。
尽可能使用 flexbox 布局。
例如有 flexbox style：
parent：> display: flex; justify-content: space-between; flex-flow: row, wrap;
children: > flex-basis: 24.25%
比较 box model：
parent: > display：block。
children：> width: 24.25%;
往往还会用到 :nth-child selector 调整尾端
The conclusion you can draw is that when it comes to rendering content, flexbox tends to be a better-performing solution. Better yet, it enjoys broad support without vendor-specific prefixes. When used with vendor prefixes, support only increases. If you’re not using flexbox on your websites, it’s rather trivial to retrofit in most cases.
3.images responsive:
Delivering responsive images in CSS with media queries, and how supplying the correct image sources to the proper devices can positively impact loading and processing time
Delivering responsive images in HTML by using the srcset attribute and the <picture> element
Providing polyfill support for the <picture> element and srcset attribute for older browsers in an optimal fashion
Using SVG images in both CSS and HTML, and the convenience and flexibility inherent to the format when it comes to optimal display on all devices
4.images else:
reduce size, compression or optimizing.
use webp.
lazy loading images.
5.fonts.
只选择需要 weight 字体
用 css @font-face 确定使用字体
使用 font-display 声明字体未加载时策略
使用 subset 减少字体文件大小
e.g.
@font-face{
font-family: "Open Sans Light";
font-weight: 300;
font-style: normal;
src: /*
These local sources are commented out for debugging purposes.
In any production site, they should be enabled.
local("Open Sans Light"),
local("OpenSans-Light"),
*/
url("open-sans/OpenSans-Light-BasicLatin.woff2") format("woff2"),
url("open-sans/OpenSans-Light-BasicLatin.woff") format("woff"),
url("open-sans/OpenSans-Light-BasicLatin.eot") format("embedded-opentype"),
url("open-sans/OpenSans-Light-BasicLatin.ttf") format("truetype");
font-display: swap; # local fallback
unicode-range: U+0000-007F; # subset
}
6.script
- Depending on its position, the <script> tag can block rendering, which delays the display of the page in the browser. Placing <script> tags toward the bottom of the document can speed up the rendering of a page.
- The async attribute can provide further performance benefits if you can manage the execution of scripts that use it.
- Managing the execution of interdependent scripts that use async can be challenging. A third-party script-loading library such as Alameda or RequireJS can provide a convenient interface for managing script dependencies, while also providing the benefit of asynchronous script loading and execution。
Techniques that reduce the size of assets are things you should still do on HTTP/2. These are techniques such as minification, server compression, and image optimization. Reducing the size of an asset contributes to lower load times, always and forever.
Techniques that combine files are things you should stop doing on HTTP/2. Although useful in alleviating latency in HTTP/1 client/server interactions, requests are much cheaper in HTTP/2, and combining files can have an adverse effect on your caching effectiveness.
