AWS EC2 micro and medium instances with same performance? - ruby-on-rails

Question

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.
You can check it by yourself.
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/
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?

Answer 1

Check cloudwatch for the instance monitoring of both instances, you probably have a shared bottleneck. Could it be they use the same database for example?

Answer 2

What Julio said about shared resources must be check first. Keep looking at the CloudWatch that's very important.
Regarding the performance improvement. Use CloudFront or S3 for images, CSS, js etc. that's the first step for reducing the burden on you instance.
Micro instance is a special instance type. Actually speaking micro is roughly can exceed the performance and infra power than small instance. It belongs to a place between small and medium instance interms of compute power.
Here is little gist about the way micro instance behaves. It is meant to work on occasional burst compute intensive task. That occasional max threshold is actually bigger than the range of small instance. The number times you hit the max threshold, that many times you are penalised for hitting the max. On that event of hitting the upper limit of the compute power, your micro's compute power is cut down to great extend. After some time, the cut down threshold is removed and your instance is back to normal. If again when you hit the max threshold again, you will be penalised again but this time for even long duration. This way, if the trend continues, your app will behave very badly over a period of time. With micro occasional spikes are good but not frequent burst. The idea behind the micro is for burst compute and shared compute (process capability). Small instance is for guaranteed memory and compute power ( actually all instance other than micro )
Now speaking of the comparison of the micro and medium. The effect what you observed is correct and it actually anticipated behaviour. What differs from medium and micro is the memory. Chances are your app is compute intensive and thus the behaviour is as not as overwhelming as you have anticipated.
I suggest you to check your app with large instance for few hours with few CloudWatch metics and see the performance. The comparison between micro and medium, wouldn't be like 3x performance improvement as you think of ( I am guess are thinking of ranking as micro, small and then medium so 3 times up )

Answer 3

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" />
JS:
<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.
Indeed that's the top two recommendations advised by Google Chrome's Audit tool (along with browser caching, proxy caching