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.
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 have a caching plugin that creates static html pages from my php/mysql driven site.
On the homepage I've a listing of content <ul><li>content</li></ul>
I've a drop-wdown (select), that loads different set of content.
Obviously this isn't playing well with caching plugin.
I'm don't have website yet, I'm in the thinking phase and I'm trying to understand what problems I might face... could you help me with this little part I explained above?
Not 100% sure what you mean; but you should be able to stop browser caching by adding a random GET variable into the URL. Like time() for example; your browser should see it as a different page.
I have built a test website using nopCommerce open source , Everything is working fine , i need to know , why my website loading time is greater than 6 sec , the homepage works fine but the categories when clicked takes like 6-10 secs. how can i check the http request and calls to db so that i can track which function is taking a long times.
Test website is test website
Thanks
Things I would try in that order:
MvcMiniProfiler.
Analyze my code for possible performance bottlenecks using a .NET profiler.
Finally submit bugs to the nopCommerce support if the previous approaches didn't yield anything fruitful that would put my code into cause.
In between I might also checkout with my hosting provider whether he is not the cause of the slowness.
As a quick and dirty check, you can add the time it takes to generate the response as a column in the IIS logs - that will give you some idea as to whether the server is being slow to serve the pages or you need to do some front-end optimisation work.
On the front end side the first thing you need to do it merge all the CSS files for a theme into one to save on roundtrips - the browser can't render the page until it's got the CSS
All the .js files you have in the head will also block the page, can you merge them and load them later?
The performance of imagegen.ashx looks on the slow side - do you need to generate the banners on the fly or could they be pre-generated?
If the back-end side of generating the page is slow, there are some scripts around the web to show which queries are using the most CPU, making the most IO ops etc.
Below is a list of things you can improve,
1.Combine your js.
There are a few things you can use, for example, jsMin, you can read this [post] http://encosia.com/automatically-minify-and-combine-javascript-in-visual-studio/. However, jsmin doesn't seem to compress the combined js.
Another option is [jmerge] http://demo.lateralcode.com/jmerge/ It kinda does it after the fact, in the sense that you need to have the site ready to cobine them with jmerge since it only take a http link.
The best one I'v known so far is bundling and minification feature of MVC4. It's part of MVC4, however, you can get a Nuget package for you MVC 3 app.
Word of advice: bundling every js of yours is not necessarily a good idea, it even backfires someimtes, since you will end up with a big js that browser will have to download sequentially, instead of downloading several smaller ones. (you might want to look into head.js to make js download parallel) So the trick here is to keep the balance. I end up have a jquery from google CDN and bundled the rest of my js into one.
2.Put js at the bottom of the page so the browser doesnt have to load the js first before it starts to render the page. But you need to be careful with this one though, since normally you will have jquery functions doing stuff upon document.ready() at the header of the page, I adviese you moving that to the bottom of the page as well, if possible.
If you move the js reference and scirpt block in you layout page to the bottom, then you will most likely run into problem with nested js reference and js script blocks in your individual view. No worries, then you need to look into using #section (probably suitable for a discussion in an other thread) in your view and render it in your layout page, so that the referenced and script block inside your view get rendered at the bottom of the page at run time.
2.Use CDN
Pretty straight forward.
3.Combine CSS
Combine them into one, with the same tool you use for combining js, but you need to reference it at the page header, instead of the bottom.
4.Enable static content cache, something like this in your web config file
It won't help with first time load, but definitely will make it a lot faster for returning user.
5.Enable url compression
Time to first load
This is one of the metrics used by webpagetest.org. But dont bang your head against this one too much, as it basically says how fast your web server can serve the content. So probably not much you can do here form the software end.
Hope that would help!
NopCommerce is deadly slow, and the developers doesn't look in to the performance issue seriously. I have seen lot of performance related forums left unanswered. So best luck.
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