6 ms·

If you can tell me how to make a decent looking site with a few MB of images load in 200 ms, I'm all ears. The only method I can think of, is by making the webs

If you can tell me how to make a decent looking site with a few MB of images load in 200 ms, I'm all ears. The only method I can think of, is by making the website ugly (i.e. few images and other design assets).

Nux 12y ago
Ever heard of "less is more"?
bsder 12y ago
1) Put your assets on the same domain. 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.
- tombrossman 12y ago
  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.
  - moehm 12y ago
    Do you mean modconcat? [0] There is also a nginx version by Alibaba available. [1] [0] https://code.google.com/p/modconcat/ https://code.google.com/p/modconcat/ [1] https://github.com/alibaba/nginx-http-concat https://github.com/alibaba/nginx-http-concat
    - tombrossman 12y ago
      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.
      - e12e 12y ago
        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.
  - snowwrestler 12y ago
    Wordpress has a number of caching plugins that will do this at the application layer.
- toothbrush 12y ago
  Can't agree with this more.
- dtech 12y ago
  > 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.
  - tedunangst 12y ago
    That was about five years ago. all the browsers should support six or more connections now.
    - sokoloff 12y ago
      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.)
- snowwrestler 12y ago
  > 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.
- troels 12y ago
  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?
  - bsder 12y ago
    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.
- marcosdumay 12y ago
  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?
- FooBarWidget 12y ago
  > 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.
  - bsder 12y ago
    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.
    - dragonwriter 12y ago
      > 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.)
NKCSS 12y ago
Try the dutch tech site http://tweakers.net/ http://tweakers.net/ it's one of the best sites in terms of page speed vs complexity and shows what can be done if you just do it right. If you do view-source, they also provide their stats: For me: 
- tombrossman 12y ago
  Looks good and it is fast, but there are plenty of improvements to be made according to their Pingdom score: http://tools.pingdom.com/fpt/#!/bALFWp/http://tweakers.net/ http://tools.pingdom.com/fpt/#!/bALFWp/http://tweakers.net/ Surprised to see a total of 91 requests, for example.
realusername 12y ago
Maybe that's part of the issue, websites don't needs 5MB worth of images to look good.
- FooBarWidget 12y ago
  If your definition of "good" is Reddit and Hacker News, or a mostly text website like a blog, then yeah.
tomjen3 12y ago
Concentrate on the CSS and HTML, then have the images loaded in after. That way it will look like the site has loaded quick and the images are what takes most of the time, anyway.
maybeathrowaway 12y ago
Examples of those necessary images? A few MB is a lot unless you are talking about an artist's portfolio.
- e12e 12y ago
  Even then, MBs on first page load is a lot. Judging from: http://www.sorryana.rocks/mavericks-wallpaper/ 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...

Nux 12y ago

Ever heard of "less is more"?

bsder 12y ago

1) Put your assets on the same domain. 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.

tombrossman 12y ago
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.
- moehm 12y ago
  Do you mean modconcat? [0] There is also a nginx version by Alibaba available. [1] [0] https://code.google.com/p/modconcat/ https://code.google.com/p/modconcat/ [1] https://github.com/alibaba/nginx-http-concat https://github.com/alibaba/nginx-http-concat
  - tombrossman 12y ago
    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.
    - e12e 12y ago
      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.
- snowwrestler 12y ago
  Wordpress has a number of caching plugins that will do this at the application layer.
toothbrush 12y ago
Can't agree with this more.
dtech 12y ago
> 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.
- tedunangst 12y ago
  That was about five years ago. all the browsers should support six or more connections now.
  - sokoloff 12y ago
    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.)
snowwrestler 12y ago
> 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.
troels 12y ago
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?
- bsder 12y ago
  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.
marcosdumay 12y ago
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?
FooBarWidget 12y ago
> 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.
- bsder 12y ago
  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.
  - dragonwriter 12y ago
    > 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.)

NKCSS 12y ago

Try the dutch tech site http://tweakers.net/ http://tweakers.net/ it's one of the best sites in terms of page speed vs complexity and shows what can be done if you just do it right. If you do view-source, they also provide their stats: For me:

tombrossman 12y ago
Looks good and it is fast, but there are plenty of improvements to be made according to their Pingdom score: http://tools.pingdom.com/fpt/#!/bALFWp/http://tweakers.net/ http://tools.pingdom.com/fpt/#!/bALFWp/http://tweakers.net/ Surprised to see a total of 91 requests, for example.

realusername 12y ago

Maybe that's part of the issue, websites don't needs 5MB worth of images to look good.

FooBarWidget 12y ago
If your definition of "good" is Reddit and Hacker News, or a mostly text website like a blog, then yeah.

tomjen3 12y ago

Concentrate on the CSS and HTML, then have the images loaded in after. That way it will look like the site has loaded quick and the images are what takes most of the time, anyway.

maybeathrowaway 12y ago

Examples of those necessary images? A few MB is a lot unless you are talking about an artist's portfolio.

e12e 12y ago
Even then, MBs on first page load is a lot. Judging from: http://www.sorryana.rocks/mavericks-wallpaper/ 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...