网站性能优化 の 前端构建要点
2016-08-13 本文已影响53人
michael_jia
页面和模块
- pages
- imodules
部署到 cdn 的内容
├── images
├── iscripts
└── sass
PageSpeed Score
- Serve scaled images(大图当小图用,浪费!)
Serving appropriately-sized images can save many bytes of data and improve the performance of your webpage, especially on low-powered (eg. mobile) devices. -
Leverage browser caching(用好 expires time,示例,Google speed insight)
Page load times can be significantly improved by asking visitors to save and reuse the files included in your website.- Reduces page load times for repeat visitors
- Particularly effective on websites where users regularly re-visit the same areas of the website
- Benefit-cost ratio: high;
- Access needed;
- Minify JavaScript(压缩 JS,gulp 轻易做到)
Compacting JavaScript code can save many bytes of data and speed up downloading, parsing, and execution time. -
Enable gzip compression
Reduce the size of files sent from your server to increase the speed to which they are transferred to the browser- Reduce sizes of pages by up to 70%
- Increase page speed
- Cost-benefit ratio: high
- Access needed to the .htaccess files or server administration files;
-
Specify a Vary: Accept-Encoding header
Bugs in some public proxies may lead to compressed versions of your resources being served to users that don't support compression. Specifying theVary: Accept-Encoding
header instructs the proxy to store both a compressed and uncompressed version of the resource. - Inline small CSS
Inlining small external CSS files can save the overhead of fetching these small files. A good alternative to inline CSS is to combine the external CSS files.
对于小的 css 文件,要么直接将其内容放到 html 文件 style tag 中,要么合并到其他 css 文件中;
文件:src/imodules/www/common/InsertTop/main.html
<style type="text/css">@@include("../../dist/www/sass/reset.css")</style>
<style type="text/css">@@include("../../dist/www/sass/override.css")</style>
[Inline small CSS or combine the external CSS files](https://gtmetrix.com/reports/www.xxtao.com/6quO4cBl#)
YSlow Score
-
Compress components with gzip
Compress components with gzip
页面指标(Page Details)
- Page Load Time
- Total Page Size
- Requests
Responsive Web Design
- This Is Responsive;
- Images @ w3schools;
- 5 Useful CSS Tricks for Responsive Design ;
- picturefill about picture element;
- https://www.smashingmagazine.com/2013/07/choosing-a-responsive-image-solution/
- Optimizing Web Experiences for High Resolution Screens;
- https://css-tricks.com/case-study-boosting-front-end-performance/
- http://www.appelsiini.net/projects/lazyload
jquery.shim.js 文件说明
http://www.example.com/global/iscripts/libs/jquery.shim.js
define(function () {
return $;
});
- 目的
这个文件主要是为了能正常引入依赖于 jQuery但又不支持 require 的第三方插件;
构建脚本
gulp --gulpfile=${siteroot}/gulpfile.js --site=www --use_cdn=1 --cdn=http://cdn.example.com/www/ release
- style attribute( inline css), style tag, link css, 将 inline css 和 小 link css 文件改为 style tag 放到 html head 中;