頁面和模塊

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

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