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

2016-08-13  本文已影响53人  michael_jia
页面和模块
部署到 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
页面指标(Page Details)
Responsive Web Design
jquery.shim.js 文件说明
define(function () {
   return $; 
});
构建脚本

gulp --gulpfile=${siteroot}/gulpfile.js --site=www --use_cdn=1 --cdn=http://cdn.example.com/www/ release

CDN 示意
CDN 示意
上一篇下一篇

猜你喜欢

热点阅读