 Thanks Rado for the nice introduction. You do make me look a little bit old with 20 years of wet experience. Well, welcome everybody. I'm happy that you joined my talk. And I wonder how you're all doing. How has work come so far? Yes! So, I do believe that today you already gained a lot of information. Already quite a few talks have been done. So, let's get into my talk about wet performance. My name is Mike Ryan. I love to make the web faster and more useful for everybody. I use and breathe the web for as long as I can remember and started WordPress since version 1. So, I mean, you saw that the flexibility and the potential of the platform was really nice to build websites for businesses and blogs and so on. This is our plan. I will talk about three areas on how to speed up your website. So, let's get started. If we look today, there are more than four billion people connected to the Internet today. Gives us quite a lot of power. If I look at the web developer, that gives us enormous reach to reach people via our website. Last month I was in Tokyo and that really also gave me the impression of how many people there are connected to the Internet today. This location over here is the Tsubuya Crossing. I was visiting Tokyo for a birth camp. At this crossing, there is an intersection. It's one of the most busiest crossings in the world. At one time, when the light turns green for the pedestrians, people start walking and there are over 2,000 people crossing the street at the same time. Tokyo is a very different culture, but they have one thing in common. That is they are in a mobile mindset. A mobile first mindset. At these days, we do everything in our mobile and shop. We do trips, we search the web. It's really important that our website loads fast. People expect that our website loads within a moment and seconds. According to research, 53% of your mobile site visitors will leave your site if it takes longer than 3 seconds to load. That means that you could use half of your customers before they even seen your site. If you look at the statistics and nowadays more and more visitors visit your website for mobile devices. This was in 2016, but nowadays it has grown even much, much more. All this data isn't lost on Google. They announced last July that they will use PageSpeak as a ranking factor on mobile searches. Knowing all of this, that web performance is important. It is also a ranking factor in Google. We should probably all rank on top of the Google searches. But in Houston we have a problem. As we continually push our websites to do more and more, to push more codes and more features into our website, we are only into performance issues. It takes an average of 15.3 seconds to load a mobile webpage. Considering that people leave your site if it takes more than 3 seconds to load, that's hard to show. According to research, Google found that 53% of our website is over 2 megabytes. The majority of that is JavaScript and images. The internet is getting heavier and heavier. Our devices might get faster, but if you look at the web itself, it just becomes slower. Our web pages have grown so big that today our web page is at the same size as the classic video game. They have become too slow with so many elements that we can just slow the pages. If you consider that the first person shooter I do is a 3D shooter with multiple level sound effects. Today we are still struggling to deliver a piece of web content in roughly the same size. That's quite interesting. All this weight is causing our websites to slow down and affect the user experience. If we look at the user, they don't measure our websites with speed. They don't measure it with their brain and their eyes. Google also knows this as well. They pay very much attention to the user experience. They want to make sure that the people that visit your website, that people can find answers to their questions as soon as possible. Google made a discovery some years ago. It's around 2006. Marissa Meyer at the time, vice president of Google. Her job was to redesign the full pages of Google. I think it's quite simple. There are not too many elements. But Marissa, she didn't have much knowledge about design and she didn't even know HTML. But one thing that she did know was how to test. So she did an AB test and asked several users if they would prefer to see 10 or 30 results in their searches. So users thought, well, 30 is better, right? Because more is better. So they opted for 30 results. Google implemented 30 results on some of their pages. But then the shock came. What they found out was pages with 30 results had traffic to them drop to a astonishing of 20%. After testing, they saw that the loading time of pages with 30 results was half a second slower and 20 results was faster. That small amount cost such a big drop in traffic. So if you look at all the big companies, they pay really a lot of attention to screens. Apple, Amazon, and so on. And it really impacts their sales. We might not make as much money as Amazon or Apple, but we want to use money. So it's important that we pay attention to optimizing our websites. If you ever want to do web performance optimization, I can advise you to check some case studies at WPO stats and all kinds of case studies how companies were able to increase their traffic and sales and two steps ahead. That's a little bit in the dark down there, right? Okay, but web performance. Where do we start, right? We built our website. We could go to Google, type in how to make your website faster, and we will end up with millions of results. Some of them will be good tips and good advices, but when we are just starting out, it doesn't make much sense. Because web performance is a journey. We discover the things that are slowing us down. And we do that to the constant process of measuring and optimizing and monitoring our website. So when you begin, we start by measuring. Basically what I think in web performance, and measurement is really important part of the overall web optimization. Well, luckily there are lots of tools out there on the web. Once they are freely available, you can use them to measure your website and find problems that are causing the website to slow down and set the starting points before starting the optimization website. Here, for example, GP metrics, all kinds of interesting metrics like total page size, another one Bingdom test, and showing the number of requests, our loot from the new website, and a web page test, it's like an industry standard for representation. You can see things like time to fight, all really nice metrics to see how your website is doing. But all these tools, they only tell half of the story, and they don't really tell how the user feels when they visit your website. And that's what's really important, because the users don't measure your website with a stopwatch, they measure it with their eyes and their brains, and they think about how it feels, how fast it feels. Take elevators, for example. Have you ever wondered why there are mirrors in elevators? Anybody? Oh, it could be. Now, elevators, mirrors in elevators are the greatest invention. When elevators were first introduced, they were really, really slow. And when people used them, they were standing in this fort, both in the fort walls, and yeah, they were complaining how slow elevators were. Because they had nothing better to do. They were just standing there and waiting. So, elevators started to come up with all kinds of solutions, how to speed up the engines and stuff like that, and what's really expensive to do. But then one engineer came up with a clever idea. He said, we are focusing on the wrong problem. We need to focus on the person inside the elevator. We need to focus on the user. So what they did, they installed mirrors in the elevator to get to distract the user and focus the attention on other things. Well, they put in the mirrors, and after a follow-up research, people said, wow, these elevators are so much faster. Well, the speed was exactly the same. So back to the web, how can we keep users engaged? Well, there are several metrics that help us to measure this. One of the metrics is first control page. This metric shows the first piece of content that is visible for a user, and the site is first loaded. So you want this content to show something interesting as soon as possible when they visit your website. You want to keep visitors engaged. You want to look at the loading sequence while optimizing your website. Preferably, you don't want to have a lot of wide loading screens when your website loads. We'll note the additional metric, Time to Interactive, that tells you when the website is actually ready, when it feels ready, and your user can start to interact with it. And that's what we should be optimizing for. So, continuing on. Now that we know what to look for, let's start to see what we can optimize and find the things that are so much better. For this, I'm going to be using my site projects. I'm running a travel blog called MiamiGuide, and I'm showing how I optimized this website and outrided the competition. First things first, I use a Lighthouse report to measure the performance of your current website at the time. Lighthouse is a really easy to use. It's available right in the browser. So it's very accessible, and it shows you the Time to Interactive, First Content for Paint, and all kinds of other useful tools. So at the time of testing, it was 6.5 seconds. Well, much too slow, considering that people leave your site and it takes more than 3 seconds to load. Another nice feature, when you scroll down the Lighthouse report, Google also gives you opportunities on what you need to optimize. Well, in this case, Google advises to use late loading for images. Late loading for images will be a native element in browsers, already in Internet Explorer, but so Chrome will be implemented soon. But for now, I'm using a WordPress blogging to measure those images. Well, just by using this blogging, I was able to optimize the website in 3.9 seconds. All right, finished. But not very much, because this is on desktop, and we are living in a mobile-only world, and people are visiting more and more from a mobile device. So what other things I did? I made sure that I had the reliable web host, all the new features, HTTP2, and running the latest version of PHP, and you should all be using the most modern version of PHP, and PHP 7, and very smart shows that it's twice as fast as the previous versions. Enabling GZ compression. GZ compression compresses your file sizes to over 70%, and that will help you to speed up your website and also save few on-games with it. Also making sure that the CDN is still configured, so that users from all over the world can access your website as fast as possible. Images, well, another thing that needs to be optimized, and it's really the low-paying fruit that you can optimize. I basically started using a browser-based app called Squish, which was introduced last week by Google. The tool itself is really, really small. On the first load, it's just 15 gigabytes, and it's really optimized your images by using the latest standards. JPEG, WebWP, and so on. An easier method is to use a plugin, an image file, if you don't have to worry at all, and Google on your website, maybe you have different editors that are uploading images, and it will be automatically compressed and optimized and still, and save the good quality standard image. Compress and cache everything you can on your website. I don't know what caching is, it basically takes a snapshot of your web content and stores it on your server and gets the information much, much quicker. Well, there are many plugins available to enable caching, and the plugins are still being supercached in three months, but they're not so great, and I'm using this one at the moment, and it's working out. Besides compression, we should make sure that our code is minified and merged. So if you don't do this, all your code is used in all the white spaces in between your code, and by minifying and merging, you combine them into a much smaller package for testing on the walls. This provides you to, makes this really easy to do. Well, I don't know about you, but most of the pages you don't need all the plugins and tools that are shown on the web page. Home page might not be the code that you're using on the content page. So we have a lot of code that's unnecessary in WordPress. You can see unused codes in Google DevTools in the Coverage tab. And by using this plugin, I'm able to disable individual plugins on separate pages so that I'm sure that I'm using only the necessary codes on that page. Well, testing again, I'm able to run much much faster on a mobile device. So I see that the loading sequence of the web page is simple. So besides optimizing new codes, we want to make sure that now that we have our web pages that it stays fast, we need to monitor our code on the website. Well, first thing is I advise you to implement a Google Search Console so that you can monitor what's going on. This screenshot shows an overview of your web pages and Google will also be able to understand where the pages are slow. You can find performance budgets so you can set the budget how fast your website needs to be and then it will tell you how much or each script and codes you can develop your site. Also in Google Analytics you will have an overview of your page speed score and you can have a quicker overview of all the individual pages how they are performing. So it's also really good to monitor your site. And then you can start benchmark testing with your competitors. Well, if you don't know who your competitors are, there is a website called similar web you can just enter your URL and it will show you your direct competitors. And by doing that you will step up against the competition and see what kind of how fast they are what kind of images they are how many images they are using and so on. And then you can rank on top of your page speed. So with all this I want to leave you with one final thought about web performance on the mobile web really really matters and by measuring and optimizing and monitoring our websites we can get fast and stay fast. Thank you for joining my talk. I have my slides here on my website you can download the slides from the link above and also I have some extra guides with several tips on how to speed up your websites. I believe this topic is also very broad and I only scratch the surface of what you can do to optimize your website. Basically you can look into the back end of the content for so many more optimizations that you can use. Okay, good luck. So, does anybody have any questions for me? Raise your hand if you would like to. Yeah, all questions, but good questions thank you. Your questions were what I did on the server side in caching there are a lot of things you can do on the back end side all these kind of things. Yeah, I have set up as well so I didn't want to do that detail and second question what kind of team I'm using well I'm using really a standard team it's the Vivi team what's basically a lot of people are using but yeah, through optimization you are able to speed up any websites you want. Great, any other questions? Any WordPress sites? This was a WordPress site specific WordPress site that is what do you mean? Do you mean when you can recommend something specific for WordPress websites? Okay, what do you mean? Well yeah, what is WordPress doing themselves to make WordPress performance? Is that what you mean? Yeah, well, that's a good question. WordPress is the WordPress community it's an open source community open code and they are really busy now at the moment to make WordPress more secure and performant and they set up a separate project for that the project type you can look into it on the WordPress website and there are a lot of big companies behind it even Google is involved and currently they are hiring WordPress developers to work for Google to help make the platform much more faster and secure so they are doing a lot there We have a couple more questions so we will share Thank you Thanks for the great talk actually just wanted to add a little thing to the question of this person actually within the WordPress we have some functions for example, you can have something that you can pick just the statements you can have like the URL, the file and then the people I think will save you a certain amount of queries which will be released because that's just standard but it's just nothing so it might be interesting for you to look into the code experiences if you don't have any questions you can find the link there yeah that's the old party that's important to Dr. Barthiel which I'm going to question a few more times but let's see I have one more question we met earlier I said I'd ask a question basically to do with the size of web pages right where do you draw the line between dealing with equipment and image size versus model you have a written area screen double size image yet that comes with a load image how do you deal with that specifically with WordPress yeah good question I would deal with images on different screens and devices WordPress is basically something out of the box in resource set images so that they load different image sizes for different devices so by enabling this you can use a bigger image for writing on screens and smaller images on mobile devices so it's basically that's already out of the box yeah source set images okay so in this wait for the microphone hi I want to ask you about who is making the team yeah so Google you say why use AMP because we have 5G coming out well 5G of course it's coming soon but that's not for a lot of countries like in the Asian countries that will take some time and besides I like AMP because you don't have to worry about performance and work as your pages are automatically fast so that's what I like about AMP pages automatically loading within one second is that answering your question or a little bit quite a lot yeah there are a lot of different yeah I think you see that in the countries infrastructure there really using these kind of we will see but most importantly is that your website is performing that it's within 3 seconds okay so question let's take our point of interpolating how are you catching up flights how is your tomorrow okay so make sure to keep my party thank you