mirror of
https://github.com/LCTT/TranslateProject.git
synced 2024-12-26 21:30:55 +08:00
Merge pull request #11039 from StdioA/master
Finish translating Design faster web pages part 3
This commit is contained in:
Xingyu.Wang
GitHub
commit
3427a13160
@ -1,75 +0,0 @@
|
||||
Translating by StdioA
|
||||
|
||||
Design faster web pages, part 3: Font and CSS tweaks
|
||||
======
|
||||
|
||||
|
||||
|
||||
Welcome back to this series of articles on designing faster web pages. [Part 1][1] and [part 2][2] of this series covered how to lose browser fat through optimizing and replacing images. This part looks at how to lose additional fat in CSS ([Cascading Style Sheets][3]) and fonts.
|
||||
|
||||
### Tweaking CSS
|
||||
|
||||
First things first: let’s look at where the problem originates. CSS was once a huge step forward. You can use it to style several pages from a central style sheet. Nowadays, many web developers use frameworks like Bootstrap.
|
||||
|
||||
While these frameworks are certainly helpful, many people simply copy and paste the whole framework. Bootstrap is huge; the “minimal” version of 4.0 is currently 144.9 KB. Perhaps in the era of terabytes of data, this isn’t much. But as they say, even small cattle makes a mess.
|
||||
|
||||
Look back at the [getfedora.org][4] example. Recall in [part 1][1], the first analysis showed the CSS files used nearly ten times more space than the HTML itself. Here’s a display of the stylesheets used:
|
||||
|
||||
![][5]
|
||||
|
||||
That’s nine different stylesheets. Many styles in them that are also unused on the page.
|
||||
|
||||
#### Remove, merge, and compress/minify
|
||||
|
||||
The font-awesome CSS inhabits the extreme end of included, unused styles. There are only three glyphs of the font used on the page. To make that up in KB, the font-awesome CSS used at getfedora.org is originally 25.2 KB. After cleaning out all unused styles, it’s only 1.3 KB. This is only about 4% of its original size! For Bootstrap CSS, the difference is 118.3 KB original, and 13.2 KB after removing unused styles.
|
||||
|
||||
The next question is, must there be a bootstrap.css and a font-awesome.css? Or can they be combined? Yes, they can. That doesn’t save much file space, but the browser now requests fewer files to succesfully render the page.
|
||||
|
||||
Finally, after merging the CSS files, try to remove unused styles and minify them. In this way, you save 10.1 KB for a final size of 4.3 KB.
|
||||
|
||||
Unfortunately, there’s no packaged “minifier” tool in Fedoras repositories yet. However, there are hundreds of online services to do that for you. Or you can use [CSS-HTML-JS Minify][6], which is Python, and therefore easy to isntall. There’s not an available tool to purify CSS, but there are web services like [UnCSS][7].
|
||||
|
||||
### Font improvement
|
||||
|
||||
[CSS3][8] came with something a lot of web developer like. They could define fonts the browser downloads in the background to render the page. Since then, a lot of web designers are very happy, especially after they discovered the usage of icon fonts for web design. Font sets like [Font Awesome][9] are quiet popular today and widely used. Here’s the size of that content:
|
||||
|
||||
```
|
||||
current free version 912 glyphs/icons, smallest set ttf 30.9KB, woff 14.7KB, woff2 12.2KB, svg 107.2KB, eot 31.2
|
||||
```
|
||||
|
||||
So the question is, do you need all the glyphs? In all probability, no. You can get rid of them with [FontForge][10], but that’s a lot of work. You could also use [Fontello][11]. Use the public instance, or set up your own, as it’s free software and available on [Github][12].
|
||||
|
||||
The downside of such customized font sets is you must host the font by yourself. You can’t use other online font services to provide updates. But this may not really be a downside, compared to faster performance.
|
||||
|
||||
### Conclusion
|
||||
|
||||
Now you’ve done everything you can to the content itself, to minimize what the browser loads and interprets. From now on, only tricks with the administration of the server can help.
|
||||
|
||||
One easy to do, but which many people do wrong, is decide on some intelligent caching. For instance, a CSS or picture file can be cached for a week. Whatever you do, if you use a proxy service like Cloudflare or build your own proxy, minimze the pages first. Users like fast loading pages. They’ll (silently) thank you for it, and the server will have a smaller load, too.
|
||||
|
||||
|
||||
--------------------------------------------------------------------------------
|
||||
|
||||
via: https://fedoramagazine.org/design-faster-web-pages-part-3-font-css-tweaks/
|
||||
|
||||
作者：[Sirko Kemter][a]
|
||||
选题：[lujun9972][b]
|
||||
译者：[译者ID](https://github.com/译者ID)
|
||||
校对：[校对者ID](https://github.com/校对者ID)
|
||||
|
||||
本文由 [LCTT](https://github.com/LCTT/TranslateProject) 原创编译，[Linux中国](https://linux.cn/) 荣誉推出
|
||||
|
||||
[a]: https://fedoramagazine.org/author/gnokii/
|
||||
[b]: https://github.com/lujun9972
|
||||
[1]: https://fedoramagazine.org/design-faster-web-pages-part-1-image-compression/
|
||||
[2]: https://fedoramagazine.org/design-faster-web-pages-part-2-image-replacement/
|
||||
[3]: https://en.wikipedia.org/wiki/Cascading_Style_Sheets
|
||||
[4]: https://getfedora.org
|
||||
[5]: https://fedoramagazine.org/wp-content/uploads/2018/02/CSS_delivery_tool_-_Examine_how_a_page_uses_CSS_-_2018-02-24_15.00.46.png
|
||||
[6]: https://github.com/juancarlospaco/css-html-js-minify
|
||||
[7]: https://uncss-online.com/
|
||||
[8]: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS3
|
||||
[9]: https://fontawesome.com/
|
||||
[10]: https://fontforge.github.io/en-US/
|
||||
[11]: http://fontello.com/
|
||||
[12]: https://github.com/fontello/fontello
|
||||
@ -0,0 +1,73 @@
|
||||
设计更快的网页（三）：字体和 CSS 转换
|
||||
======
|
||||
|
||||
|
||||
|
||||
欢迎回到我们为了构建更快网页所写的系列文章。本系列的[第一][1]和[第二][2]部分讲述了如何通过优化和替换图片来减少浏览器脂肪。本部分会着眼于在 CSS（[层叠式样式表][3]）和字体中减掉更多的脂肪。
|
||||
|
||||
### CSS 转换
|
||||
|
||||
首先，我们先来看看问题的源头。CSS 的出现曾是技术的一大进步。你可以用一个集中式的样式表来装饰多个网页。如今很多 Web 开发者都会使用 Bootstrap 这样的框架。
|
||||
|
||||
这些框架当然方便，可是很多人都会将整个框架直接复制粘贴走。Bootstrap 非常大：目前 Bootstrap 4.0 的“最小”版本也有 144.9 KB. 在这个以 TB 来计数据的时代，它可能不算多。但就像所说的那样，一头小牛也能搞出大麻烦。
|
||||
|
||||
我们回头来看 [getfedora.org][4] 的例子。我们在[第一部分][1]中提过，第一个分析结果显示 CSS 文件占用的空间几乎比 HTML 本身还要大十倍。这里显示了所有用到的样式表：
|
||||
|
||||
![][5]
|
||||
|
||||
那是九个不同的样式表。其中的很多样式在这个页面中并没有用上。
|
||||
|
||||
#### 移除、合并、以及压缩/缩小化
|
||||
|
||||
Font-awesome CSS 代表了包含未使用样式的极端。这个页面中只用到了这个字体的三个字形。如果以 KB 为单位，getfedora.org 用到的 font-awesome CSS 最初有 25.2 KB. 在清理掉所有未使用的样式后，它只有 1.3 KB 了。这只有原来体积的 4% 左右！对于 Bootstrap CSS，原来它有 118.3 KB，清理掉无用的样式后只有 13.2 KB，这就是差异。
|
||||
|
||||
下一个问题是，我们必须要这样一个 `bootstrap.css` 和 `font-awesome.css` 吗？或者，它们能不能合起来呢？没错，它们可以。这样虽然不会节省更多的文件空间，但浏览器成功渲染页面所需要发起的请求更少了。
|
||||
|
||||
最后，在合并 CSS 文件后，尝试去除无用样式并缩小它们。这样，它们只有 4.3 KB 大小，而你省掉了 10.1 KB.
|
||||
|
||||
不幸的是，在 Fedora 软件仓库中，还没有打包好的缩小工具。不过，有几百种在线服务可以帮到你。或者，你也可以使用 [CSS-HTML-JS Minify][6]，它用 Python 编写，所以容易安装。现在没有一个可用的工具来净化 CSS，不过我们有 [UnCSS][7] 这样的 Web 服务。
|
||||
|
||||
### 字体改进
|
||||
|
||||
[CSS3][8] 带来了很多开发人员喜欢的东西。它可以定义一些渲染页面所用的字体，并让浏览器在后台下载。此后，很多 Web 设计师都很开心，尤其是在他们发现了 Web 设计中图标字体的用法之后。像 [Font Awesome][9] 这样的字体集现在非常流行，也被广泛使用。这是这个字体集的大小：
|
||||
|
||||
```
|
||||
current free version 912 glyphs/icons, smallest set ttf 30.9KB, woff 14.7KB, woff2 12.2KB, svg 107.2KB, eot 31.2
|
||||
```
|
||||
|
||||
所以问题是，你需要所有的字形吗？很可能不需要。你可以通过 [FontForge][10] 来摆脱这些无用字形，但这需要很大的工作量。你还可以用 [Fontello][11]. 你可以使用公共实例，也可以配置你自己的版本，因为它是自由软件，可以在 [Github][12] 上找到。
|
||||
|
||||
这种自定义字体集的缺点在于，你必须自己来托管字体文件。你也没法使用其它在线服务来提供更新。但与更快的性能相比，这可能算不上一个缺点。
|
||||
|
||||
### 总结
|
||||
|
||||
现在，你已经做完了所有对内容本身的操作，来最大限度地减少浏览器加载和解释的内容。从现在开始，只有服务器的管理技巧才才能帮到你了。
|
||||
|
||||
有一个很简单，但很多人都做错了的事情，就是使用一些智能缓存。比如，CSS 或者图片文件可以缓存一周。但无论如何，如果你用了 Cloudflare 这样的代理服务或者自己构建了代理，首先要做的都应该是缩小页面。用户喜欢可以快速加载的页面。他们会（默默地）感谢你，服务器的负载也会更小。
|
||||
|
||||
|
||||
--------------------------------------------------------------------------------
|
||||
|
||||
via: https://fedoramagazine.org/design-faster-web-pages-part-3-font-css-tweaks/
|
||||
|
||||
作者：[Sirko Kemter][a]
|
||||
选题：[lujun9972][b]
|
||||
译者：[StdioA](https://github.com/StdioA)
|
||||
校对：[校对者ID](https://github.com/校对者ID)
|
||||
|
||||
本文由 [LCTT](https://github.com/LCTT/TranslateProject) 原创编译，[Linux中国](https://linux.cn/) 荣誉推出
|
||||
|
||||
[a]: https://fedoramagazine.org/author/gnokii/
|
||||
[b]: https://github.com/lujun9972
|
||||
[1]: https://fedoramagazine.org/design-faster-web-pages-part-1-image-compression/
|
||||
[2]: https://fedoramagazine.org/design-faster-web-pages-part-2-image-replacement/
|
||||
[3]: https://en.wikipedia.org/wiki/Cascading_Style_Sheets
|
||||
[4]: https://getfedora.org
|
||||
[5]: https://fedoramagazine.org/wp-content/uploads/2018/02/CSS_delivery_tool_-_Examine_how_a_page_uses_CSS_-_2018-02-24_15.00.46.png
|
||||
[6]: https://github.com/juancarlospaco/css-html-js-minify
|
||||
[7]: https://uncss-online.com/
|
||||
[8]: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS3
|
||||
[9]: https://fontawesome.com/
|
||||
[10]: https://fontforge.github.io/en-US/
|
||||
[11]: http://fontello.com/
|
||||
[12]: https://github.com/fontello/fontello
|
||||
Loading…
Reference in New Issue
Block a user