Website code improvements

[PaintNinja]

The https://mods.io/ website is already very well made (no really, it's miles better than sites like PlanetMinecraft which are using really old code), but it could still do with some improvements to ensure maximum performance and better compatibility with future and past browsers. Most of these code changes are minor, but it seems to make a big positive impact.

Use flip ahead so that modern browsers can pre-render/preload the next page

Using this will improve performance on most modern browsers, not just IE.

http://msdn.microsoft.com/en-us/library/ie/jj883726%28v=vs.85%29.aspx

Note: If you find it difficult to implement flip ahead, just use pre-render for the next page instead like so:

<link rel="prerender" href="https://mods.io/mods?page=2&query=CHANGEME" />

then on page 2 you pre-render page 3, etc...

Add OS intergration

Yes, I know this won't make the site quicker, but it allows you to make your site icon look better for stuff such as your site being pinned to the start screen or task bar with just two lines of code. If you really want, you could have your own custom jumplists for mods.io which take you to the dashboard, homepage, etc...

http://www.buildmypinnedsite.com/

Prevent IE compatibility mode

With IE compatibility mode sometimes turning on, on IE10 and lower, your site sometimes ends up looking bad and going slow. This is IE's fault, but you can fix it by configuring nginx to tell IE (and only IE) to not use compatibility mode.

server {
  #...
  add_header X-UA-Compatible "IE=Edge";
}

Since you're using HTML5, preventing compatibility mode will actually fix your website with old IE, rather than breaking it.

[pushrax]

Thanks for the tips. Some comments:

1. Prefetch is redundant there, since the resources are already in the queue to be loaded. The reason you might use prefetch is to start loading resources for another page the user is likely to navigate to. The dns-prefetch line is also redundant, since DNS will already be resolved for the root domain.
2. We can definitely add some link tags for flip-ahead, sure.
3. What does it look like now?
4. Just added X-UA-Compatible at the application level, thanks for the tip.

[PaintNinja]

1. Prefetch can also be used to force the web browser to keep the specified resources in the cache even if caching is disabled (therefore reducing the amount of data required to download next time), the only issue is you need to do it on all your pages on the website for it to be effective. Oh, and don't forget to Prefetch your fonts, they seem to use a lot of data (1MB). The DNS Prefetch line will prevent the browser from performing another DNS lookup when visiting another page on the same domain, which can occur on some modern web browsers, allowing for your site to load up to 500ms faster than if you didn't use DNS prefetching.
2. Yes please! :)
3. It currently looks fine on the taskbar, but on the start screen it has a large white border around the icon. On both the taskbar and the start screen, there are no jump lists nor notification/live tile features, and the title is your browser title is too long. I suggest making your browser title just "mods.io" without the "" and the description.
4. You're welcome.

[pushrax]

I'm not sure what you mean by "even if caching is disabled." If a client does disable caching for some morbid reason, I don't really think it's necessary to optimize for them. I also can't find any spec that discusses this. Prefetching fonts is kinda reasonable, but I've never seen it done in practise since you don't know which font file (eot, ttf, etc) the client will need until it parses the CSS.

I don't see why browsers would perform extra DNS lookups if the TTL is set to a reasonable value. I have not known this to ever occur – in fact most of the time their aggressive caching is more annoying than anything else. In any case, our DNS should respond extremely quickly worldwide.

I struggle to find any well-known sites that use prefetching, and it honestly seems like a pretty niche tool that is only applicable to a few edge cases.

If I have time I'll find a Windows VM to fix the Windows 8 issues.

[PaintNinja]

I've done a bit of research and prefetching does in fact improve performance because it uses the cache more efficiently. http://davidwalsh.name/html5-prefetch

By the way, that article is a bit outdated, so please use prerender instead of prefetching whole pages if you're going to do that.

I'm not sure, but you should be able to prefetch your fonts using Feature Detection and then prefetching the compatible fonts for the web browser in use.

My mistake, you're right that browsers don't perform extra dns lookups. Your DNS responds really fast, but unfortunately some people have really slow ping times of over 500ms. I still recommend dns prefetching though, as it can be a big performance improvement for those with slow ping times. Maybe dns Prefetch your fastly server?

Bing US pre-renders, prefetches and dns-prefetches websites in its search results. Try searching for Wikipedia on http://bing.com/account/action?scope=web&setmkt=en-US&setplang=en-us&setlang=en-us and wait a few seconds before clicking the wikipedia search result. It should show up instantly.

Google search also use pre-fetching and pre-render, but only for search results.

You can get VMs and BrowserStack at http://modern.ie/

[pushrax]

I think you're getting the wrong idea about what prefetching is for. Rather than using it to load resources already on the page, it should be used to load resources on pages the user is probably going to navigate to later. This is why Bing/Google prefetch search results, but not their stylesheets and JS etc. The same applies to DNS prefetching – if you expect that users will normally navigate to a certain page after the current one, you can prefetch the DNS to reduce the latency for that navigation.

[PaintNinja]

Ah, I must've misunderstood what prefetching is for. Thanks for explaining it clearly, sorry about that.

Could you please add flip-ahead and OS intergration?