1 useful hack that will help you speed up your Meteor app

If you do not have an asset-heavy marketing page(s) that can be separated from your core application, you can stop reading further.

A month or so ago, my MVP for Count us in, an online invitation web-app was ready for release but the landing page was light and thus aesthetically barebones. Google Analytics data and feedback from users showed that users were coming in but a large percentage were not making it past the landing page.
It looked like the next step was to create a beautiful landing page build trust and engagement. But, these would require large images and possibly large js/css libraries, which were not required for my core-app.

Meteor packages most of your assets into your web-app and delivers it to the requesting browser. This creates the amazing fast, snappy experience that you are used to with Meteor apps.

However, that increases the initial load time.

Further, more connections to the Meteor app. means more Meteor server-load — which impacts your core app.’s latency.

There is a very good discussion thread about this on the Meteor Forum

Similar to my situation described above, what if you have a heavy landing page for new users, but has little to no value for returning/logged-in users? Do you really want to package all those assets with your core app? Probably not, and it makes sense not to.

What you can do instead is separate your marketing page(s) from your core app such that they are not part of the core package. Here is what I did for Count us in, my online invitation service (you can see it in action by logging in and out of the application).

Technical Specs

Webserver: Nginx, Version: 1.4.6
OS: Ubuntu, Version: 14.04
Framework: Meteor, Version: 1.4

Process

Let’s say your Meteor app resides under the directory: /home/myapp/

Step 1

For your entire marketing microsite, create a separate directory outside /myapp, eg: /home/marketing/lp

Here is what we are looking to do: Redirect the user from the core app to your microsite based on specific rules.

Once your microsite design is complete, add the following configuration to nginx configuration file (default location of this file would be: /etc/nginx/sites-available/myapp)

location /lp/ {
root /home/marketing/lp;
expires 30d;
}

The expires parameter controls browser caching. You probably want your asset-heavy marketing page to be cached because:

1. It will significantly decrease page latency for returning visitors.
2. Assets will likely be static and change infrequently.

Side note: Make sure you are not controlling caching for your core app. in Nginx. Meteor will do this for you and there is a known issue if you try to control cache in Nginx for your core app.

Once you have made this change, confirm that it’s working correctly by going to www.mydomain.com/lp in your browser.

Step 2

I made the design decision to take my user first to the core app, check if they are logged in and only redirect them to the marketing page if they are not logged in. This introduces some latency but removes an additional step for logged in users. In my opinion, the trade off was worth making.

So, this is what added to my Meteor template:

{{#if currentUser}}
{{> my_app_template}}
{{else}}
http://www.mydomain.com/lp/index.html

’” />

There may be a better way to do this through FlowRouter, but I am not aware of one yet since all the FlowRouter controls I am familiar with are related to the routing within the core-app.

Note

There are other ways to achieve similar separation. I’ll write about them another time. Related, I also realized that a simple separation won’t work if you have international traffic (i.e. away from where your servers are located). To handle that, you’ll need a CDN.

Hosting everything on a CDN reduces the cost of packing your marketing page with Meteor app.

I’ll cover that in a separate blog.

Risks

Risks/downsides worth keeping mind:

• Redirect from core-app to marketing page introduces latency. Not doing so, creates an extra step for logged in-users
• Additional server side work required for creating as well as maintaining separation.
• Your landing page is not directly connected to your app. so it makes it harder to maintain state from landing page into the app. Eg: Doing affiliate marketing (though, it is possible to do so).
• Mobile: When you publish a mobile app using Meteor/Cordova —it uses a Webview to render your application. In this scenario, a redirect is not supported and will not work. You should not need your marketing page in-app but you will need to account for, and write logic to, do the outlined redirect only on desktop and mobile web.