 Fe coi chi'n roi, yn teimlo chi ac yn ddweud i fynd i diwethaf Dei chi'n dod atllwch sydd mewn Mike Peade ac yn hwnnw'n dod i fynd i fynd i roi Siaradwch chi'r cymoedd yw'r pethau Ac byddwn i fyddoniaeth hefyd ymlaen Rydyn ni'n rhoi nhw i'n meddwl Felly iddoddi ddweud i wneud beth sy'n ddiwethaf Mae ydych chi fyddech llwyddi Mae'n gweld cyfleu rhywun yn y gweithreth Ond ddim i'n cael ei ddweud i fynd i'w ddweud Rwy'n cael ei chyfnodd, rwy'n cael ei ddwych, yna'r website ar y Lodiadau Lodol. Rwy'n cael ei ddwych ar y cyfnodd mewn adeiladol. Mae'r adeiladau llwyddiadol iawn. Mae'r adeiladau llwyddiadol yma yn y gweithi eich iddyn nhw'n gweithio'r adeiladau. Rwy'n cael ei gwaithio'r adeiladau eich iddyn nhw'n gweithio'r adeiladau... ..y hoffi yna'r cyfrannu hynny fel y ffordd. Mae'n mynd i gweithio gweithio'r cyfansion, mae gwaith i gweithio a ynddo dynol a'r ddefnyddio dynol. Mae'n oed yn ystod o'r gweithio'r cyfansion sydd mi'n cwrdd o'r gael. Mae'n gweithio'r cwestiynau gwneud o'r ddiweddar o'r cyfansiynau. Felly, mae'n dod o'r ddweud o'r ddyfodol, fe wnaeth bod wedi gweld ei fod yn rhaid oedd yn ei ddim yn iawn, a'u ddweud o'r gweithio'r ddweud o'r ddweud o'r gweithio'r ddweud. Ac hynny'n cael ei wneud y gwir i'r wneud amdano'r cyd-wyrd. Yn y bydd yw'n gweithio? Yn y bydd yw'n gweithio? Yn y bydd yw yw'n gweithio? Yn y bydd yw'n gweithio? Wrth ymwneud, mae'n ei ddweud yw'r ysgrifennu'r ysgrifennu, mae'n rhai ddweud yw'r ysgrifennu? Mae'r ysgrifennu'n rhai ddweud. Mae'n ddweud ond yw'r ysgrifennu, a mae'n debyg yw'r syniadau that every single second matters and we all have that frustration where you're waiting for the time that's going round waiting for a website to load. Not only does it equate to a really bad user experience if a website runs slowly but it also can impact on your SEO as well and I'm pretty sure you're aware that Google uses page loading speed as one of their ranking factors. So Google say for them we must deliver and render above the fold content to what people can see on their screen within one second. I mean that's pretty impressive but Google's got obviously a lot of clever people there that can be able to do that kind of stuff. But they say after one second the person starts thinking I'm waiting here, I'm waiting, I'm waiting and you know after two or three seconds people think this page is actually going to load at all. You know if you're on a train going home tonight and you've got a 3G connection you know you're thinking should I just cancel this page loading is it going to turn up at all. So there's a real risk that people will abandon the visit. There is a threshold where people will start leaving but for Google they say they want things being loaded within one second. So the HTTP archive, they've got some really useful reports on this kind of subject. This graph is, you can't really see the detail of this, it's over the past five years up until March 2016 and basically the average weight of a web page in the past year has increased by 12%. That's file size 12% in one year and that's looking at thousands and thousands of websites that they monitor and the actual weight of that is the average per page is 2MB per page. Home pages generally tend to be a bit more above that as well. Also you might be able to work out on this graph but the bottom line that's the number of HTTP requests or quite simply number of individual files being downloaded into the visitor's browser per page. Quite a lot of those files tend to be JavaScript files particularly in the last few years, jQuery responsive websites. We're relying a lot more on JavaScript and that you can quite often have lots of files with that. Images especially images with larger monitors people want to use bigger images and retina displays so that's also increasing that file size per page. Why does that matter? Over the past few years we've been trying to make websites load faster or load better on mobile devices. We all have responsive websites, we're trying to help people who use websites on their mobile phone but quite often we're testing websites in our own office whether the iPhone might be connected to the office Wi-Fi but how often do we get in the train and try to use our websites when you haven't got that optimum connection. On a 3G connection the initial request generally takes about half a second so that's before anything happens. You've always got a little bit of time lag anyway from mobile users who are not using the Wi-Fi network and also mobile phones as well generally can't download as many files in one go simultaneously on a desktop computer can. So what can we do about it? Well the first thing is test your website loading the speed and not just your home page but actually test. Look at different pages, look at your gallery page, look at your about page, the product pages so that's really important to give your website a proper thorough test. I will tweet this out and put these slides online next week so I will, you'll get a copy of these links if you want to use them. Just going quickly through, these are three services that I tend to use myself. The first one, Pingdom is a very basic quick tool if you're a bit of a beginner in this area that's a really good one to use. It just gives you a very quick summary of your website and you can see a bit about what's happening there. The Google one is actually really good for mobile testing. You can actually see on there how your website performs on mobile websites and it will give you some useful advice you can actually put into practice. And webpagetest.org, the third one in that list, that's the ultimate tool, the Swiss Army knife of website of speed testing. That's got so much useful stuff in there. There are others as well. There's GT metrics which I use occasionally sometimes and Katie did a good talk yesterday about Chrome browser and some of the hidden functions in that and you can actually do quite a lot of speed testing in Chrome as well. That's worth a look and check out her slides as well. This is Pingdom. I'm sure a few of you have used this already. Just giving you a number of requests that website, that page is loading, the load time of that page, page size and it gives you this waterfall down there as well so you can see when the files are loading within that sequence. I wouldn't worry too much about the performance score. This website has got a performance grade of 86 out of 100 but the different websites vary about how they actually calculate that score. Use it as a rough guide but don't worry too much about the detail of that. This next one is webpagetest.org. You can choose different browsers, you can emulate different speeds, you can choose different locations and you can choose London as well as a base for that. It's got some really advanced features in this and the one thing I really like about this is the recording of the loading sequence. You can really slow it down and see when different objects in your page are loading and that can be really useful for optimising your website, particularly if you're a developer and seeing the order of how things are loading there. I'm just going to talk about a few core techniques here that I tend to use. I'm literally just touching the basics of these kind of areas. The first one, looking at caching. I'm just going to show you an example website. This is a really, really content-heavy website. It's an internet site. When WordPress generates that page, when a visitor goes to that page, that page is going to be generated and it's going to generate a navigation menu at the top. There's a weather system widget up the top there as well. It's got the latest news articles, it's got the featured images, the thumbnails there. It's got comments on the right-hand side. There's the week's most popular news articles, the recently updated pages, it's got the events there, it's got the vacancies, tweets at the bottom. There's a lot going on there. Every single time that page is loaded, WordPress is having to generate all those bits together and that does take a bit of time to do. That's where caching comes in. If your web host and quite a few, particularly the WordPress specific web hosting companies now, they actually have caching options they can do on their end for you. I'm not going to cover this in any more depth. If you have that available to you, use that, be using that. It's a really, really good tool to be using. If you have a shared host and it's not WordPress specific, you may need to install your own caching plugin. I'll just quickly show you an example of one that I've used in the past and hypercache. It's a really simple plugin. You can just pretty much activate it and it works out the box without having to go through loads of options. There's others as well, WP Supercache and it's a paid one WP rocket. There's actually lots of other tools out there now. Have a look, see which one works for you and just have a little explore around. Right, I'm going to go into a real example now just to show you what the impact of that actually does. This is a theme. It's not the shelf premium theme. I've imported all the demo data into this website. It's really poorly optimised. It's not good at all. We're going to run it through a few different stages with some of these techniques. Put it through Pingdom and you can see it's coming up there. It's loading about 79 different files. It's taking just over five seconds to load. It's about six megabytes and that's just loading the demo content of how that's awful. That theme has set this up. Now, if you want to suggest before you run a test, if you're going to use say, on this example, I'm going to now activate hypercache, what I would say is when you're logged into the WordPress website, your CND, the real pages, not through the cache generally, with that plugin certainly. What I'd suggest is then open a private window where you're logged out and then go to a few pages so the cache pages actually get generated first. Then run it through a tool like Pingdom. Also, I'd suggest running a web test, a speed test several times as well. You'll quite often get just little tiny differences in the speed time of these when you run these tools. Just looking at this one, literally all I've done is activate hypercache in this one. You can see straight away just saving about three quarters of a second. With that Internet site example I showed you, you would certainly see a much, much bigger difference than that. Some of this does depend on your web host as well, which I'll come on to. Just taking that example, so we've saved straight away about 13% of the loading time, and that's just by activating a plugin. Just as a quicker site, you also have what's called local caching, and that's where files are stored on a user's computer. A bit like a temporary Internet files effectively is what they are. CSS files and maybe images, especially things like your logo and your website, those don't change very often, so if you've got a website where people are coming time and time again, you can just instruct that browser to save a copy of those files so that next time a visitor comes to your website, those files are already stored on the user's computer. Various ways to do this, and different plugins will do this kind of thing, but this is my preferred way, which is using your .htaccess file on your web server, but have a look around and see what method works for you. There's various different ways you can do this. The next method I'm going to look at is combining files. I said this theme that I've just, the basis of the one I've installed here, was not very well optimised. This is showing some of the resources it's actually loading. You won't be able to see the detail of this, but there's loads and loads of CSS files, there's lots of JavaScript files here, and that's going to take time to load all those different files. It's particularly an issue with a lot of these premium themes that you find on them that you can buy when quite often they try to do everything and they load different sliders and different features, so just be wary of that. Obviously, the developers amongst you who develop your own themes, this won't be so much of an issue, but this is more really for people who use third party themes. To try to speed up the loading time, the idea is to combine these into as few files as possible, and that reduces the number of HTTP requests between the browser and the web server, effectively how many files the user has to download to view your website. Just tallying up what we got at the moment, 23 different CSS files and 35 JavaScript files, that's a pretty bloated website. You don't generally see things quite as bad as that. All I've done here is activate it as a plug-in, and what that's done is actually combined, let's say a lot of the files, and here it's got different CSS files, into one, it's basically one file, so it's combining them into one file, it's one download rather than a dozen different downloads. With that, we've taken it down from 23 to six style files and taken it down from 35 to 12 JavaScript files just by using a plug-in, which I'll come on to. The other thing, you can do it at the same time, it's called minification, and that's stripping out all the unnecessary characters in your files, such as line breaks and comments, and it's all those little things that doesn't actually make any difference to how the web page doesn't make a difference to how it looks or it renders. Things like comments in files are just there for your benefit, really. You can just strip those out in all those empty spaces. At the top one, that's just a nice formatted file at the bottom, it's taken out all the nice formatting stuff in the codes. It probably won't normally save more than a few kilobytes of doing that, but still every little help square with this. This is an example of a plug-in, a better WordPress Minify, and if you do a search on webpress.org, you will find lots of different plug-ins now that do this. This is one of the early ones that started doing this, and you can then combine, it will automatically combine your files, you can exclude certain files if you don't want them to be combined. The thing I would say if your activation isn't a premium theme, one that you've got from a third party, always do a test to make sure this is run properly, and particularly test it in Internet Explorer because you can sometimes have a few issues with this. Let's put it back through the speed test, so that's where we were after the cache wasn't added. It's about four and a half seconds before we do this, before we activate this plug-in better WordPress Minify, and just by running that plug-in, activating that, we've now got another half a second saving. Usually in this case, it's actually saved a lot of, in terms of the overhead, the actual data, large data saving as well. That's not normally the case you'd see with this, with this particular theme, there's obviously stuff going on there, but there's been a good, a good speed saving, and that's just by activating that plug-in. Adding this together, adding the caching, and to combining the files, we've saved about a quarter of that time now, of that page loading, just very, very simply, and very, very little effort that's been needed so far. Next thing, I'm going to look at our images, and we look at this demo theme, and it's a big large image on the homepage there, and just having a look at that theme, and it's pretty poor, the picture itself, and this is a demo content loaded with that theme. It's over one megabyte for that image, which is pretty, pretty big. So we'll resize that, we'll compress it down, so I'm resizing, about reducing the size of the picture, doesn't have to be 2,000 pixels wide. Compressing is about using, say, a JPEG or a PNG compression technique. The programme I've demoed here is called Riot's Editor, a free picture editor, but any, you know, most desktop programmes you'll probably all have your own favourites to use for this. There's also tinypng.com, it does some incredible magic, it really reduces files, images down so much, so that's definitely worth a look at that. So that one image, compressing that down and resizing it, that's, you know, been a big, big file size saving as a data transfer that is reduced right down. Keith Devon did a talk yesterday about using responsive images, and I know he's put his slides on today, so it's definitely worth having a look at his slides too, because that covers another area about responsive images. So I've gone through, I've optimised a few of the other images on that demo content, on that theme as well, and we can then see it's taken another about half a second off that loading time, but most importantly as well, it's also taken from four megabytes down to a megabyte of that size, so on, especially on mobile devices on 3G connections or 2G connections, that will certainly be a much, much bigger saving than just a half second. So adding that all together, and that was all pretty quick stuff, you could do that, you know, in half hour, those three or less than that probably, those three different techniques. We've basically saved about a third of the time, so from about five seconds to about three and a half seconds. This is starting from a theme that isn't really that well optimised anyway, so you can get that time down a lot more on other themes, and it's quite a bloated theme there, but it just shows you how easy it is to do this kind of stuff. Some more considerations with images. What I see some of the customers are doing, they would use as a wordpress, within the editor, they'll just drag the picture from that size to a smaller size, thinking it's resizing the picture of what they can see, but it's still loading that full-size image. The other thing that sometimes people do is they put full-size digital camera pictures into their websites, and you could be talking maybe five megabytes per picture, so it's really important to educate your customers, or if you're doing websites yourself, to make sure your pictures are being edited before you put them onto your website. There are also plugins out there that will basically resize and compress your pictures automatically on upload, and there's various different plugins and techniques you can do with that. Sliders, these are not good for web speed, and I think that's probably pretty obvious. They generally load some quite large images on your page. The module itself normally loads quite a few JavaScript files and style files. Research also shows that people generally only see the first slides. They don't wait for it to go ticking round every 10 seconds to a new picture. They rarely work well on mobile. Quite a few people ignore them completely because they look like an advert, and also they push your main content further down the page when you want to get your key information up the top of the page. If you're thinking about website speeds as well as usability, just think really, do you need that website slider on your homepage? Something else as well, parallax effects and images, they can also really increase the amount of data used in the loading sequence of your website. I'm not saying don't use parallax background images completely, but don't go over the top with them because they will add quite a lot of weight into your page. Another just a quick technique as well, image sprites, and this is where you combine images, generally quite small images, into one single image file, and this again reduces the number of HTTP requests. You can have maybe a series of dozen or so pictures or small icons within one image file. So it can be quite an effective technique. So here we've got on this example six different icons there. When you put the mouse over they actually roll over to another version of the icon as well. So in effect on this screen here you've got 12 different images being loaded. So you can combine them arguably actually in this case you could probably use an SVG file or technique for this, but that's another topic completely ready. But these are pretty good normally for things like logos and that kind of thing. So all it basically is, the icons get combined into one single image file and then use a bit of code which will actually then display portions of that larger image file. So it's a good technique to use, and yeah it says it's basically called image, image sprites. There is a tool that I can recommend, sprite pad. Developers you'll probably have different tools that you use yourself in your own workflow, but this has a free account for this one and it's a really nice tool. You can add your pictures in and then just drag them and it generates the code for you. So it's a really nice little technique. The other thing you're probably quite familiar with is icon fonts. And these are quite good if you just want generic icons. They're a good option for those kinds of little icons you just need and things like on here you've got shopping cart icons that kind of thing. They do scale pretty well. They render very quickly. They're pretty well supported. But Sarah did a talk yesterday about using SVG, so the Scalable Vector Graphics. The more advanced of you we'll probably want to explore that. So that's covered images, just quickly going through a few other little bits. It's pretty obvious your web host plays a big, big part in the load time of your website. If you're talking to a UK audience and your web server is in America and you're paying $4 a month for that, the chances are that website probably won't load as fast as a hosting solution. That's a bit better. You want to read a low contention ratio, not cheap hosting, where those servers have been crammed full of websites. So performance also goes hand in hand with reliability too. Social share buttons. You might have widgets and buttons and stuff on your website and it shows you how many Facebook likes you've got for that particular page. Just bear mind those kind of things can hog performance too, because it's having to then send a request to the Facebook server and back again. I like this little plug-in. This is quite a good one. It's a really, really small plug-in, really small script. Or you could even use something like the font or some web font. I showed you in another slide. They have social media icons in there as well. Bit more technical for those more advanced views in WordPress. Developers, think about the ordering of your code. So load essential things first. That's pretty obvious. Really good example. It's not WordPress sites, but the BBC and The Guardian, they put so much time into this and they're very much leading the way. So they really want to text a load as quickly as possible. All the other things like fancy clickable things and images can come a second later, but it's all about getting the headline, getting the text and displaying. Something else you might want to have a look at, data URIs. The best way to describe that is an image saved as HTML codes within your HTML file. Just Google it and have a little look. That might be right if you've got maybe small icons and stuff. It's perhaps worth a look. That can help performance because it's loading. It's not loading any external images in your page. CDNs, content delivery networks. If you are targeting a UK audience, then, and not a global audience, CDN might not actually be the best solution for you. In fact, it can actually degrade harm performance. If you run a global website, then yes, CDNs are great, but if you're using a CDN, try doing load tests with CDN off and CDN on and just seeing what works good for you. And also cron jobs and maintenance. Sometimes you'll wait for a visitor to go to the website for WordPress to do its maintenance tasks, and that might be things like cleaning the cache, checking for plug-in updates. It's best to run scheduled tasks from the server itself so that you can actually see not impacting on the performance time when a visitor goes to that web page. So it's a huge, huge area, this. Just touched on a few techniques. Hopefully this gives you a better inspiration to think about your own websites, loading speeds, give it a test, have a look at what you can do, how you can squeeze out that bit of extra time. I showed you earlier how easy it is to take your websites speed down by a third, saying that example, but just have a little play round, use a search engine, have a look at what other people are doing, have a look at some of the techniques, and just see what works good for your website. And I'll share these slides online later in the week so if you look at the website or Twitter, Facebook. Adam, thank you very much. Okay, thanks Mike, that was great. Do we have any questions? Come on, we've got a hand up here. How do you see something like Cloudflare fitting into that process? I have benchmarked Cloudflare before. I actually found it didn't help with the performance, but again, every snow is going to be different I think with that, and I was Cloudflare doing also things like security, filtering and firewall stuff, but the examples I was looking at, it didn't really help too much in the benchmarking that I looked at. Particularly, say for instance, the web servers that I sometimes use, they're based say in the Midlands in the UK, where you can get things to people quickly, they're on the main trunk routes of the UK. And say Cloudflare might be going for the DNS and going to a server location, maybe somewhere else. So I would say always these things test them, just do your testing really on these kind of examples, see what works well. If you've got a global website, then yeah, those kind of things are really, really good. You don't want your audience in Japan or America loading it from someone like Derby, that's probably not going to help them. But yeah, every snow is different really with that kind of stuff. So you didn't see it slowing down the website but it didn't help, but you could argue that the security benefits are important as well? You could definitely argue that, yeah, definitely. I did see one since it slowed it down a bit, but I'm sure this example is where it could actually make it faster. It just depends on the website, the audience and that, but yeah, security benefits are definitely also a consideration with that. I'll let you guys sort it all out. Thanks for that, great. Two questions. One is if you're focused on a UK audience and you've got your DNS hosting say Canada, which is where I happen to use my DNS hosting, do you think that has a negative impact? It could do. I mean the thing with DNS is that your ISP will then cache the DNS records anyway. But I think yeah, I can't see it helping. I'm not sure if it would be too much of a negative thing, but use a tool to say like Pingdom, you'll see on the very first line a time to connect and if that's their second just to get the connection to that website before any files start downloading, that could be an issue then. Yeah, I can't say it being a positive thing, but it might not be too bad with the... Do you host your website files within the UK with your DNS? Yep, they're hosted in the UK, but the DNS is in Canada at Hover. If you, because I've looked at Pingdom's timings, any ideas for troubleshooting DNS specifically or drilling into DNS timing specifically? Use something like the web page test so we can actually look at seeing what that's doing, but unless you manage your own, unless you're really into that server, admin yourself really cool, the things you can do really then is actually just looking at your hosting company, seeing what they can do. Yeah, that's, if you've got issues with that, that could be on their site looking at stuff, but yeah, I couldn't give you too much info on the second DNS stuff on my feed. This is an embarrassing confession, but I was troubleshooting a site that was running unusually slowly recently and it wasn't until we realised we'd left debug on. That we realised why we were two seconds slower than we should have been. So we saved two seconds just by turning debug off. Fantastic, I should have put on a slide with that. Sorry, it's not a follow on question really. What requirements or checklist or something would you give to your server people and say, look, this is what I want? Obviously there's WP engine, there's a few providers here at the moment, but do you, I'm not saying you should recommend one over the other. What I'm saying is what requirements would you give them? What's your top 10 things you should say? I want this, I want this, I want that. Okay, so it depends on the website itself, but let's say that recently we launched a website for a global company, but a typical shed host was not going to be good for them. They needed dedicated RAM. Things like that was actually going to really, that makes a huge, huge difference to running that website. Again, I'm not going to be very non-committal with this, but it will depend on the situation a bit. But yeah, if you're talking about big name, big brand, high traffic websites, you've got to pick a solution that is good for them. Things like PHP 7 and stuff, that's not my kind of area more as a front-end developer, but those kind of things, I know for a fact, those things help speed websites up. Looking at the database engine as well, that's a crucial part, particularly some of the old traditional web hosting companies, they're much more geared up for static HTML-style websites. You can run benchmarks on stuff, even in WordPress, there's a plugin I was using recently that will benchmark the PHP query times and the MySQL connections, and it'll basically create loads of entries, delete the entries, run different benchmarks stuff through. So you can use that kind of stuff as well to see how the hosting provider is dealing with that, really. Anybody else? Hi, Eds. More of just a side note, because you mentioned browser caching, so just as a tip that I picked up, if you put a query in the variable when you include your style sheets in JavaScript and that you can put that to the current view next time, then the browser always thinks it's a different file, I'm going to always get it, and it's really handy if you're dealing with clients, because they might not know how to refresh, or clear their cache, whatever, so that's handy. Yeah, that's really good. Yeah, really good. And you don't have to go into the HT access then, and any other questions or tips or stuff people want to share? Anyone? Yep. One over there. Hi. I use some of these tools. Thanks for reminding me of some of the others. But when I was trying to get things below the fold, in Qscripts and CSS, certain plug-ins don't like that. Gravity forms is an example. Is there a way of pushing as much below the fold, but then going back to certain plug-ins and saying, actually, you could go in the header if you have to? Yeah, the plug-in I showed you there, better web-press minify, was it that I think? What that would do is scan what resources are being loaded, and then you can selectively put some, say, up the top in the head area, some in the bottom, but you can selectively take out individual files, take them out of the combining completely if you have to, or you can re-order them. You can actually, as long as the theme is designed well, and three more, for example, putting the resources without putting it through the proper loop process. But yeah, that plug-in, if you run that, that will probably help with that situation. Thank you. Yeah, one here. What about HTTP versus HTTPS? Will that have any positive or negative impact on this? It's a really good question, that, actually. I looked at some benchmarking stuff with this. Generally, people would say HTTPS is going to slow things down, but actually it's evidence to say that's not the case, and it would depend a bit on the hosting as well, how they cope with that. There's probably not much in it with the speed stuff, actually, now. I wouldn't worry too much about the speed stuff with that, and I think, like the earlier points, security, while speed is good, security is also good. I wouldn't worry too much about the overheads of HTTPS rather than box standards and HTTP and anybody else. You've got away with it, mate. That was brilliant. Thank you very much. Thank you. Put your hands together for my key.