Dear Lord, people, please stop loading 14 zillion different domains every time I hit a web page.
It's trivial to get a single static HTML hello world page with no assets to load in 100ms.
CDNs are useful because they load content closest to where the user is located.
That's my understanding of it anyway.
(I.e. "This links points to this file - if you already have the file with this hash use it instead")
I have solved this problem myself by avoiding concatenation and using the browser's IndexedDB to store assets that can be loaded dynamically (JS, CSS, and client-side templates). Assets like this get downloaded over a WebSocket connection which provides the same advantage of SPDY in that no re-negotiation is necessary.
You can see the implementation of this here:
https://github.com/liftoff/GateOne/blob/master/gateone/core/...
...and the client side code is here:
https://github.com/liftoff/GateOne/blob/master/gateone/stati...
(Including the functions immediately following that one)
1.6 seconds is entirely too. fucking. slow.
Mobile browsers cache a LOT less after rendering than desktop browsers.
Death by a thousand small cuts, a single 2 second wait isn't objectionable, the entire app being that slow means literally every time I do something I wait 2 seconds. It cuts into your mental flow.
Did you see how much time was being used in multiple DNS requests?
To an end user, everything not on your domain is CRAP. It's not there for me, the end user. It's there for you, the website owner so you can aggregate my eyeballs, pitch me something, use somebody's comment service, extract advertising revenue, push network bandwidth onto Google, jQuery, etc.
2) Why on Earth do you need megabytes of images?
Really? WTF? Just because you took the picture with a gigapixel camera doesn't mean you need to serve every pixel.
3) Minimize the Javascript
No, you don't need that Javascript framework. Shoot it.
Especially on tablet/mobile browsers, a very small number of pages cache before the browser has to reload and regenerate (and that's REALLY slow).
The research is against you. Every extra 100ms is a significant drop in retention rate. Your website will stick out because everything is so snappy. Users can feel this--especially on tablets and mobile.
I just spent 20 minutes trying to find a link to an Apache function I found recently, which will join all your CSS or JS files together with something like an @include server-side automatically. Can't find it now but as I have been doing this manually I hope I find it again. Anyone know what this is? I seem to recall it was a native Apache function, not part of mod_pagespeed.
It's quite a common optimization to distribute assets on multiple domains. This is because only a limited number of connections are allowed to made per domain (changes with HTTP2).
Furthermore, a CDN often has a faster connection to the user and you might benefit from it already being in the cache on first connection.
We should test whether we should move the CSS back to the primary domain and pay the cookie uplift penalty to avoid the DNS and TCP penalty for that. (Another poster below rang that bell for me and it makes logical sense, but need to verify via testing.)
Yes, it's easy to make a page load quickly if you make "loading quickly" the most important design criteria. Then you just take out everything that would make it load slowly, like big beautiful pictures, or videos, or animated gifs.
The thing is, though, people really like to look at big beautiful pictures, and videos, and animated gifs. So if you want to give people what they want, then making a page load faster is not as easy as "just don't serve anything heavy."
Making HN load fast is easy. Making Flickr, or Buzzfeed, load fast is not. The minimum product weight is just always going to be heavier on sites that use more visuals.
Especially on tablet/mobile browsers, a very small number of pages cache before the browser has to reload and regenerate (and that's REALLY slow).
I have a bunch of websites that do "Cool Javascript Tricks" that I surf on iOS. The moment I switch a tab and switch back, the whole page loads again and takes almost 10-20 seconds.
About the Javascript, what happened to postponing its load to after the page is displayed?
I already do that.
> 2) Why on Earth do you need megabytes of images?
Because I don't want my website to look like Hacker News? It's great that Hacker News loads fast, but it's not exactly aesthetically pleasing.
And ever heard of retina displays? Having too low resolution images makes things blurry and ugly.
> Really? WTF? Just because you took the picture with a gigapixel camera doesn't mean you need to serve every pixel.
Okay, let's just limit it to 1200 pixels wide. That should look okay on a laptop, on a mobile device and on big monitor screens. If the image is 600 pixels high... that's a 2 MB uncompressed image right there. Compressed, maybe it's 500 KB. Show a few of them and voila, a few MB over the wire.
Making it less than 1200 pixels wide makes it look blurry on laptops and big monitor screens.
> 3) Minimize the Javascript
Dude, the Javascript I'm using is only 50 KB. That's a drop in the bucket compared to all the images.
You've been smug with your response, but you haven't given a single helpful tip. You're just assuming that anybody who doesn't succeed at the goal must be wrong and stupid.
> Show a few of them and voila, a few MB over the wire.
Show a few 1200x600 images?!?!? What are you doing? Dude, someone with a normal screen (1920x1080) cant even view 4 of those. They can't even view more than one without clipping.
If you want to scroll to them, then loading a lower-resolution version and then swapping in the higher resolution version is the right solution.
In addition, almost every mobile browser I have seen would force a reload every single time I swap to your page. They simply will not cache that much image data persistently.
You magically are smart enough to put the assets on the same domain, minimize your javascript, and yet are shipping around a number of pixels that is bigger than the average screen size. o_O!?
I'm beginning to think you're just trolling me.
QHD -- which will show four of those simultaneously -- isn't that uncommon on tablets (and even some smartphones, like the Note 4.)
I am reminded of all of these blog articles that start with one full screen picture that I have to scroll down to get to the first sentence. Generally, I just close the page when I see that because it indicates someone more interested in plastering my eyeballs than in giving me content.
If you do view-source, they also provide their stats: For me: <!-- Request ID: Pontus_25418_551cff14675926.65349173, Server time: 0,0369 s (C: 0,0302; Q: 5; 0,0018; E: 1; 0,0008 s, M: 12; 0,0046 s, A: 0; 0,0000 s), Mem: 5270 KB, User: CMG, Engines: (S) pontus (1) -->
http://www.sorryana.rocks/mavericks-wallpaper/
(which loads some content/initial display pretty fast, btw) -- even a full-screen image intended for the Apple Retina iMac is "just" ~3MB. And if you're going to fill the entire viewport (and then some) -- you'll not be needing a lot of other images...