The Right Stuff: Breaking the PageSpeed Barrier with Bootstrap
1–10 of 34 posts
Re: The Right Stuff: Breaking the PageSpeed Barrier with Bootstrap
#2We have worked pretty hard to push the speed at which our mobile webpages load.
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.
Re: The Right Stuff: Breaking the PageSpeed Barrier with Bootstrap
#3We have worked pretty hard to push the speed at which our mobile webpages load. 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 hi…
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 Bootstrap
#4The blog post loads perceptively fast, but what I ran it through the PageSpeed tool, it came up very poor;
http://i.imgur.com/IBpar1y.png
Any ideas on the shortfalls of the ranking, areas where it's not accurate, etc?
Re: The Right Stuff: Breaking the PageSpeed Barrier with Bootstrap
#5While they do point out Ilya's comment in an update, it should be more central:
Here's a slightly modified MPS config that gets you to
100 without any manual work:
ModPageSpeed on
ModPagespeedRewriteLevel CoreFilters
ModPagespeedEnableFilters prioritize_critical_css
ModPagespeedEnableFilters defer_javascript
ModPagespeedEnableFilters sprite_images
ModPagespeedEnableFilters convert_png_to_jpeg
ModPagespeedEnableFilters convert_jpeg_to_webp
ModPagespeedEnableFilters collapse_whitespace
ModPagespeedEnableFilters remove_commentsmod_pagespeed can automate all those complicated steps.
(Disclaimer: I work on mod_pagespeed and ngx_pagespeed.)
Re: The Right Stuff: Breaking the PageSpeed Barrier with Bootstrap
#6While they do point out Ilya's comment in an update, it should be more central: Here's a slightly modified MPS config that gets you to 100 without any manual work: ModPageSpeed on ModPagespeedRewriteLevel CoreFilters ModPagespeedEnableFilters prioritize_critical_css ModPagespeedEnableFilters defer_javascript ModPagespeedEnableFilters sprite_images ModPagespeedEnableFilters convert_png_to_jpeg ModPagespeedEnableFilter…
Thank you, I can't wait to try this...
Re: The Right Stuff: Breaking the PageSpeed Barrier with Bootstrap
#7Food for thought: all this wisdom is really an attempt to prioritize how bits hit your browser and is very much due to legacy issues. These are hacks, albeit clever and measurably better.
HTTP2 when it comes (2014?) will negate the need to inline/concatenate CSS or cook up image sprites because it solves it at the proper level, the network layer.
Re: The Right Stuff: Breaking the PageSpeed Barrier with Bootstrap
#8We have worked pretty hard to push the speed at which our mobile webpages load. 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 hi…
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.
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 Bootstrap
#9We have worked pretty hard to push the speed at which our mobile webpages load. 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 hi…
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.
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 Bootstrap
#10While they do point out Ilya's comment in an update, it should be more central: Here's a slightly modified MPS config that gets you to 100 without any manual work: ModPageSpeed on ModPagespeedRewriteLevel CoreFilters ModPagespeedEnableFilters prioritize_critical_css ModPagespeedEnableFilters defer_javascript ModPagespeedEnableFilters sprite_images ModPagespeedEnableFilters convert_png_to_jpeg ModPagespeedEnableFilter…
Does mod_pagespeed work with Apache 2.4 now?