页面和模块
- 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-Encodingheader 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 中；
CDN 示意
CDN 示意
