Hacker News Reader

> Why on Earth do you need megabytes of images?

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.

Agree with the above comments about reducing bloat, and I'm surprised by the number of smart people who think nothing of setting up a Wordpress site with dozens of CSS and JS files.

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.

Do you mean modconcat? [0] There is also a nginx version by Alibaba available. [1]

[0] https://code.google.com/p/modconcat/

[1] https://github.com/alibaba/nginx-http-concat

Nah, found that while searching for the other. I can probably use that, though. The one I'm thinking of had you putting a short instruction at the top of the file (like @include) if you wanted it to be part of the output file. Maybe I'm not remembering this correctly as I can find nothing on it now.

Server Side Includes? (mod_include for apache, mod_ssi for some others)? Not sure I'd recommend that as a general solution today -- for static sites I think you're better of building the static html, and serve that up. With varnish, you might want to look at edge-side includes.

Wordpress has a number of caching plugins that will do this at the application layer.

> 1) Put your assets on the same domain.

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.

That was about five years ago. all the browsers should support six or more connections now.

We use a cookieless domain for most of our static content (as the name implies, to avoid sending cookies on those requests, which helps the desktop case a little bit, but helps the mobile use case a lot). We originally did it because of the 2 connections per origin limit, but left it in place once that went away and was replaced with a huge uptick in mobile users.

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.)

> 1) Put your assets on the same domain.

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.

Smug? No, I simply stated based upon what I see every day.

> 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.

> Show a few 1200x600 images?!?!? What are you doing? Dude, someone with a normal screen (1920x1080) cant even view 4 of those.

QHD -- which will show four of those simultaneously -- isn't that uncommon on tablets (and even some smartphones, like the Note 4.)

And if I'm on a smartphone I don't want you transmitting megabytes of images, thanks.

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.

Not everybody thinks that way. Lots of readers prefer to see the full screen picture. To me, it's more aesthetic and invites me to read on.

    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).

Haven't heard this before, but it sounds reasonable. Do you have any references for this?

Sorry, no reference other than me. :) Just personal experience on Chrome on iOS.

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.

I'm a fan of simple sites, but no, a small png with just a couple of colors will already take something on the order of 100kB. A couple of MB for images isn't something that people can work around - their site will be different if they avoid it.

About the Javascript, what happened to postponing its load to after the page is displayed?

Can't agree with this more.