I'm developing a mobile site where startup time is a critical issue.
Currently meteor apps load the templates for every single page in the whole app,
and it seems there are no plans to change this before 1.0 meaning there's an initial startup hit. Overall the experience from then on is really snappy, but i'm trying to optimize the first part - esp. on mobile (asia) 3G networks.
So what techniques are people using to reduce the apparent startup time?
Because of the "full stack" nature of meteor i'm not sure how best to approach this.
For example having a separate bootstrapping/preloader page that loads the meteor app in the background (iframe?), then redirects to meteor URL when ready?
Or combining meteor with static site generated pages and disabling DDP for the first few pages?
Any techniques appreciated!
One quick fix you might look at for repeat visitors is Meteor's appcache package. With appcache added:
Once a user has visited a Meteor application for the first time and
the application has been cached, on subsequent visits the web page
loads faster because the browser can load the application out of the
cache without contacting the server first.
According to the specs it is available for most of the major mobile browsers. Of course, it will not help with the initial site visit.
As mentioned by emgee.. fastrender is absolutely worth a look.
This issue has been addresses in Meteor 1.5 by using dynamic imports. See here.
Related
I've been reading about how nuxt can generate a static site when a client makes a request to view the website. We are planning to build a headless cms to migrate the database with the data the website needs. This data will only be changed when you save it in the headless cms.
My question is since this data will only change when it is changed in the headless cms. Isn't it possible to just generate the site when it is modified from the headless cms, and then serve that site to the client? To reduce server costs.
Is it possible to do this with nuxt? Or are there any possibilities to do this?
We are planning on using Firebase as a backend.
There's nothing explicitly preventing Nuxt from being rebuilt each time you change an item in your DB. The part that matters is how you tell your app to rebuild itself.
By far the simplest way is using some sort of "build hook". See Netlifys docs here for a quick overview of what they are. However, this only really works if you're using a headless CMS that can send hooks on save, and a build provider that can trigger builds using those hooks.
You will absolutely save on server costs using this sort of method, but beware: if you have a lot of user generated content triggering builds, your build cost can easily outweigh the server costs. You also need to be aware that builds generally take a few minutes, so you won't see instant changes on your site.
The other option you have is foregoing static site generation in favour of SSR, which can dynamically load and render your content, completely avoiding the need to build every time a new DB change is made. This is what I'd consider the best alternative if you do indeed have a lot of user generated content.
It's hard to give any further advice without knowing the specifics of the CMS or build provider though.
When loaded a PWA (Progressive Web App) inside a iframe, it will work normal (saving Web Workers, offline availability, etc) or some features will be blocked?
I have a PWA that uses an iframe. It uses some pretty advanced features, including a web-worker (in addition to the service worker) that I implemented long before recently porting it over to a PWA. All of those features work the same, with the additional benefit of controlled caching of specified resources. I haven't seen anything in the documentation to suggest otherwise, and can honestly say it works amazing! So fast to load now, it's in the app drawer, etc., even installs and looks like a normal app on desktop. My only issue is the soft-keyboard overlaps in fullscreen, but there is a solution, I've seen it work.
My suggestion-- try it. It's pretty easy to set up. Test your features. I am sure you will be impressed.
I am working on Meteor app(e-commerce site), became very large. It almost takes 9secs to view static part of homepage till then it only shows white/blank screen. After that it starts showing data from DB(mongoDB). The whole site with data takes ~24secs to come at client side. I think the whole bundle is too much huge and that is why it takes more time to download. And it is causing 9secs of white screen. Any solution guys. Thanks in advance!
Alraedy Tried:
1. Fast Render(Flowrouter subscriptions) package
2. Appcache package
3. Query Optimization/Indexing
4. Removed global subscriptions
5. Sending minimal data via pub/sub
6. this.unblock() for publications
7. Not saving files in DB instead saving url's
You are working on an e-commerce website and so you might have a huge admin module bundled with your website. You should consider building the admin module as a separate Meteor app sharing the same Mongo DB collections with the e-commerce website. You can reduce the size of you app considerably using this approach. You can find more details here
You should also be really careful about your subscriptions and use pagination on the server side publications, subscribing to only what data is actually required
For starters, try to remove unused packages which aren't used anymore by any frontend code. Check your entire package.json and all imports.
Reduce the size of all you subscriptions, you probably have tons of them with entire or too big documents, which is easy while developing, but an overkill in production. Try to limit the fields and the amount of loaded objects to what you visualise for the user.
Don't wait for all subscriptions to finsih loading before showing something, load the website and it's design already, but only show a 'loading' icon on the parts that do require data to be shown dynamically.
Make sure your javascript is minified before it's published, this saves a lot of bandwidth.
After implementing these your load times should have decreased.
Providing a detailed network analytic from the debugger of your browser might also help to notcie problems.
I'm trying to better understand user experience by seeing what users are doing on the site. There are various tools out there that will work to track the clickstream, and record pageviews, generating heatmaps etc.
However, they don't seem to work with meteor. Since meteor is not even using ajax - it's data over sockets - and I think the tools do not support this newfangled magic.
I was wondering if anyone has found a remote recording/click tracking tool that works with meteor?
For example:
- http://www.luckyorange.com
who have a note here about hooking into the browsers XMLHttpRequest.prototype.open but that's not gonna work with meteor and more socket level protocols, it seems.
mouseflow.com also just recorded a white screen.
crazyegg.com doesn't even support ajax.
There are some other mobile specific tools like:
- http://www.uxrecorder.com/
but that would require native SDKs. First off I just want to put this up for the web.
There's one company https://lookback.io/explore who actually develop their desktop site in meteor, but they are mobile/iOS only :(
it's quite time consuming to try these out so it would be good to know anyone else's experience, eg:
http://www.getapp.com/alternatives/mouseflow-application
How are people doing remote usability testing of meteor sites?
Mouseflow does work with Meteor, though you might need to enable some extra features in the Mouseflow dashboard. The most notable would be the enhanced tracking mode, Session Support, which is necessary to track Meteor pages.
Additionally, it might be necessary to block some scripts from being loaded in playback, but that is something the Mouseflow crew can easily do from their end, if you contact them through the support links.
Disclaimer: I work for Mouseflow
After trying all the tools, I found inspectlet
http://www.inspectlet.com/
and had no problems integrating that with meteor. It's a new tool and seems to be designed from the start with Single Page apps in mind. Overall their tool is quite minimal but does the job really well and seems to work flawlessly with meteor. They're also a startup and were very responsive on other questions.
I created a small wrapper meteor package around Inspectlet and other a few other useful metrics toolkits, if anyone is interested I'll publish it to atmosphere (let me know here).
I have an Ajax.Net enabled ASP.Net 2.0 web site. Hosting for both the site and the database are out of my control as is the database's schema. In testing on hardware I do control the site performs well however on the client's hardware, there are noticeable delays when reloading or changing pages.
What I would like to do is make my application as compact and speedy as possible when I deliver it. One idea is to set expiration dates for all of the site's static resources so they aren't recalled on page loads. By resources I mean images, linked style sheets and JavaScript source files. Is there an easy way to do this?
What other ways are there to optimize a .Net web site?
UPDATE:
I've run YSlow on the site and the areas where I am getting hit the hardest are in the number of JavaScript and Style Sheets being loaded (23 JS files and 5 style sheets). All but one (the main style sheet) has been inserted by Ajax.net and Asp. Why so many?
Script Combining in .net 3.5 SP1
Best Practices for fast websites
HTTP Compression (gzip)
Compress JS / CSS (different than http compression, minify javascript)
YUI Compressor
.NET YUI Compressor
My best advice is to check out the YUI content. They have some great articles that talk about things like CSS sprites and have some nice javascript libraries to help reduce the number of requests the browser is making.
If you are using Firefox to test your website, you might want to try a nifty Firefox extension from Yahoo! called YSlow.
It analyzes your web pages and provides grades from A-F (A being the Best and F being the worst) for each of the best practices, for high performance websites. It will help you to track down the elements of your website which you could optimize to gain speedups.
UPDATE
Now YSlow extension is compatible with all modern browsers such as Firefox, Chrome, Opera, Safari and others, read more here.
Turn viewstate off by default, it will be a night and day difference on even the most simple pages.
I wrote a blog post about improving ASP.NET page performance this a couple months back. Here are some quick & easy ways -
Turn off view state
Turn off event validation
Implement HTTP gzip/deflate compression to reduce the response size (number of bytes the server has to send back to the client)
Try to optimize/minimize your database calls for each request
I think you really need to be able to get some actual PerfMon data/telemetry from the app whilst running in production to be able to make an enlightened decision about what to optimise.
As a throw away tip I'd make sure your app is deployed as a Release build and set debug="false" in the 'compilation' section of your web.config.
You seem to be starting by assuming that your problem is download size - that may not necessarily be the case. You should do some experimentation with your ASP.NET site to determine if there are areas in your code which are causing undue delays. If it turns out that download size is not your problem, you'll need to find ways to cache your results (look into output caching, which is an ASP.NET feature) or optimize your code.
In any case - the first step when looking at a performance issue is always to verify your assumptions first, then decide on a course of action.
Have you tried these tips?
http://weblogs.asp.net/haroonwaheed/archive/2008/06/30/ASP.NET-Performance-Tips.aspx
You could start looking at caching strategies. Static files like CSS (even compressed ones) and images (even optimized ones) should only need to be downloaded once by the browser for a period of time.
Scirpt combining for AJAX has already been mentioned, but I didn't notice reference to the ScriptReferenceProfiler MS has released on codeplex to help figure out what to combine. Mike Ormond has a good start point on this.
Another tip if you're doing a lot of INSERTs to your database is to double check your server's disk caching is switched on. Case in point, I had an data importer doing 1.2 million inserts during a run. Took 4 hours and change without caching on. Took 16 minutes with it on.
A general thing when using ASP.NET and Ajax (any Ajax library) together is to avoid elephanting your Page_Load and Page_Init (and their method counterparts) things since these will be executing on every Ajax Request.
When that is said I would seriously ditch ASP.NET AJAX and use anything else...
Anthem.NET, AjaxPRO.NET, jQuery or whatever else than ASP.NET AJAX...
Of course I would use Ra-Ajax myself since that's my project. But then again I am biased...
You could turn on compression based on your client supporting it. See this article: link text
Static resources shouldn't be resent unless changed. IIS will send a response code which tells the browser to use the cached version.
You could also look at ASP.NET output caching, which can be applied fairly granularly to different portions of your page:
http://msdn.microsoft.com/en-us/library/xsbfdd8c(VS.71).aspx