 Next up, we have Mike Reinhardt from Rotterdam, the Netherlands. He's a web designer helping people build a fast web that works for everyone. Mike has been developing with WordPress since 2007. Over time, he has branched out his skill with responsive design and a passion for web performance. So let's hear Mike's talk, a deep dive into WordPress performance. Welcome to the world for the great introduction. So welcome. My name is Mike Reinhardt. I'm a web developer, a web designer. I'm from Rotterdam, the Netherlands. As you can see here in the back, that's my hometown. It's also a harbor city. Konnichiwa. Today, I'm going to talk about web performance. I'm going to talk about three areas on how to speed up your website. So let's dive right in on why speed matters. So why speed matters? Well, today we live in a world where milliseconds matter. Speed is very important. We want our websites to load as fast as possible. First impressions are made in seconds. And our users are moving fast. They're always on the go. Disting our websites from their mobile phones. And they want our websites to load instantly. So how fast your website loads is absolutely the first impression you give to the user. One out of two people expect a web page to load in less than two seconds. According to Google, 53% of website visitors will leave your site if it takes longer than three seconds to load. So you could be losing half of your visitors before they even have seen your site. Speed matters. If you look at the user experience of speed, our users take care of the most important feature is speed. So it's all the way on top of the UX hierarchy. Basically, if your web page is too slow, if it doesn't load at all, then basically they cannot use your website. So we need to make sure that our website loads fast. If you look at some of the big companies like Google, Amazon, they really pay a lot of attention to speed. For instance, Amazon discovered that just by making their websites 100 milliseconds slower, they lost 1% in sales. That's like billions of dollars for Amazon. Maybe we are not making so much money as Amazon, but still, who wants to lose money, right? And there are many more case studies where performance saw a lot of improvements on conversions and sales. So a good website to check is WPOstat, which is a website that lists all kinds of case studies from big companies that saw major improvements of performance. Speed matters. Time is money. The faster our website loads, the more visitors that will attract to your website, and the more visitors that will also keep your web visitors more engaged. They stay longer on your page and eventually lead to more conversions and more sales, so more money. Time is money. So knowing that speed is important, that we can make more money, keep users engaged, we all should be having a fast loading website and rank on top of all the web pages out there. But how are we actually doing? By knowing all this, well, we're not doing that great. We actually kind of suck. It takes about 15 seconds for a mobile web page to load on a 3G network. So if you're considering that if people leave within 3 seconds, you could be losing a lot of your customers. As the web evolved, if we look back from the beginning, so web 1.0, we didn't pay much attention to speed, because we were too busy with experimenting stuff and trying to push the limits of our websites and computers. But as the web evolved, our web pages became bigger and bigger. According to Google, 53% of our web page is now more than 2 megabytes, consisting mainly of JavaScript and images. So our web page has grown so big that now it's about the same size as the game Doom. I don't know if anybody knows here the game Doom, but it's a 3D first-person shooter with 3 graphics, multiple levels, sound effects. And we are still struggling today to serve webpages with content in the same size. And this causes our web pages to slow down and affecting, at the end, the user experience. Because users don't measure web speeds with a stopwatch. They measure it with their eyes, their brains, how they perceive the web page loads, so how fast a website feels. Google is obsessed with speed, because it's directly connected to the user experience. Going back in 2006, they discovered a secret. Marissa Meyer, at that time, vice president of Google, she was hired to improve the experience of the search page. Marissa didn't have much knowledge about HTML or design, but she knew one thing, and that is A-B testing. So what she did, she started a user experience research, and she asked the users, hey, would you like to see 10 results or 30 results? Well, the answer was quite obvious. Of course, 30 results. More is more, right? So they did the test, and at the end, after the test, they showed half of the visitors a web page with 30 results, any other half with 10 results. After the test, they were shocked. What they saw was that the page with 30 results got 20% less traffic. They saw a drop in visitors and also in searches. People were searching less on the page with 30 results. How could it be, right? They did what the users wanted. They said, okay, we give them 30 results, that's better. But by looking closer at this test, they found out by just half a second in low time between the page with 10 results and 30 results ended up in half a second more low time, which caused users to not to engage and to leave the site. So from that moment on, they really invested in speed, and from that point on, that was history. They managed to speed up their search results. With speed, Google has been pushing speed for quite a long time. In the beginning, nobody was paying much of attention. They started 2006, 2010. They said Google will start taking speed as a ranking factor in webpages. And just last July, they announced that they were using page speeds in mobile rankings. Because what Google says is quite logical. People want to find answers to their questions as fast as possible. So how fast do we need to make this web page? What is good for Google? And where do we even start by optimizing our websites? Well, web performance is not a destination. It's a journey. Well, we could start with going to Google and just typing how to make my website faster. We will end up with a lot of interesting results. And they might not sound all obvious at that time, because when you first start out, then you need to... Yeah, you're just starting out, so they don't make sense at that time. Maybe later on when you tick off all the boxes, then they make time. But where do you start? I already said web performance is a journey. You make small changes day after day, and big small changes lead to big performance gains. So to begin with optimizing your website, you need to measure your web. You need to measure how fast your website loads. There are several tools out there that can help you with this. So here I made an overview of several tools you can access online. Page speed insights, GT metrics. Pingdom is also really familiar among the WordPress community. Web page test, and of course Chrome developer tools, which is right in your browser, and Lighthouse. All these tools, they offer all kinds of metrics, like page speed score, fully loaded time, your page size, number of requests. So at Pingdom, we have all kinds of nice metrics, load time, how much faster than you are than other sites. Web page test goes a little bit into more detail. They show first interactive, they have also a metric called the speed index. All of these metrics, they don't really tell much about how a user perceives how fast the website loads, how does your website feels, how fast it is. They don't measure web performance with a stopwatch. They measure it with their brain and eyes. We all experienced, when you're having fun, time flies. And when you're waiting for luggage or whatever, the experience of time can be very slow. It's a perception of time. Take elevators for example. Does anybody know why there are mirrors in elevators? Well as it turned out, in the beginning of time, when elevators were first introduced, they were very slow. People had to wait a lot and they were complaining. They were always complaining, can't you make elevators faster? So lots of architects and designers thought about solutions, how can we make elevators faster? But then one clever designer came up with a solution. He said, we need to focus on the user, we need to think what he thinks and how can we distract him from thinking that elevators are too slow. So what they did is they installed mirrors in the elevators to distract users from thinking that the elevators are slow. So after a follow-up research, they asked the users, what do you think of the elevators? And they said, oh, they're so much faster and they didn't change any of the speeds. So it's really, what the user feels, how fast things are going and the perception of time, the perception of speeds. When we get back to the web development, web performance, it's the same thing. When our website loads, we first see a white loading screen and then a pixel pops up and some images. And the first Confill Paint, which is a relatively new metric, it calculates how fast the first visual element shows on your web page. How fast you can show something interesting to the user and keep them engaged. So as your web page loads, the first other metric that is important is how fast can you make it feel ready to the user. And that's the time-to-interactive metric. It calculates when the user can interact with the website, when it is live and when it feels ready for the user. So when you visit a web page and you see it loading and you already want to click on the page or in search box, but you cannot and you still see the loading icon running. So when it is fully loaded, when you can interact, that's when it's ready. That's what we need to be optimizing for. Web performance can be very complex. There are different moments in time that when you visit the web page, you send out a request, get back a bunch of stuff with the back-end, the front-end, maybe different JavaScript frameworks. But actually we can break it down into very simple rules. And these three rules are you need to send fewer things, you need to send things smaller, and you need to send things more efficiently. So let's go. Let's optimize our website. I have a page here, which is one of my site households. It's the Miami Guides. So it's a tourist guide for Miami. And I will show you how I improve the web performance speeds and outrank the company. So first thing first thing first, we need to measure a starting point. How fast our website loads. So I checked in Google Lighthouse, which is available right in your browser, in the Google Chrome browser. You can do an audit and set what you want to test. So I selected here to test it on a mobile device. And when I run, I came to the conclusion that it runs in 6.5 seconds. Time to interact. So when users are able to really click on buttons and scroll on the site. So which is way too slow. And we need to optimize that. So using the tools, we're going to find what is slowing us down. There are opportunities given by Google Lighthouse. As you can see here, it offers information that I can optimize the site by deferring off-screen images. Off-screen images, as I show right here. I don't know if you guys know. You have an above default and below default. So all your images and resources below default are not really needed when a user first loads the web page. So you could use lazy load images to lazy load them. And when the user scrolls down, they will be loaded onto the page. This improves performance. So we did that 3.9 seconds. That's quite an improvement already. But we are not done yet. Because this was on a desktop. And our users today are mobile. I don't know about you, but if I'm checking my website or if I look also into the younger generation, my daughter, they don't even open their laptop anymore. They will always, yeah, most of the time, visit websites from a mobile device. So mobile first. So optimizing for mobile, I saw in what you see here is the waterfall view in Google Chrome. And what you can do here is sort by size so that you see the biggest resources first. And by focusing on the load times, the long horizontal bars, you want to keep them as short as possible. So what we found here is that you have one script which is taking too long to load. So we dove right in and optimized that file. We cut out all the unnecessary codes and combined it. Next thing we did was to upgrade our hosting. I think this is really one of the first things. If you want to download a website, you need to pay close attention to what kind of server you're hosting your file. So I use Google Cloud and there are many other web hosting providers. I don't know about Japan or Tokyo. I did see Google in the woods. Next step is run WordPress on PHP 7. WordPress is using, it's a minimum requirement for WordPress to run it on PHP 7.2. And it's amazing that still 20% of all WordPress sites are using PHP 7. So they can gain a really performance boost by just switching to PHP 7. And you can make your website like twice as fast. Next thing is enabling gzip compression. Compressing the files of your server can really improve the response time. Then we have HTTP 2. We have the newer variant of HTTP and it makes your website twice as fast. Also, you have to consider is to use CDN. Does anybody know where CDN is? Content Delivery Network. So it basically means that people can access your website from various parts in the world much more faster because the website will be hosted at their nearest point. Optimizing our images. There's a very good guide that can explain how and which images you need to optimize by Andy Otami. You can also use plugins to optimize images. There are various plugins to use. I'm using Imageify right now. So it automatically compress and optimize your images when uploading it to your WordPress site. So it's really easy and you don't have to worry about users uploading too big of files. Caching. You need to cache as much as possible because by caching you don't put too much pressure on your database and you turn the dynamic content into static HTML which will load much, much faster. What I'm using is W3 total cache but you also have W super cache from automatic, I believe. Then about scripts. Your CSS and JavaScript. We can merge and minify it by auto-optimize. I've already talked about lazy loading. There's a plugin for that as well. There's a nice thing about WordPress. There's a solution for everything. Plug-in load filter. I've been using this for quite some time and it's really handy because what plugin load filter does it disables plugins on individual pages because most of the time you don't need plugins on every page like on your home page. You don't need, for example, the contact form plugin. So you can just disable it there and decrease the total file size. So by doing all of these tweaks and changes I managed to improve the speed to 3.8 seconds. So that's awesome, right? Speed matters. Mobile speed matters. But how fast your website feels is also important. We need to optimize for the perceived speed. So that's my talk and I'll be welcome to answer any questions about web performance. I've also a link if you'd like to have a guide about how to optimize your website. It goes a little bit deeper into all the individual plugins and how to configure them. You can connect with me on Twitter, Instagram, LinkedIn and Facebook or just send me an email via my website. Thank you very much for being here today and joining my talk. I'm really glad to be part of this community and share my knowledge. Thank you. Any experience with optimizing WooCommerce? WooCommerce. Well, you could use to optimize WooCommerce. Definitely, you can use the tools that I showed you, the plugins and also using the loading metrics to measure your website and see what is slowing you down. So, yeah, I would just find the things what is keeping your website from loading faster. Minimizing the script of what I mentioned earlier, the plugins like auto-optimize and also gzip, they all help to reduce the file size because that's what you eventually want. You want to keep the total package as small as possible so that your site will load much faster on the mobile device. What about showing the products that have already around 100 or many thousand products in the page? Okay, so you mean a web page with thousands of products on the home page? Yes. Yeah, that's a big... Well, what I think is that you do need to focus on the information above the fault so you might want to optimize everything below the fault so to focus on the images you could use lazy load to speed up the home page. Any questions? Thank you very much for your presentation. I'm not sure if this is a good question but do you have any advice on credit card transactions? Like me, I have a web page and I try to do some sales through credit cards but once I use Stripe but once I use Stripe and entered my credit card number, of course it's a great credit card number and once I click it takes around one minute or it was very slow so the transaction failed but sometimes it succeeded but it was very unstable so I think it was a very big performance problem but I didn't know how to solve this so first I reviewed my web page and now it takes around 20 or 30 seconds it's slow, it can't do transactions but it's slow but I want to solve this problem but I don't know how to do it right now So to improve the performance of transactions Yes, this is what I want to do but I'm not sure I can do it with some tools you showed in this presentation You can definitely start with the tools like Lighthouse or use the Pingdom tool and look at how the waterfall the total waterfall where all the elements are loaded onto the page so there you'll see which scripts, codes are slowing you down if you look at the longer horizontal bars and how long it takes for a file to load and how big a file is I would focus on that and try to optimize those so my leader combining codes, compressing codes or maybe removing it completely Alright, I think it's a simple transaction so I don't think they mean some big files but I will try to use your tools Do you have any questions? Thank you Thank you very much What I wanted to say is that I have experienced a lot of speed up to this point I often say this is a bad case I don't want to use this plug or getPost or call out this is a bad case I often say this is a bad case or something like that I want you to stop looking at it and tell me Oh, very great I was on the wrong channel so you repeat that again Yeah, well I didn't want to show that example because I felt really bad but I thought the the main travel guide of Tokyo I think it's Tokyo Go I tried to visit it from my desktop at home and just wouldn't load they have a video I don't know how big it is but I guess it's several megabytes so that's quite a bad example I would definitely whoever is involved in that project I would definitely advise them to optimize it for on speed and performance so methods bad methods you mean is that what yeah I think yeah so a bad practice would be if you just go to Google and if you would Google how to optimize your website you will get all kinds of advice but when you're just starting out they won't make any sense so the first thing is you need to first measure your site measuring starting points which elements are slowing down your site so you need to start make a good start and you need to focus on what you need to optimize what makes sense at that time when you just want to say I want to make my website faster I'm going to enter your gzip install all kinds of plugins that will just slow you down you need to focus on what are the actual slowdown your website so the first thing is measuring and loading a looking at the waterfall of all the elements is that answering your question thank you any other questions okay so thank you Mike please give a big applause once more Mike