Skip to content

Instantly share code, notes, and snippets.

@diggles

diggles/Angular Delay

Last active August 29, 2015 14:08
Show Gist options
  • Save diggles/ee0db40cdf0fe72d5a38 to your computer and use it in GitHub Desktop.
Save diggles/ee0db40cdf0fe72d5a38 to your computer and use it in GitHub Desktop.
Download ZIP
Bare page with Angular includes to try and isolate delayed script evaluation
Raw
Angular Delay
<html>
<body>
<!-- Warning - In production please provide local copys of these libs and the appropriate JS
in case the CDN fails -->
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular-route.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular-resource.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular-animate.min.js"></script>
</body>
</html>
@diggles
Copy link
Author

diggles commented Oct 31, 2014

While tracking down some performance issues with an Angular site I found that while the markup and local scripts were loading in ~60ms there was a 200ms pause before the Angular script was evaluated, meaning none of my AJAX calls were being made and there was a noticeable delay between the initial page render and the content being loaded.

The cause of this was Google's CDN, or some portion of Google's network introducing significant amounts of latency, even though the Angular file was cached it was still taking 200ms to fire onload events because it took so long to retrieve the header and check cache values.

It seems strange that even though the requests are being made from New Zealand it is still being serviced by servers in California.. surely they have a server or two in Australia that they could route pacific requests to.

The solution has been to switch to a different CDN, at the moment https://cdnjs.com/ seems to be a solid choice, they host their libraries on CloudFlare who have a server in Sydney.

Simply replacing

//ajax.googleapis.com/ajax/libs/angularjs/1.2.26/

with

//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.20/

reduced page load time from over 200ms to under 80ms

note: if you are running the above code with file:// you may need to include the http: for each script src

search: ajax.googleapis.com, cdn, angular, slow ttfb
trace:

  7    64 ms    66 ms    64 ms  72.14.243.237 < NZ
  8    64 ms    65 ms   195 ms  72.14.243.236 < NZ
  9    65 ms    64 ms    66 ms  66.249.95.232 < Google
 10   161 ms   163 ms   160 ms  66.249.95.166 < Google, somehow an internal hop adds 100ms ping
 11   167 ms   171 ms   167 ms  209.85.243.248
 12   197 ms   197 ms   212 ms  64.233.174.199
 13   199 ms   196 ms   198 ms  209.85.249.95

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment