I have a simple page that utilizes angular, custom fonts/icons from google, and font-awesome.
I'm trying to understand why the long gap between loading icons and font-awesome. What is the browser doing in the background that is taking that long? It couldn't possibly be angular initializing since the script hasn't even been loaded yet by the browser.
Related
I am using TWA. Its response time and speed are slow. If the internet is slow then there are lot of issues like. UI lagging, Slow speed and image loading time are very hight. That is giving a bad experience to our customers How can I improve the performance of my TWA?
There are many ways to optimise TWA’s, but the basic fact is to optimise twa you have to optimise website. Some of the basic things you can do is:
Use a CDN to serve your static request
Cache requests using service worker so that in offline mode you don’t
need network call for basic ui updation and home screen image loading
etc.
Make button clicks more responsive and give some quick feedback on
touch
Smoothen the scroll so that it feels app like
Add some smooth animation before loading data so that the loading is
not abrupt
Optimise your image size for web , use .webp format
I am diving into JavaScript MVC with Angular and as I understand it, along with the initial shell page, all your scripts must be loaded on the initial page load. However, and correct me if I'm wrong, that would mean that a majority of your scripts being loaded could be entirely useless (i.e. you have view #1 showing and scripts for views #2 - #10 aren't needed yet)?
In my case, I have a fairly large web app, with a feed page, results page, product page, profile page, among others. It amounts to 10+ pages, and my current (the traditional) approach is loading scripts specific to each page on load. Now each page is a partial and I don't believe it's possible to load specific scripts with partials?
So, part of my question is if my statements are accurate. The other is whether or not my fear of suffering on initial page load are justified (especially for mobile devices for instance).
I really got into Angular in hopes to clean up my JavaScript with the MVC approach and did not plan on taking advantage of it as a single page application (I can forego the use of routing different partials into my view, right?). But now I'm not sure. I just want to get a better understanding of how it works before making the leap.
Any help appreciated. Thanks!
Take a look into AMD pattern with Require.JS (Works with any type of JS framework). There is a seed project with AngularJS + RequireJS.
I am using the Navigation Timing API to get real user performance data for visitors to my company's site. I am looking at visitors who use Chrome, Firefox, and IE 9+ and focusing on two main matrices of measurement:
Page Load => (loadEventEnd - navigationStart) and
Interactive => (domInteractive - navigationStart)
I have gathered a lot of data and have noticed something unexpected, IE9+ has lower page load and interactive times than chrome and firefox. Has anyone else experienced this? Does IE set the navigation timing events differently than Chrome and/or Firefox? From all the performance sites I have looked at Chrome and Firefox should be much faster at loading pages than IE. I have looked over my code and tested dozens of time to ensure I am capturing data from the API correctly and appropriately storing it in my DB. Any thoughts?
I am working on a webapplication that uses caching to make it available offline. Everything works fine when running it chrome (offline and online). But when I run it on iPad the links don't work anymore and I get failed to load page everywhere. Removing the caching makes the links work again so it obviously has something to do with the caching. Navigating directly to the seperate pages of the webapp also works fine in Safari, its the link that causes the error. By default all links are loaded with AJAX in jQuery Mobile. Changing this by adding rel="external" also fixes the problem, but obviously I don't want to do that.
To enable caching I added this code: and created a manifest file with ALL the files (scripts, css, images, html). Does anyone know what the problem could be?
I've experienced this as well while working with caching using manifests. What I discovered was that there Chrome has no limits. iPad and iPhone do. This appears to be pretty small, around 5mb. Try removing images as much as possible and using YUI Compressor on your scripts.
Ajax requests can be cached actually, the system doesn't care if the request is by AJAX or normal full request. All you have to do is put the URLs you wanted to retrieve by ajax into the manifest like the rest of the assets.
Hope this helps
I'm using mvc3, and mvc mini profile is displaying multiple popup boxes for a single page request because it is profiling for images and js files.
Have you guys experienced this also? What did you do?
You are seeing those timings cause they are going through the managed pipeline. This also happens to mean that your page is a bit slower cause you have static content that is served dynamically.
See also, for details on how to disable it from being profiled: Mini MVC profiler: appears to be displaying profile times for every static resource