 We all know how important it is to make a good first impression, especially on the web. When creating experiences on the web it's important that we make a good impression for our users We're going to research with just five seconds to grab the attention of our users. How fast your website loads is definitely the best impression you can make. So, I'm Mike Reinhardt, I'm a web developer from The Netherlands and I focus on building a faster web that works for everyone. Today there are about four billion people connected to the internet. There are more and more coming every day. It's really amazing to know how much power we have with WordPress enabling us to build almost anything we want to build. WordPress has given us all these amazing features and plugins and teams. It actually feels like a superpower being able to see how much reach we have. WordPress now consumes 30% of the whole internet. That's quite amazing. You can take about all the websites out there. 30% is running on WordPress. That's quite amazing. If you look around the web, there are huge sites that are running WordPress. For example, Mashable, TechCrunch, the next web. The list goes on and on. Here are just a few websites. Even the White House runs on WordPress. The same technology that us here use in the room is used by these kinds of sites, receiving millions of users. Obama is using WordPress. Even James Bond is on WordPress. It's a surprise to see every time how many sites WordPress is installed. You can also check on the WordPress itself. They have showcased all the sites that are being edited every day. You can check that out. Today I'm really glad that we came so far. It's the 15th anniversary. I'm really happy to be here. I think it's really cool that WordCamp Belfast is one of the only WordCamps... It's the only today. ...in the world. It's really amazing to be part of it. I've been using WordPress almost from the beginning, so around 2006. Immediately I saw the flexibility of WordPress. It could be much more than just blogging. When I first started, I just started with a personal blog, putting up family pictures. Quickly I found out I could use that as a full-blown CMS to build a company website. WordPress is allowing us to do more and more. By that, we are running into a common problem. That is WordPress and that's performance. We often hear that sites running WordPress tend to load slow. We are loading more and more assets, more resources than other sites. There are some reports out there that say WordPress is slow compared to other sites. We can definitely make WordPress a lot faster just by tweaking our sites with certain plugins and focusing on performance. With the community of WordPress, we will definitely be able to do that. What I will talk about today, I will give you a whirlwind tour of performance. I will talk about three main areas. We will talk first about why performance matters. According to statistics, nowadays almost half our web traffic coming to our websites is coming from a mobile device. People are using mobile for everything these days. I can see here in the public people checking their phones. We cannot leave our phones like five seconds because we need to check what's going on. We are constantly searching on the internet through our mobile phones. If I look at myself when I come home from work, I don't even look at my laptop anymore. I just take out my phone and start searching. According to a recent report, it was found out that maybe 60% of online searches is coming from mobile. Also, in your talk Ahmed, he also mentioned it. On the SEO, it's important to focus your website for mobile devices. This data isn't unnoticed by Google. Last month, they rolled out a mobile first index. For the first time, Google switched their search index to a mobile first index. It's still quite new and they are rolling it out country by country. They all notify web developers about when they have been switched to the mobile first index. It's extremely important for us that our website is mobile friendly. It's accessible on mobile devices. We can save a lot of headache by installing mobile friendly teams. There are a lot of teams out there today. That's one of the advantages of WordPress. We can switch our complete site to a mobile site. We just click on the button. Another important thing about the mobile first index is performance. Google is keeping on pushing us that our site performs fast on mobile. Speed is becoming more and more important every day. There are many reports out there. Most importantly, users expect their website to load instantly. They just want access to information as fast as possible. They don't want to wait with a loading screen. According to reports, 53% of your mobile site visitors will leave your site if it takes three seconds or longer to load. You could be losing half of your customers before they even see your site. So performance is definitely an issue. Today's fastest car. I don't know if anybody knows this car, but it's the new Roadster of Tesla. Elon Musk said it's the fastest car in the world. And it can go from 0 to 60 in less than two seconds. Nowadays most mobile sites aren't that fast. So the average load time of the mobile web is 15 seconds. That's far too slow if you consider that after three seconds people will just leave their site. Well, this is my first visit to Belfast. I was really curious to know more about it. I think it's a beautiful city, but before coming here I definitely want to know more about Belfast. So I thought let me search on Google what is there to see. Even the lowly planet says Belfast is the best place to visit in 2018. So I thought my hometown was the best place to visit. They're saying the same thing, right? So anyway, I thought let me put Belfast to the test and see how fast is Belfast. So I just loaded the website and tested my site from Google. And I think they have some work to do. Well, most importantly, they're not running WordPress. So there might be an issue. So if anybody here is responsible or maybe they can help them switch over, well, they have some work to do. The site is almost 15 seconds. They have this whole video loading in and already that is just about 10 megabytes big. So if anybody on a 3G connection, this will take forever to load. This is the total size, page size of Belfast, visit Belfast.com. Although it did say Belfast was the best place to come. They wanted to keep it up there for a while. Now if they would improve their site, it would definitely help to get more visitors to their website and to Belfast. And it's a new site as well. This is the new site. I think it looks really impressed. I really enjoy it. It has a great experience with great video and pictures. But somehow they need the ultimate. Well, WordPress is doing much better within 3 seconds. So that's excellent. That's because Mark peddles very quickly. He's doing a good job. There's not many pictures. Of more. So when it comes to the mobile web, speed and size matters. The average size of the web page, mobile web page today is a little bit above around 3 megabytes. And it's mainly caused by images, JavaScript. So the website is getting bigger. The mobile web is getting bigger and bigger each year. And today the file size of the mobile web is roughly, basically the same and even more than the original Game of Doom. So pages have grown into a lot of images and JavaScript. Too many elements. If you consider Doom, it's a first person shooter with 3D graphics, multiple levels, sound effects. And today we are still struggling in putting out a web page with the same size. It's quite amazing. Well, the good news is that 4G is now a global standard when it comes to measuring the mobile speeds. So it used to be 3G. But nowadays 4G is pretty much covered all over the world. So it helps us to speed up our websites. Well, user experience is not the only factor when it comes to global speeds. Google has announced that they will be rolling out the Google speed update, which will be live in July 2018. So they will take page speeds as a ranking factor for indexing your websites. So we just have the whole GDPR thing now. We have to start worrying about page speeds. Well, we have torches on it. Yeah, that's people's business. They also have a tool out there. It's called Google Scorecard. It helps you compare your sites, see how you stack up to the competition. They recommend that your mobile website loads in 5 seconds or less on a 3G device. So I did some comparison of the top websites running WordPress. You can see that it is quite possible to have your website loading within 5 seconds. So these are websites that have millions of visitors and they're a huge website. So it's not surprisingly that speed is very important for them. Because they load so fast. This was probably also why they become so big if you just look at Amazon and Google. If you ever want to do performance work to convince your team or your boss, there's a web page out there which is called WPO Stats. So there are multiple case studies and it's updated frequently. And lots of nice case studies like Pinterest after doing web performance or 15% increase in SEO, more engagement, conversions, so financial times. Well, these companies have all seen many benefits from optimizing their websites. So web performance is about retaining users, the faster your site loads, the longer people will stay on their sites. It's web performance is about user experience. It's about conversions, the faster your site loads. It will give our users more trust and it will make them easier to buy something on their site. But most importantly, web performance is about people because we won't help people find answers to their questions as fast as possible. So now that we've talked about why performance is so important, I will continue with web performance management. Because in my mind, web performance is measurements. It doesn't make sense. Before you start improving something, you need to know where you stand. There are many tools out there that you can use. So just to name a few, there are literally, I think, hundreds of tools that you can use. Once there's the page-to-page insights tool from Google, you have Unity Metrics, Payment Tools, also popular around the WordPress community, the web page test, Chrome developer tools, Lighthouse. Some of the tools were also mentioned in some of the other talks this weekend. I guess you are familiar with some of them. So I'm not going into detail of every tool, but I will just show some screenshots of what I like about them. A web page test is the standard for measuring performance. It gives a lot of detailed information. One of the metrics I like is the speed index. The speed index tells how fast your website is showing, how fast the content of your website is showing to the user. So it's really giving a user experience kind of metric for your website. You want to keep this as low as possible. For mobile, you want to be below 3 seconds. On the web page test, they talk in milliseconds, but you can say 3 seconds. The web page test has some other cool features. So we have the waterfall view. The waterfall view is how your site loads all the content, whether it's when you access the site. When looking at the waterfall view, you want to focus on the horizontal bar, the color of the bars. The shorter, the better. So we want to keep them as short as possible. So if you do performance work, you want to focus on the long bars and see how you can optimize it. The longer the bar, the longer the load times. Also, it will show some colorful bars. We have yellow in this case, which is also red. Yellow is for third-party scripts. Red is for scripts that cannot be found on files. All these figures and numbers, they're actually telling half of the story because it doesn't say anything what the user sees. So then another neat feature of web page test is the Filpster view, which actually shows what the user sees. And you can do some comparison. When optimizing your website, you can compare before and after. There are some hacks that you can use. So performance, there are lots of metrics involved. I listed here a few with the recommended sizes and load times. There are many more. I wish I could say that you should focus on one certain metric, but it really comes down to what you're after. For me, the most important element is when my hero image comes into picture and called to action. You can also, nowadays, set time stamps when your image is shown when the call to action button is there. So you really have to figure out what you're after and focus on that to improve it. So all these metrics, manual testing, you can do, but it takes a lot of time. So an easier way is to automate testing. There are many services out there that you can run automatic tests every day and see how your site is doing. By automating it, you can set budgets. And by doing that, you're basically setting a performance budget. So you could say my budget for total page size is 1.5 megabytes. And your site goes over that. You'll be automatically alerted, hey, your page size has increased. Go check it out. So that helps to keep our website performance. So how fast a website loads? I mean, how fast is fast enough? Well, personally, I look at my competition. I want to know how fast the competition loads. So I'm using SpeedCurve. They have a nice feature that you can benchmark your website compared to other websites. So if somebody is faster than me, I want to know why are they faster? Are they loading more resources or less resources? So that keeps you on top of the competition because at the end, the faster your website loads, the better your ranking will be in performance, user experience, and so on. So now that we've talked about measurements and find out the bottlenecks and know what we need to fix, I want to go over some web performance tips and tricks of what you can do today. For that, I will be saying about my own sites. What I already told you, I started blogging in 2006. And since then, I've built so many sites. But what I like is really about building travel blogs. So I built many travel blogs about all around the world. I'm really always interesting to find out new things in cities and to write about it. And one of the travel blogs I own is the Miami Tourist site. I'm also on Instagram. I really enjoy Miami. I've been there like once a year. And the best thing about having a travel blog becomes popular. You get free food and tickets to anywhere. So I'll be using my website as a case study here, what I did to optimize it and to upgrade to the competition. A little bit while back, I tested it on TestMySites. I tested this performing. There are many tools out there. There are a lot of advanced tools out there that you can use to give more detailed information. But what I like about TestMySites is that these tools will be used by your customer or your boss. And they will be coming to you with figures in red saying, hey, my site is not performing. Definitely check out your website on this tool because if you don't, your customer will pass. But I checked my site. It was loading in seven seconds, so that was average. So I decided to optimize it. Well, the first thing when it comes to performance is hosting. When looking for hosting, you want to make sure you have SSL, HTTP, HTTP2, PHP7. And also you might want to consider a CDN so that it's accessible from all around the world as fast as possible. I won't go into too much detail. But PHP7 definitely will make your website much faster and reports as shown. It can make your website almost twice as fast. Most of the performance work is done in the front-end because that's where most of the elements are loaded. You have all your images, HTML, JavaScript. When we think about performance, there's almost nothing that we can leave out because we don't want that. But when it comes to images, we definitely can improve a lot. 25% of our websites could save 250 kilobytes in images alone. There are many ways to check how, which image needs to be optimized. So the different tools will show by colors, HTTP insides, they will give a list of images and you can even immediately download the optimized images and upload them again to your site. I think I'll skip the image optimization slides because Abba talked so much about images. There is a great guide on the web by one of the Google developers of the Osami. He has great tips on how to optimize and which format you should use. There are so many plugins, optimized images, but when it comes to plugins, there are so many plugins out there and it makes you think which plugins should I use. So I've been reading a lot about Google is hiring web developers from WordPress and they are busy with a new project called TITES which is going to help WordPress users how to make better choices when it comes to plugins and teams. So in order to have our website more performant, reliable and secure. So when you're researching for plugins, they are thinking about adding an extra score. It could be the TITES score, but that will basically tell you if the plugin is reliable or not and if it will affect your load time. So a plugin I use is Image Optimizer. Right now I just check how many times the plugin has been downloaded and look at reviews if it is up to date. You can also do it manually. I use Image Optimizer on the Mac and save a lot of file size. Okay, we talked about how many minutes I have left. Do I have anything left? It will be four minutes. All right. When people complain that your website or their website is slow, one of the first things to check is time to first byte. You can see this actually right in your browser when you go to, I don't know if you're all using Chrome, but in Chrome you have the Chrome developer tools just by pressing Command Option Y. You can go to the Network tab and from the Timing tab you can see the time to first byte for mobile. You want to keep that below 200 milliseconds. When you set up a website it will basically look something like this out of the box. You have a lot of white space in your source code. If you view the source code on your web page it's not optimized. So what we want to do we want to minify our code, compress it, combine it, as much as possible. There are many tools out there, plugins that can help us with that. One of the most popular ones is W SuperCache and W3 TotalCache. They will basically turn your dynamic content into static content so that it will decrease the response time of your websites. There's another plugin called Auto Optimize which will help you to combine all the scripts so that the total packs will become much smaller. So when you have everything optimized your website will view your source code. It will look something like this. It's all compiled into really minified source code. Another thing you want to be checking is when optimizing my website to get it done from 7 seconds to 5 or 3 is the number of service requests. So when I check my site I still have 34 requests and I'll notice 1.5 megabyte of file size. So I like to travel light and it would be great if we wouldn't have to load everything on our web page that we don't need. When we install the plugin there are some pages that the plugin is not used like if we have a contact form that is only used in the contact page we don't need it on the home page. So I found this plugin, Plugin Load Filter. Plugin Load Filter basically lets you set where you want to load which plugin. So that you don't load unnecessary resources on pages that you don't use these kind of features. And you can set it per page and per plugin where you want what. This shows screen from screen which shows before and after optimizing your site what kind of impact the optimization has made so that you know if your work has any impact. So after doing all these things I was able to improve my site by 2 seconds. For me it was good enough to left in the green and it would be faster. I also suggest that you use multiple tools that your site is performing. I don't go for a hundred percent and I think you shouldn't waste your time getting them a hundred percent as long as it is within the green and it's fine. Oh there's more to life than increasing its speed either just leave your site like that and join the slow web movement or if you're still struggling increasing your website speed you could consider AMP. I don't know, probably it will split the room in two because I also know that people are against AMP they don't want to give all their control to Google. I was at an AMP conference beginning this year and I was really surprised by all the new features coming out. I've implemented AMP on my site and when I first started I was only able to create a very basic base but nowadays companies have built complete full-blown AMP pages that you can hardly tell the difference between a normal website and an AMP page. An AMP page loads instantly it's less than within a second especially for mobile that's perfect. There are several plugins for that as well the most popular one is AMP for WordPress built by Automatic. It will enable you to make your websites AMP. So when it comes to WordPress I really believe that with the power of the WordPress community and optimizing our website up to speed we can really grow our WordPress much much further and be running WordPress even further like 15% of the whole web. So I want you to just start optimizing your site today and you can never start soon enough. I have a free guide on my website to help you further improve your websites and I would be happy to be friends I'm on social media almost everywhere under my Twitter handle same name on all platforms. Well that's my talk and thank you for joining me today.