即时通讯开发一个AngularJS（前端）和Rails API（后端）项目。我的开发环境已经运行在一个AWS EC2微实例。现在，它的时间去住，所以我选择了一个中等实例。我想表现的改善将是真棒，但不是说，我的感觉是，他们都或多或少相同的。
Im developing an AngularJS (frontend) and Rails API (backend) project. My development environment has been running on an AWS EC2 micro instance. Now, its time to go live, so I chose a medium instance. I thought the performance improvement was going to be awesome, but instead of that, my feeling is they are more or less the same.
您可以自己检查一下。
开发环境：的http：// ec2- 54-76-16-85.eu-west-1.compute.amazonaws.com/ preproduction环境：的http：// ec2- 54-76-117-208.eu-west-1.compute.amazonaws.com/
Development environment: http://ec2-54-76-16-85.eu-west-1.compute.amazonaws.com/ Preproduction environment: http://ec2-54-76-117-208.eu-west-1.compute.amazonaws.com/
我在想什么？它的时间太长加载主页。但我不知道哪里是bottelneck或者我如何可以提高性能。我应该使用CloudFront的的静态图像。
What am I missing? It takes too long to load the main page. But I don´t know where is the bottelneck or how can I improve the performance. Should I use cloudfront for the static images.
无论如何，你可以看到它需要时间来加载，甚至文本的翻译。
Anyway, you can see it takes time to load even the text translations.
任何建议如何改进呢？
Any suggestions how to improve this?
推荐答案
第一个建议是使用管道的资产。目前有许多单独调用个人的CSS和JS文件。
First suggestion would be using pipeline for your assets. At the moment you have many individual calls to individual CSS and JS files.
CSS：
<link rel="stylesheet" href="css/app.css"/>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/bootstrap-responsive.min.css">
<link rel="stylesheet" href="css/contacts.css">
<link rel="stylesheet" href="css/options.css">
<link rel="stylesheet" href="css/welcome.css">
<link rel="stylesheet" href="css/new-business.css">
<link rel="stylesheet" href="css/boat-booking.css">
<link rel="stylesheet" href="css/icons.css">
<link rel="stylesheet" href="css/menus.css">
<link rel="stylesheet" href="css/booking.css">
<link rel="stylesheet" href="css/join-us.css">
<link rel="stylesheet" href="css/user.css">
<link rel="stylesheet" href="css/social-buttons.css">
<link rel="stylesheet" href="css/font-awesome.min.css" />
<link rel="stylesheet" href="css/font-awesome-ie7.min.css" />
<!-- SELECT -->
<link rel="stylesheet" href="css/prettify.css">
<link rel="stylesheet" href="css/bootstrap-select.css">
<!-- SWITCH -->
<link rel="stylesheet" href="css/angular-toggle-switch-bootstrap.css"/>
<link rel="stylesheet" href="css/angular-toggle-switch.css"/>
<!-- SLIDER -->
<link rel="stylesheet" href="css/slider.css"/>
<link rel="stylesheet" href="css/lightbox.css" />
<link rel="stylesheet" href="css/angular-growl.min.css" /> <!-- Notifications -->
<!-- Progress bar -->
<link rel="stylesheet" href="css/ngProgress.css" />
记者：
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script src="lib/plugins/file-upload/angular-file-upload-shim.min.js"></script>
<script src="lib/angular/angular.js"></script>
<script src="lib/angular/angular-resource.js"></script>
<script src="lib/angular/angular-sanitize.js"></script>
<script src="lib/angular/angular-cookies.min.js"></script>
<!--<script src="http://rawgithub.com/SlexAxton/messageformat.js/master/messageformat.js"></script>-->
<script src="lib/plugins/angular-translate.min.js"></script>
<script src="lib/plugins/angular-translate-loader-static-files.min.js"></script>
<!--<script src="http://rawgithub.com/angular-translate/bower-angular-translate-interpolation-messageformat/master/angular-translate-interpolation-messageformat.min.js"></script>-->
<script src="js/ui-bootstrap-tpls-0.6.0.min.js"></script>
<script src="lib/bootstrap/bootstrap.js"></script>
<script src="js/app.js"></script>
<script src="js/services.js"></script>
<script src="js/controllers.js"></script>
<script src="js/controllers/home.js"></script>
<script src="js/controllers/boat-list.js"></script>
<script src="js/controllers/boat.js"></script>
<script src="js/controllers/boat-booking-payment.js"></script>
<script src="js/controllers/boat-services-payment.js"></script>
<script src="js/controllers/login.js"></script>
<script src="js/controllers/location.js"></script>
<script src="js/controllers/user-dashboard.js"></script>
<script src="js/controllers/business.js"></script>
<script src="js/controllers/file-upload.js"></script>
<script src="js/controllers/searcher.js"></script>
<script src="js/controllers/reset-password.js"></script>
<script src="js/controllers/about.js"></script>
<script src="js/controllers/shopping-cart.js"></script>
<script src="js/controllers/user-plans.js"></script>
<script src="js/controllers/user-plan-payment.js"></script>
<script src="js/controllers/demo.js"></script>
<script src="js/controllers/account.js"></script>
<script src="js/controllers/help.js"></script>
<script src="js/controllers/join-us.js"></script>
<script src="js/controllers/account.js"></script>
<script src="js/controllers/accordion.js"></script>
<script src="js/controllers/boat-model.js"></script>
<script src="js/controllers/new-boat-payment.js"></script>
<script src="js/controllers/what-to-do.js"></script>
<script src="js/controllers/privacy.js"></script>
<script src="js/controllers/terms.js"></script>
<script src="js/filters.js"></script>
<script src="js/directives.js"></script>
<script src="js/i18n.js"></script>
<script src="js/properties/properties.js"></script>
<script src="lib/plugins/file-upload/angular-file-upload.min.js"></script>
<!-- SELECT -->
<script src="lib/plugins/angular-strap.js"></script>
<script src="lib/bootstrap/bootstrap-select.js"></script>
<!-- SWITCH -->
<script src="lib/plugins/angular-toggle-switch.min.js"></script>
<!-- SLIDER -->
<script src="lib/bootstrap/bootstrap-slider.js"></script>
<!-- SPINNER -->
<script src="js/spin.min.js"></script>
<script src="lib/plugins/angular-spinner.min.js"></script>
<!-- LIGHTBOX -->
<script src="lib/bootstrap/lightbox-2.6.min.js"></script>
<!-- OAUTH -->
<script src="js/oauth.min.js"></script>
<!-- Growl notifications -->
<script src="lib/plugins/angular-growl.js"></script>
<!-- Custom HTML popover
<script src="lib/plugins/custom-popover.js"></script>-->
<!-- Countdown Timer -->
<script src="lib/plugins/angular-timer.min.js"></script>
<!-- CART -->
<script src="js/shopping-cart.js" type="text/javascript"></script>
<!-- Chart -->
<!--<script src="lib/plugins/d3.min.js" type="text/javascript"></script>-->
<script src="lib/plugins/angular-charts.min.js" type="text/javascript"></script>
<!-- Progress bar -->
<script src="lib/plugins/ngProgress.min.js" type="text/javascript"></script>
<!-- Angular moment -->
<script src="lib/plugins/moment-with-langs.min.js"></script>
<script src="lib/plugins/angular-moment.min.js"></script>
<!-- Stripe -->
<script src="https://checkout.stripe.com/checkout.js"></script>
<!-- Angular-dynamic-locale -->
<script src="lib/plugins/tmhDynamicLocale.js"></script>
减少这些到两个查询加上外部资源会看到你的加载时间有了很大的改进。的确，看着刷新无缓存表明，有很大的局限性被放置，你加载单个文件的事实。
Reduce these down to two queries plus external resources will see a big improvement in your load times. Indeed, looking at the refresh-without-cache shows that there is a big limitation being placed by the fact that you're loading individual files.
事实上这是由谷歌Chrome的审计工具劝前两名的建议（以及浏览器缓存，代理缓存
Indeed that's the top two recommendations advised by Google Chrome's Audit tool (along with browser caching, proxy caching
相关推荐
最新文章