 still can't spell why not okay what come on all right come on actually this is looking different that was interesting this is looking better maybe they're paying attention to what we're doing I'm just gonna load it in in Firefox and have a look okay this is interesting the experience I'm getting in Firefox is very very different from what I'm seeing here in Chrome this is not always surprising because Chrome is kind of ahead of everyone else for the most part but let's bring a actually I'm on full screen so I'll need to check this around something tells me that actually show of hands what's your primary browser that you develop in Chrome Firefox Safari IE edge don't use any browsers and you don't know what we're doing here tonight I know from my own work that most of the devs use Chrome and that's fine because you'll have your default browser but making sure you test cross browsers are really important I'm gonna be really generous to sing till now and I'm just gonna refresh and do nothing more and first thing I'm noticing up the top is my menu is not there oh it's turned up at last I've just worked out what they're doing I've got a standard menu here which is nice actually there's some let's just do that quickly aha if you read developer specs for how to do menus you have to include a delay because if you see here I'm flicking over and the menu basically loads instantly and I can get a really nice like disco stuff like a going on if I do this it's going through a projector so the refresh rates not great if you ever doing a menu you need it I think it's about a 200 millisecond delay on if it's a hover menu so you don't trigger it in events like this this is a performance issue as well because I'm loading this into the DOM which means I'm having to refresh the browser and like cause causing a repaint and if I'm doing that every time I'm flicking through different menus then it's going to be a problem if you work on menus make sure you've got a delay otherwise I'll find out and be angry I'm dropping my browser screen down here and this is I think I'm about a thousand pixels wide here and you'll notice that I'm into hamburger menu territory already this is just ridiculous hamburger menus have been tested and debunked as any way of doing a menu if you're using one please replace it with the text menu if you're doing a multinational site there are translations out there if you have a hamburger menu the recognition rate is far less than a hundred percent so if you're happy for your menu not to be understood by most of your by a fair chunk of your users go ahead because who needs navigation to get around the site but this is pretty crazy from a single let me just refresh this actually we saw this before actually takes some time to load and now look at this I'm technically using a mobile as far as the single developers are concerned which is just bizarre the weirdness of this more than anything is the performance and his firefox with their own hamburger menu is why not I ran this through web page test to see how it went and a first bite time so this is when if someone requests the site how long it takes for the server to return the first bite so that's the first request bounce the server and back how quickly that happens you'd hope that's an a for any given server if it's anything other than that that means your server's got some problems and you probably should look into your host sometimes with some application architectures they can take some time to start up if they go to sleep between browser sessions like it's off peak that can also affect your first bite time generally a is good keep alive is something that was in HTTPS 1.2 anyone correcting me no under the way that HTTPS works basically it's a conversation I asked for something introduce myself please give me a glass of water here's your glass of water hi I'm Chris I'd like a glass of water so it gives me a glass of water hi I'm Chris I'd like another glass of water etc it's really messy with keep alive you can keep that channel open this allows parallel downloads so if you look at the way that browsers we can see the waterfall later on you can download more than one thing at once if you're doing web development in 90s there was no such thing every single request was a separate thing so you get the HTML then you get some one image and you get another image and then another and another and another by having keep alive enabled you can do parallel downloads which makes things a whole lot quicker compression they've got a B which is good that means they've turned on G zip for almost everything I'm sure there's something they've missed out here then we get into F to compress images which means they've not done any image compression whatsoever I find this can be difficult for developers and designers because trying to get the images compressed properly takes some work from both if you are only a developer if you don't have access to Photoshop Illustrator or sketch or something along those lines there's only so much that you can do in terms of image compression you really need an image editor on hand to actually do this properly so if you are in that situation you need to make sure that you educate your designers to understand how to optimize images properly because you can run an SVG through SVGGO you can use what's the ping one ping quaint or something like that but you can run them through every optimizer you like but if it's not been optimized from the image editor to start with there's only so much that you can actually do vice versa if you're a designer you can do a lot of work yourself but you need to have that last mile done by the developers too unfortunately that's really complex you can google it and find out what the best way of doing things up but it's still really complex because everyone needs to really be in sync with each other if you are a designer who codes then you can do it yourself and you know programmer who designs that's great but for everyone else it's really difficult the space that we're in at the moment is that there are some algorithms being developed especially with some machine learning and Google's made a bit of progress on this recently where images can be compressed programmatically so instead of having to manually tweak an image in Photoshop when you're exporting it you can rely on algorithms to drop them down and their current work is even with the best optimization techniques they can cut images down by a further third so in the long run you won't have to think about this anymore and machines will take over that thing for us Google are doing this live at the moment hopefully that kind of thing will become very common but you'll need an image server in essence instead of just pointing to a static image you'll need something to dynamically compress it for you it'll probably be just one extra thing in webpack or one of the other image the processing things gulp grunt it'll just be one more thing in your chain basically and then you won't have to think about image compression anymore so we're we're almost there it's complex now but the future is bright so that will save singtel in the future right now they're sending quite a bit we'll get into the details of that caching static content this one gets missed often static content is anything that's not dynamically generated that's images JavaScript CSS anything along those lines it's not processed on the fly you should be making sure that it's cached from one request to another this means if you do that properly once you've hit the first page on the site and navigate to another one then you won't have to reload all those resources again if you do it badly like singtel every single time you navigate around the site you have to grab it all again and that's really taxing it's taxing on your downloads because this site's really inefficiently built but anyone's it's always going to hurt that if you're on a mobile it's going to kill your battery you have to process all that again it's bad news this is a server setting basically if your server is set up right you don't have to think about it if your server is not set up right your singtel right details we've got a lot of stuff happening in parallel but there are so many different resources here this is crazy it's got to be at least ten years that we got told told to bundle our JavaScript together and things like this is a production site and this is madness there are so many separate files here you can see the parallelism coming into place these things are being requested at the same time but this is just insane I mean if you think without food delivery we've got four boxes here this is the equivalent of handing over each slice of pizza separately each piece of chicken separately and somehow like you know putting on separate delivery drivers orders all and it's just horribly inefficient alright let's get a bit further on actually what are we performance so we have issues with caching web page test is free by the way if you've got anything it's in production run it on your site and you'll learn they tell you exactly what's wrong and how to fix it even if you think you don't have performance problems then you probably do have performance problems because you're not paying enough attention to it this is a really fast way to learn they're not using a CDN CDNs can be really useful for static content once again if you're using cookies in any way anything on the same domain uses cookies to cookies can add we've got small files potentially here cookies can be several k and if you multiply how many files are we here 234 files so if I've got 5k of cookies let's assume there are 33 things that are not static 200 times 5 is way more than you want to have to think about so it's basically a meg just on cookies that you could lose by going to a static CDN they do have GZip compression turned on for some files but certainly not all and that's a problem content now this is where they get a bit interesting most sites these days are overladen with images I talked before about how difficult it is to compress images last month's talk CSS we had what was the projects you were doing with the geek path yeah Chion showed us like his best way of optimizing it an SVG by running it through illustrator using the ways I know like the magic law I dropped it by a third in size so it's complex but at the same and this is usually why images are the things that take up the most room so when you see here in terms of bite size over on the right images usually dominate in bite size however the number of requests usually up there as well so what we're seeing here is a massive amount of JavaScript coming through there's also a massive amount of HTML here I mean let's go back to the site but this is that's it like we had a coding challenge here and let you go nuts trying to recreate this you would not need nearly as many bites as they're using I might bump up the size of this actually so it's be easy to read we have 86 JavaScript requests which is amazing if you optimize everything correctly you should be down to about three so we're not even in the scale of where they should be there are 76 images on a home page I don't think a site should have 76 images honestly regardless of what you do maybe if you're a photo gallery then you'd have more than that HTML 24 separate files what we're seeing here is some of the dirty work of the JavaScript frameworks that are using because this is not actually optimized like they're not even deploying this in production mode it's in debug mode in production yeah so half the optimizations are not turned on because no one's actually found this out I did tweet them a couple of weeks ago when I found this and they chose not to respond to me because they chose not to 12 CSS files should be one maybe two other is probably who knows what that could be there are five fonts fonts are a really easy way to add weight to your site and slow things down ideally you should be dealing with three separate font weights and that's including families maybe four if you're really pushing it because fonts take up space you're looking at about 50 80k per font weights for a family so every time you add one you're adding that to the permanent load of the site and there's nothing you can undo about that once you're loading the thing so when a designer turns up and says hey let's add another font family you say hey no you're not because we'd like the site to load you need careful negotiation about it five is they kind of pushing it I mean compared to the other sins they're committing here it's nothing but it's still something you need to pay attention to there's no flash which is the one redeeming feature of this site yeah in terms of size yeah someone's still using flash this is only just recently launched this like revision on the site anyway bite size is something else we've got more images than other files spoke about compression is difficult that's not unusual as it is they've got 1.7 meg roughly of images for our home page which is madness we saw in the report that they're not compressing your images properly so you could properly drop that down to 300k perhaps depending on the images javascripts is 1.2 meg compressed and almost 4 meg uncompressed basically this means the development team has started with one library and said I could learn how to program that instead I'm just gonna Google and another library onto it and then another developer adds another library and another and another and eventually end up with 4 meg worth of javascripts thrown to people when you developing you won't see this except you will actually because your CPU will be going nuts when you have to send that down if I load this on my phone fortunately here in Singapore data is cheap in other countries it's not the case I know Singtel is a Singaporean company but this is costing them dearly just by having this and can cost customers dearly as well if you're in another country trying to access Singtel on your mobile and you're downloading 3 meg just to view their home page that's not great there is a site that you can actually find out how much websites cost to download according to different countries that's really useful to find out especially if you're targeting someone other than Singapore if you want to convince someone in your team that performance matters find out how much it costs say if you're deploying to Indonesia and you're deploying a site like this you're going to be costing real money to your clients just by loading your home page if you need the the drive from someone like that to convince them that performance makes a difference then a site like that can really turn them around unless they're sadistic and don't care there is 300 odd K of CSS which is 2.4 meg uncompressed I don't even know where to start like that's insane this is probably library artists again where they've just gone from one library on to another to another no doubt a lot of these libraries conflicting as they go a hundred and seven hundred and seven thousand bytes is a hundred K of HTML in 180 uncompressed but if your entire site is a hundred K you're doing all right having one page in your home page like this hey come back this is scary then we're into the other so let's dive deeper what we're getting here with SSL negotiations if you don't have SSL turned on then please do it does add time to the load but it makes your site remotely secure they've got a CDN from AWS they've got another CDN for Cloudflare because they're probably using a library we're hitting double click so they can start loading ads and this is within the first couple of seconds before the site's loaded the site takes 20 odd seconds in Firefox at least even this is Chrome in Singapore that I did this test on 20 seconds for the site to finish loading based on psychology you've got you humans can perceive 70 milliseconds of something if I flash like that anything that's within a 70 millisecond break you can actually perceive you'll really notice something that's longer than 200 milliseconds less than that takes the brain a little bit to catch up in practical terms if you're less than a second you can keep the attention of someone while they're doing something so if you're already on a site you're going from one page to another it needs to load in under a second ideally the home page should load in under a second too so when you go somewhere you're still on track if you take up to two seconds you're starting to lose the person's focus anywhere up to five seconds they're forgetting exactly what they are doing beyond that the person's lost track of what they're actually doing so they might be loading your site to pay their bill but by the time the site's actually finished loading they've forgotten what they're meant to be doing because it's taken so long to load so this is another aspect of why it's absolutely critical that your performance is taken care of okay more see it more directly so www.singtel.com, AWS CDN, we've got our support person which is coming this is a couple of seconds but the site's not even remotely rendered yet and they're loading the URLs for their live chat because that's more important than showing the site Google Analytics because they like to share all their data with Google Ajax from Google is probably another library maybe jQuery another Singtel domain they're going to Facebook and sharing all your data with Facebook more Google more sherry stuff site has actually started rendering at this point more sherry stuff ad servers double click that 73 requests later on check out here bandwidth utilization I've said the site's really heavy this is a desktop PC so this is not a mobile this is basically struggling let's bump that up so you can see that a bit better when the line is up here that means the CPU is maxed out and you think we're loading seven meg or something I think total so that's going to hit your bandwidth unless you're on fiber and then you're still probably going to notice at least a little bit beyond that the CPU is getting hammered we're loading so many libraries and so many things at once the the blocker is not really the bandwidth anymore although if you look along there's a drop between CPU and bandwidth both getting hammered at the same time if I'm loading this on a mobile phone then I'm killing the battery as well because the phone is going to start getting warm just to learn load the homepage the browser is also going absolutely nuts here because it's got so many different files loaded to it one of the key things to performance is you want to render as soon as possible and not touch it after that if you're using a single page framework like react to angular or something like that they use methods to speed this up react users shadow DOM which renders in parallel and but men injects at once they're not using anything like this because they're absolutely hammering the browser you can see whether the pages are actually interactive so into six seconds here starting to render but there's nothing I can interact with because my CPU is gone the crazy I've got a brief window where I might be able to see a menu but it's not really loaded yet so I'm still blocked again and eventually we're getting to 17 seconds before you can even interact with the page now you can lazy load to speed things up so you start rendering and let people interact with them they're doing the opposite of that state you want to re-contract now that you know how bad their site performance is and this as we get into the console they've got errors in the console for a production site which is scary one of those is a 404 and this is really hard to see I can actually increase font size they're using reactive to render reactive has been developed by a guardian to render the Guardian and it's really nice framework they're using point seven three in debug mode which is not great and it's also sending complaints what this tells me is no one is actually bothered testing this at some point so they've just pushed it live and and gotten on with it I'm sure they're under immense pressure to make this happen but as a customer I'm not very impressed at least as a developer I'm not very impressed either if we look at our JavaScript sources there is so much here actually we're getting to images here more images I've got a carousel actually let me just expand that there's a site so should I use a carousel.com if anyone wants to use a carousel send them there they'll learn that you should not use a carousel so this should be minified and merged together there's no way you should be seeing this this is basically someone's laundry being aired I think this is half of what's really going wrong here apart from the uncompressed images everywhere so with jQuery cookie so we're using jQuery as well as other libraries that compete with it I've seen before sites assembled in such a crazy way as this we are competing versions of jQuery on the same site and jQuery alone to load is enough to max out your CPU like just jQuery and if you're loading jQuery plus every other library you can think of then it's not going to get any better they've got some lazy loading going on here but the CPU is getting so badly hammered that it doesn't make a difference by the time the site is actually responsive enough to lazy load then the client's already gone off to get a copy we have polyfills we've got all sorts of crazy stuff I could dive further into it but I might kind of leave it around this point because we'll be here all night so the moral of the story out of this is don't deploy in debug mode test realize that responsive design means that you don't make you know desktop browsers have to use hamburger menus because that's just ridiculous this doesn't even look right it's even got a scroll on it because I don't have enough width to display otherwise at least I've got Shirley here except Shirley doesn't want to hello hey there we go this I mean if you're loading something like this you should be lazy load loading it only when you're actually interacting with it should you start loading libraries for it especially on a home page you've got to make things as fast as possible or you will lose your clients if you're selling something every hundred milliseconds you make someone wait you lose 1% of sales sing-tell sell things at least they try to I've been told the star hub site is also bad that can you just go away now Shirley thank you and I can't even dismiss this thing because I don't know what I'm doing all right so the question may be if you work at this company what can you do one of the things you can do is go to web page test and run it and show someone an F and show them that it's not right you can also throw studies at them throw them the Amazon study that you know speed cost sales and there have been several studies into this that show performance will cost you money if someone can't be swayed by losing you know a certain percentage of sales then they can't be swayed you probably need a new job but use evidence basically find the research papers throw them web page tests that way you'll hopefully be able to convince someone that you need to do something about it because if not for that then you're going to be stuck in a job where you're presenting things like singtell.com and maybe not feel that feel very highly about yourself that said if you know someone working for singtell he works on this I'd really love to hear about how you're going to fix it up all right now having done that I will open the floor to CSS doctor has anyone got any questions or anything that's plaguing them with CSS at the moment yeah okay sure web page test lets you control the environment a lot better I'm using a developer machine like this has got stacks of RAM it's got all sorts of things going on it's a really neutral test you can't I mean your first port of course should be using your DevTools but if you want a really neutral way you can control the bandwidth you can get it to test on a mobile the cruelest test you can do is really nah this is probably going to come up with a spam site now so you want to find something that's close to you there is Singapore so I'm being really fair here you've got Chrome IE or Firefox you can choose exactly what you want to do the cruelest thing to do where have we got actually is it in advanced I think it is you can choose your bandwidth you can set yourself down to 2g mobile you can run a number of tests which is a reasonable way of doing it because one test is not really enough to tell you if there's some intermittent fault I can't remember the location but there is a list of couple where you can actually get it to render on a mobile device as well they've got some old Android phones that you can test your site on so if you really want to show someone especially if you're targeting someone in Asia that's not Singapore most of your clients are going to be running off cheap Android on bad networks and this is a really great way of showing them what's going on in Chrome you've got bandwidth throttling so you can pretend that your bandwidth is not great but you can't make your CPU drop down well you probably could but it's a lot more effort whereas this is a nice neutral way of doing it you need to be in production it needs to be reached publicly for it to work so it's a bit late if you're a developer of the site looking at it in some ways but at the same time it they explain everything that's there and it's easy enough to work it out anyone else yes they're probably turning compression on incorrectly on images if you compress a JPEG you make it bigger if you use a zip on it because JPEG is already compressed it's not just image you can see it like for instance the font in others fonts yeah fonts the same you shouldn't compress fonts because they're already compressed other I don't know exactly what that is we could dive into it and find out but who knows yeah you've got to be careful when it's a service setting you do it once set up for the mime type you don't have to think about it again we've seen that whoever's configured the servers for Singtel doesn't seem to know what they're doing very well because they've made a lot of really basic mistakes in their config so the fact that they've turned on compression for things they shouldn't have there's no surprise any other questions comments CSS oddities all right yeah given that a media queries won't stop assets from loading given that they're running debug mode I wouldn't hope that they would when we can yeah actually that's one reason why you can set the in web page test you can set the browser string that's gonna take me too long to get into that now to look into it yes in theory you could reduce the assets you let on mobile but given what a dog's breakfast this is a doubt they are already color of the month with that contrast announcements has anyone got any announcements they'd like to make if you