网站性能优化 の 前端构建要点

页面和模块

• pages
• imodules

部署到 cdn 的内容

├── images
├── iscripts
└── sass

PageSpeed Score

1. 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.
2. 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;
3. Minify JavaScript（压缩 JS，gulp 轻易做到）
   Compacting JavaScript code can save many bytes of data and speed up downloading, parsing, and execution time.
4. 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;
5. 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 the Vary: Accept-Encoding header instructs the proxy to store both a compressed and uncompressed version of the resource.
6. 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

[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 示意

• Why use a Content Delivery Network (CDN)？
• Why we don’t use a CDN: A story about SPDY and SSL