Background:
We want to build a page that will use dynamic serving (different version for desktop, tablet and mobile).
Currently we think which of the two solutions will serve content faster and be better overall. I am thinking in context of serving it to different devices (desktop, tablet, mobile) using the same URL.
Dynamic serving sites: one URL that serves different HTML and CSS depending on the user agent.
source: http://www.vervesearch.com/blog/the-ultimate-guide-to-developing-mobile-websites/
Our main goal is speed. Then other things.
Solutions:
1) storing images as base64 in HTML
User enters a site. For example it contains 1-2 images that are pretty large. Images are embedded directly into HTML as base64. We have one minified JS file and one minified CSS file. So in ideal example we have - HTML that contains 1-2 large images (they can have up to 5MB). - one minified CSS file - one minified JS file
So... 3 requests
2) storing images in separate URLs
User enters a site. It contains 1-2 images stored in fastest possible external storage (sidenote: Can I store images as attachment in fastly?). We have one minified JS file and one minified CSS file.
So we have - HTML - one minified CSS file - one minified JS file - 1-2 images
So... 3 requests (HTML, JS, CSS) + 2 requests
5 requests
Questions:
Do we gain a lot of speed when using less HTTP calls (connection estabilish latency etc)? Is it worth it? Base64 encoding bloats image sizes by 33%. source: Should I embed images as data/base64 in CSS or HTML
Which solution/way is gonna work "better" (faster speed)? Is it possible to do "each" way?
Can I cache whole 'stuff' (html, js, css, images)? Will caching works (good for each customer/visitor) if I have a lot of sites to cache?
PS. If any question looks stupid - sorry we have a very hot discussion in our company and I want to provide all information.
