Breaking the 1000ms Time to Glass Mobile Barrier

Ilya Grigorik is extremely passionate about a web that works fast. Lucky for you, he works for Google's Make The Web Fast team, spending his days doing exactly that and as an advocate for performance best practices.

He stopped by SFHTML5 to outline the logistics behind building a mobile website that loads as quickly as possible. A site that not only renders in 1 second, but one that is also visible in 1 second. With hard statistics as evidence to show why this matters, Ilya discusses techniques to deliver a 1000 millisecond experience.

[ssperandeo]

Excellent talk. Great speaker. Invaluable knowledge. Well worth the full 45 minutes. Kudos

[dontlogin]

One of the best presentations I've seen in a while. Good job Ilya.

[pblakez]

this is spot on I have had a 350ms response rule of thumb since the mid 90's it was harder the with slow conn and slow web servers mobile(3G) is now similar speed to then

[daz]

Learned so much from this video, thanks!

[zeppelin]

You're right. I wasn't able to find this exact remix, so I just got the original one. Let me know if you ever find the exact one.

[AidanFoster]

I think the idea is you load "just enough" inline css to get something on the (mobile) screen as the wasted overhead of the inline css is less expensive in actual render time then another request. I'd love to know the time cost of that request if its a css file that's already cached...

I agree separate CSS for each page doesn't make sense but I think the idea is more like work out a glocal.css file that 90%+ usage on all pages and load "template" specific css for unique pages/applications.

[zeppelin]

The lead in song is 'Destroy the Dancefloor' by maXXXimum

[HolgerWinkelmann]

I'm wondering Ilya has spoken to the Angular.JS guys to make sure all the latency stuff ist covered in the right way?

[luckasfrigo]

What about the async attribute of the script tag, wouldn't it be enough to replace the code at 26:30?

[HolgerWinkelmann]

Specially as Youtube shows Misko's AngularJS talk on the right Sidebar ;-)

[ChristianAarRasmussen]

Where to get that awesome sticker he has on his laptop?

[Rekmesh]

Is there a specific remix name for this or something? I haven't been able to find this exact version yet.

[BywaterHQ]

Great video i learned a lot thanks for uploading :)

[ytiralc]

I feel like I've just been experimented on and all I can think is do no evil.

[zeppelin]

I couldn't find this exact remix :(

[bradconte]

Slide #31 was great (timeline of W3C Performance Timing), but it could be a bit more accurate:The attributes "responseEnd" and "domLoading" markers actually overlap in practice (ie, with "domLoading" coming first) because bytes on the wire are processed and parsed into the DOM on the fly. (You can actually view this in practice in your browser.) Not a big deal, but thinking of them as strictly sequential may cause you to mis-measure timing.

[GabeSumner]

I deleted the comment and posted an updated link. Sorry about that.

[pollacksify]

by no means do I know anything about public speaking (took a 101 course), but, what else are you suppose to do? I would rather do that then stand there totally complacent and stiff. I didn't mind how he presented it, i was more focused on the content then him.

[prwexler]

A couple of suggestions on presentation: avoid standing behind a table because it makes you pace, left to right. Also, avoid looking too much at your laptop computer monitor

[_CRiT_hits_]

Hey think I found the remix used in this video. It may not be exact, but it's pretty close.