Re:The Right Stuff: Breaking the PageSpeed Barrier with Boot...
by untog on Wednesday December 18, 2013 @12:44PM
(#6929071)
Wait, you inline your JS and CSS? Doesn't that mean that the user has to re-download it with every page? I get the desire to have as few connections going as possible, but just be sensible about caching. First page load downloads the CSS + JS, subsequent page loads just serve it from cache.
Re:The Right Stuff: Breaking the PageSpeed Barrier with Boot...
by plorkyeran on Wednesday December 18, 2013 @01:06PM
(#6929240)
If the majority of your visitors only ever load one page then only the cold-cache scenario matters, and there's plenty of sites where that's the case. Even if your visitors do load multiple pages, if the cold cache load time is fast enough, does it matter that the subsequent pages aren't even faster?
This obviously doesn't work if you're serving up multiple megabytes of CSS+JS, but I suspect they're an order of magnitude or two short of that.
Re:The Right Stuff: Breaking the PageSpeed Barrier with Boot...
by zoj_bad on Wednesday December 18, 2013 @01:14PM
(#6929299)
We don't exactly inline the CSS. (Actually, to be perfectly honest, sometimes we do when that seems like the more efficient thing to do and there is no benefit of modularity to be got from CSS.) However, in general we actually construct the HEAD and CSS also through the server library using some logic and parameters.
Now, you are right, this means that from page to page, those 3-4 bytes might be the same and re-downloaded. However, we are focused on mobile phones and some of our user base is on crappy mobile phone browsers (Nokia phones that are still popular here) that have a bad caching system. So the trade off is between 3-4 bytes of CSS that is a repeat, versus a whole new request. And 3-4 bytes of CSS is not even noticeable. A request most defiantly is.
Re:The Right Stuff: Breaking the PageSpeed Barrier with Boot...
by Domenic_S on Wednesday December 18, 2013 @01:57PM
(#6929693)
How much CSS can you fit into 4 bytes?
Re:The Right Stuff: Breaking the PageSpeed Barrier with Boot...
by mh- on Wednesday December 18, 2013 @03:19PM
(#6930369)
a {}
Re:The Right Stuff: Breaking the PageSpeed Barrier with Boot...
by nfm on Wednesday December 18, 2013 @04:27PM
(#6930918)
Only if it's not gzipped :P That would bulk it up to more like 25 bytes.
Re:The Right Stuff: Breaking the PageSpeed Barrier with Boot...
by Klinky on Wednesday December 18, 2013 @03:01PM
(#6930215)
Maybe they meant kbytes?
Re:The Right Stuff: Breaking the PageSpeed Barrier with Boot...
by zoj_bad on Thursday December 19, 2013 @12:20AM
(#6933053)
Lol. Sorry KB! My bad!
Re:The Right Stuff: Breaking the PageSpeed Barrier with Boot...
by mtrpcic on Wednesday December 18, 2013 @01:05PM
(#6929223)
I agree with this. By inlining all the JS and CSS, you lose the entire benefit of the browser cache, making each HTTP request for a real page a lot larger.
Re:The Right Stuff: Breaking the PageSpeed Barrier with Boot...
by at-fates-hands on Wednesday December 18, 2013 @04:29PM
(#6930929)
Unless you're using snippets or partial views where you can load only what's needed (in terms of JS and CSS) on a given page.
In that instance, I can see an advantage for inlining it, but it sure doesn't make for attractive code. Priorities though - right?
Re:The Right Stuff: Breaking the PageSpeed Barrier with Boot...
by untog on Wednesday December 18, 2013 @07:13PM
(#6932000)
Even then, unless your partial views are barely ever repeated in different pages it still isn't worth it. And if they're barely ever repeated then there isn't much point in them being partial views.
Re:The Right Stuff: Breaking the PageSpeed Barrier with Boot...
by paulirish on Wednesday December 18, 2013 @05:03PM
(#6931177)
Love all of this. I'm always looking for well tuned sites like yours to showcase. Can you share a URL?
Re:The Right Stuff: Breaking the PageSpeed Barrier with Boot...
by nachteilig on Wednesday December 18, 2013 @02:27PM
(#6929940)
I just saw google recommending inlining small fragments of css/js in the newer pagespeed guidelines. This has definitely piqued my interest and I wondered if people were doing it, mainly because I'm never sure which side of the speed vs. proper semantics debate I want to be on.
Re:The Right Stuff: Breaking the PageSpeed Barrier with Boot...
by paulirish on Wednesday December 18, 2013 @02:59PM
(#6930190)
Semantically there is no difference between adding network requests for assets or inlining them, whether through data URIs or inline script/style tags. It's a fast vs slow debate. :)
In the interest of sharing...this is what has worked for us:
1. We don't have any references to external CSS and JS files. This means there is almost no reason for the browser to stop painting the webpage as soon as it starts getting the document or even fractions of it. This means that the user never gets impatient cause it seems that his device is doing nothing. I know this seems like a huge management hassle in terms of changing things, but we got over that by using a server side helper library that spits out the HTML of all the components based on certain input parameters. That way the HTML of the user interface is even more modular and centralized than CSS etc. Besides, it also makes the making of new pages a craft project of sticking different user interface blocks together.
2. All user-interface images for buttons and icons and all are in image sprites. So, an average page is just 2-3 requests. Also sprites once cached load beautifully. In fact, it also makes for a much more pleasing page load as opposed to some parts of the page coming in and some coming in a little bit later.
3. All background repeating images are make 1px thick and saved as optimized as JPEGS and then made part of the CSS with base64 encoding.
4. Of course we very aggressively cache and reduce DB calls and combine DB calls etc etc.
Having done all this, we find that our pages load...well more or less instantly at least with respect to what matters to an average human. But this instant loading is only on a network where the initial connection time is not relevant. On 2G & 3G even, all the optimizations in the world cant save you from the fact that the device takes a LONG time to just connect as Ilya Grigorik has mentioned in his presentation.