CSSConf US 2014

Mejorando el rendimiento de los estilos CSS en el navegador

Patrick Hamann  · 

Transcripción

Extracto de la transcripción automática del vídeo realizada por YouTube.

so fuzzy thank you for having me pictures you inviting me Nicole Leah Chris this has been an amazing conference I've been amazed by the location and all of the guests and all the talks have been having so thank you so I'm Patrick Hammond as Jen mentioned

you can get me on twitter there and i'm here to talk to you today about CSS and the critical path now what does that mean i don't really know I hope you'll know what that means by the end of this talk so as done mentioned it's a talker it's

really a bit of a ruse I'm here CSS confer I'm actually here not really to talk to you about CSS but more about performance and importance but importantly how CSS is intertwined and tightly coupled with our critical path the path from which a browser

takes to render to our screen so have you haven't guessed already a work for the Guardian it's a national UK newspaper which is now a international media organization we have offices in New York Australia and London and and I work on the cool web team

there which were helping to make the next generation of the Guardian website we've spent the last 18 months completely re-engineering from scratch the Guardian website used to be before horrible large Java and monolithic application and we're now moving

to a mobile-first responsive website as Brad force one scrape coined the phrase planting the responsive seed it's very hard for large organizations to shift to responsive so actually we kind of took tiptoed along the way we first replace our end sub domain

with a responsive site which it's going to become the platform on the basis to take eventually hopefully this summer we're going to completely remove the old site and have one single platform and so today I'm going to talk to you about some of

the lessons I've learnt building this last month we broke a record at the Guardian we had 100 million unique users within the first month that makes us now one of the largest new yours I license in the world but on the flip side of that those 100 million

are being made up of accessing our site from over 6,000 different devices and our current platform the old site is there for 10 years wasn't designed they can't cater for this array of devices and it's just not acceptable what we are serving to

these devices and we had to do something about that but more importantly the site is extremely slow so here you'll see on the left-hand side our old site and the right-hand side our new site and the difference in the rendering speed between the two of

them just hit see how how what you think yourself so within three seconds we've finished painting and rendering and freely complete loading of the whole site whilst we're still chugging along on the outside and that that's a median average it takes

12 seconds to paint and finish loading of our website to the user now I just don't think that's acceptable and I hope you guys don't too but you know it's not just us at the Guardian see this problem use the low time expectations us as uses

our expectation of how fast a web site takes a render is reducing you know from 2,000 it was nine seconds all the way until 2012 it's just two seconds that your users expect your website to load in and again the problems not just ours this is for taken

from mates be archived or great Google initiative that they index data from the top two hundred thousand websites and I ran this query on big queries last month to ask ask it hey what is the speed index I eat the speed index is a metric that is in milliseconds

how fast your site takes the fully render and the top ten thousand websites the median average is nine thousand milliseconds right nine seconds whereas we know that our users want it to load in under two can you see where I'm going here with this so but

the Guardian you know how we have to relate this back to our business so when we are starting out on the new projects we surveyed 3,000 of our users and ask them about 17 core KPIs product indicators of which one of them was speed and unsurprisingly to me

those users rated speed as a feature the second most important thing only after easy to find content you'd hope on a news website that the content is easy to find although that did surprise the business though but it was great for me because allowed as

a leverage to really drill into them that we need to make this new platform fast and it's not just that as well there's have been a lot of HCI research recently that has gone into the fact that the cognitive levels of us as users how how we perceive

speed on machines this is taken from Illig agaric high-performance browser networking he works on the Google make web faster team it's a strongly advise you read that book but here it says that for a mission for us as uses for field that a machine is actually

functioning and working any action you perform must respond within a thousand milliseconds 1000 milliseconds and that's not just you can't just relate that to websites you can relate that at home I'm sitting on the couch on watching TV I change

the TV channel I want that TV that TV needs to respond within a thousand milliseconds for me to deem the machine working and after 10 seconds but my mental subconscious just moves on and that task is completely abandoned and so Tim cowlicks been talking about

this a lot recent so you talked so now we know that a thousand milliseconds is what we're trying to reach our website should render within a thousand milliseconds what if we were to set a budget to enforce that in our development workflow every new feature

[ ... ]

Nota: se han omitido las otras 2.712 palabras de la transcripción completa para cumplir con las normas de «uso razonable» de YouTube.