頁面和模塊
- pages
- imodules
部署到 cdn 的內(nèi)容
├── images
├── iscripts
└── sass
PageSpeed Score
- Serve scaled images（大圖當(dāng)小圖用停团，浪費(fèi)！）
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.
對(duì)于小的 css 文件，要么直接將其內(nèi)容放到 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
頁面指標(biāo)（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 $;
});
- 目的
這個(gè)文件主要是為了能正常引入依賴于 jQuery但又不支持 require 的第三方插件琐凭；
構(gòu)建腳本
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 示意
