 So my talk will be in English? Yeah. All right. That's good. All right. Good. So Burt Kent Rotterdam. How are you doing? Good. Okay. I'm Mike Reinhardt. I help companies to grow their business through fast and engaging websites. Today I'm going to talk to you about how to improve your web performance. This is how I'm going to do it. I will show you five steps. Put that microphone here. I will show you five steps on how to speed up your website and how to rank your competition. You probably already know that mobile web traffic has surpassed desktop. But did you know that over 50% leave your mobile website if it takes three seconds or longer to load? So if you leave them with a blank screen or loading screen, they're going to be out of there. According to Google, the average time for a mobile website is nowadays 15 seconds. I don't know. Do you like to wait more than 10 seconds for a website to load? Well, I definitely don't. Considering that 53% leave your website if it takes longer than three seconds to load. So speed is the most important feature. It's a quote by Fred Wilson. If you consider that nowadays, there are over 4 billion internet users. And over half of them is coming from mobile. And over these new... Google is talking about the next billion users coming to the internet. Speed is very important because the next billion users, some of them may have never used a desktop before. And they maybe never will because nowadays the new user, they have a mobile-only mindset. So we should stop thinking as mobile as another channel because it's the only channel. We do everything on our mobile. We order our tickets, we search, do our bookkeeping. It's basically our life. We spend every day nowadays. We check our phones like 30 times and search. That's become a very important tool. Speed is good for everyone and everywhere. Google is especially promoting it. Page speed is good for a user experience. The faster your site loads, the more engaging it will be. Also, page speed affects your search rankings. Google is especially paying attention how fast your site loads. It affects your bounce rate, so the slower your site is, the faster your users will leave your site. Also, it affects the page views and conversions. If a site loads fast, it will make your visitors more happy and less frustrated. So we will be willing to buy something on your website. Eventually, page speed is also good for our planet because it uses less power to run a website. It's good for everything. Several companies also saw many benefits from page speed. For example, at an example of EXOCK, they recently updated their mobile websites by implementing AMP. The mobile site loads now in 4 seconds. By doing this, they saw a conversion increase up to 186%. Also, an example from Amazon. They saw that their sales dropped 1% for every 100 milliseconds. Their page is loading slower. For their website to become slower, they are losing billions of dollars. Maybe you're not as big as Amazon, but still, why would you give money away? I'd rather keep it. Many of these examples you can find on this website, WPO Stats. It keeps track of all these case studies being done by companies of the benefits of page speed. You can check it out whenever you want to convince your team when you want to do web performance work and show them the benefits. Anybody heard of the Google speed update? Is anybody ready for the Google speed update? Google announced a new search algorithm designed for mobile. The speed update will go live in July. You still have some time to optimize your website and make sure that it loads fast for mobile. It will affect your page ranking in the search results. How are you going to make your website suck less? What are you going to track? How do you measure speed? I'm going to show you some examples. I started blogging and using WordPress about 10 years ago. I first started blogging, but then I saw the flexibilities of WordPress. I already started in the beginning to use WordPress as a full-blown CMS for company websites. Still, I love blogging, but I also like to travel. If you combine these two together, you get a travel blog. What I did, I started a website for Miami. Anybody has been here? I love Miami, so I even made a website for it. I'll be using that in my examples to show you how I optimized the Miami guide to outrank the competitors. Especially in the travel brands, it's a very competitive market. Page speed is very important for them to outrank the competition. Also, if you want to follow the Miami guide, I'm also on Instagram and everywhere on the Internet. If you can't measure it, you can't improve it. In my mind, performance is measurement. The first step you want to do is measure. You want to see where you stand and how you rank up to other web pages on the Internet. How you're going to improve it. You want to know a starting point before you start optimizing it. Also, which metric you're going to track. There are several tools online that are freely available to improve your page speed. I'm probably already familiar with this tool. It's the Google Page Speed Insights. Maybe, I don't know, anybody used this before? I guess, yeah, if you haven't used it, probably your boss has. They don't like it if they see your red figures. You want to make sure that the numbers here are in the green. Especially pay attention to the mobile version. Google Page Speed gives some easy insights. It gives a score from 0 to 100. You shouldn't become obsessed with getting 100%, but if you're above 80, it's good. Another tool available on the Internet is GTmetrics. You can run a mobile test and see how your web page performs. It gives several metrics. There is also a waterfall, how your page loads. They also give recommendations what needs to be optimized. You should pay close attention to the total page size. It's recommended for mobile web pages that you keep this below 500 kilobytes. It's quite tough to do, because my site is currently twice as much. As a web designer, I especially like to use this tool, which is DevTools. You can measure your web performance right in the browser. When you right-click on your website and click on Inspect, you go to the Networks tab and you have all these metrics where you can check how your site is performing. You can see how your site loads, which resources are being loaded onto the page. You can sort the waterfall timeline by size. You can see which assets are the biggest. You can start focusing on those first. Another one is the number of service requests. You want to keep this as low as possible. Recommended for mobile websites is less than 50. If people are complaining about a slow website, one of the first things you might want to check is time-to-first bytes. This shows how fast and responsive your web server is. Time-to-first bytes you can also find in the DevTools under the Timing tab. It's right over here, TTFB. For mobile websites, you should target a score of 1.3 seconds. Go and check it out. Also Lighthouse, I don't know if anybody's familiar with that. It's also available in Google Chrome DevTools. It's a good way of keeping up to date with the latest developments in performance. Especially focused on progressive web apps. You can run a mobile test in Lighthouse. It gives you recommendations on what needs to be optimized. The web standard for performance for website testing is WebPageTests. It's a free tool. You can run your site by using WebPageTests. It will give you a lot of metrics. Before running a test, you can select to use a real mobile device and select several locations around the world where you want the test to be run. After the test is complete, you can set also the number of tests that needs to run. The standard test takes the average of those three tests to get a reliable metric. WebPageTests also gives a score, which is called the speed index. The speed index shows a metric which tells how fast your web page is displayed to the user. You want to keep this number for mobile below 3000. That's three seconds. For desktop, a number of 1000 would be okay. Another nice feature is the waterfall view in WebPageTests. The waterfall view gives a total overview of all the assets being loaded onto your site. There are many guides on the internet on how to do waterfall optimization. It's important that you focus on the horizontal bars. You want to have them as short as possible. The longer they are, that's one of the reasons where the bottlenecks are on your website. It also gives colored lines. Right now, I have just a yellow line, but sometimes you also might see a red line, which is not good. Yellow lines are redirects and red lines are 404, so files that cannot be found. The film strip recording is another nice feature of WebPageTests. It gives an overview of the real user experience. What the user sees when they load your site. You can compare film strips views after optimization. It's really a nice way to motivate other team members when you want to do performance work. Just show them the wide loading screens before your website starts. Some key performance metrics. You want a track. I don't know if everybody can see them. I can name them one by one or you can take a picture of it. The ones I talked about is speed index, total page size, server request count, time to first byte, and load time. What you optimize today can improve all your tomorrows. You never can start soon enough with website optimization, especially to get ready for the Google page speed update. What will you do before optimizing? The first thing I recommend is to get your house in order and do a little bit spring cleaning. WordPress sites need a lot of maintenance. You need to make sure your WordPress version is up to date. I hope people update their WordPress version and that it's not 12 months ago since the last time you updated. It's important for security reasons. Also, you want to make sure your plugins, your teams are up to date. Delete. Get rid of plugins you don't use. Get rid of teams you don't use. You want to have this optimized as possible. After that, you want to minify and combine scripts in order to make your site as fast as possible. There is an easy plugin which I currently use. It's auto-optimized. It optimizes all your HTML, CSS, and JavaScript. It's one click on a button to do this. This way, it will make your website a lot smaller and faster. The average page size on the internet today is actually just growing and growing over the years. Currently, the average size is 3 megabytes. Images make up a large part of this. This is one of the main things you want to make sure to optimize. What I also see on many sites is that people choose to upload their images way too big. Sometimes people upload an image of 6 megabytes. But it's also important that you choose the right format. Google has a nice way to select the best image. What I usually do is that for big photos, I make sure to use a JPEG. If I have an image with text in it or numbers, I use PNG. SVG is also a really nice way if you have detailed images. SVG is a Victor image and it's nice and scalable. Especially for mobile, it's really recommended to use. You also have the icons. If you really have to, it's better than... Nowadays, you can use image icons. They are also much faster than using just an image. If you can tell it with an icon, then use that. Easy plug-in to optimize your images. Automatically, it's image-defined. It automatically updates all your images on your WordPress site. It's running automatically. You don't need to take care of optimizing them manually. I'm currently using this and I'm really liking it. Another important step is to cache everything you can and compress your webpages. You want to WordPress sites or dynamic content generated from the SQL database. What caching does is creating dynamic content into static HTML files, which will improve your load times. Another thing you want to make sure is that Gzip is enabled on your website. Either you can use this plug-in, WP SuperCache, to enable compression or you can ask your web host to enable it on the server, depending on which hosting company you are using. That brings me to hosting, which I think is really an important one. The foundation of your website is most important. You can have a nice optimized site that you think loads very fast, but if your web server sucks, it's not going to improve your website. Hosting is really an important one. When I first started, I opted for the cheapest hosting possible, but I learned my lesson. Currently, I'm on a cloud hosting platform by Google. After finding the best hosting company, you also want to consider using a CDN. Other things you can do is enable HTTP2. I was in a workshop yesterday from Mike, I don't know if he's here today, but we really found that HTTP2 gives really an advantage for performance. Next slide. Automation. We have metrics, you can monitor, and monitoring, you can automate. By monitoring the metrics, you can set performance budgets. Anybody here using performance budgets or anybody know what it is? Performance budgets, it's like you can set alerts. Whenever, for example, your page size increase or your load time increases, you will get an alert saying your website has increased by 10%. You might as well check what's going on. You automatically will be informed about things going on with your site, especially if you work in a bigger company where other people are updating the website without you knowing it's really handy to have. A tool I use is called Speed Curve. I've set several budgets for the page size, speed index, load times, all the metrics that you want to check, you can set a budget. We do a lot of redesigning, updating our websites. One of the things that I do is after an update, I want to make sure that the website is still performing. What you can do for this is do A and B tests. I set a starting point before optimization. After I'm done with an update, I run a test and then see what has been improved and what has made impact. If anything is slowing me down, I'm just getting rid of it. Does anybody know if their competitor is faster or slower than them? I do. One thing I do is benchmarking. What you want to do is you want to compare yourself with other pages which are competitors on the internet to see why is somebody slower or faster than you and I want to know why are they faster. I use Speed Curve for this as well. It runs automatically every day a test that keeps track of all the pages in my branch. How they are performed and whenever they are faster, checking what they have done, did they update their home page or are they using less images. You want to make sure that you outrank them in order to stay on top of the search results and also give the best user experience. Google also came out with some kind of benchmark test. It's called Google Scorecard. It recently was announced at the Mobile World Congress. You can use this tool by going to this URL. You can load your domain name and it will give you a score, a speed score and you can add your competitors next to them and then see who performs best. For this I added some of the biggest names on the internet using WordPress. It's quite impressive nowadays what kind of sites are using WordPress. Trump is using WordPress. In my magazine, the next web you probably are familiar with, TechCrunch is using WordPress. They recently did a complete update but still using WordPress. It didn't help them much in their score though. Well, there's more to life than increasing its speed, which Gandhi has said. I don't know, maybe he talked about joining the slow web movement, but if you're still struggling with speed, you might as well implement AMP. I don't know if anybody is familiar here with AMP. It stands for Accelerated Mobile Pages. It's an open source framework created by Google. AMP enables you to create fast mobile web pages very easily. An AMP page loads in under one second. They basically load instantly. Last month I was invited by Google for the Google AMPsterDAM event. Every year they have a conference, especially for AMP. They showed many exciting new features. I started using AMP about one and a half years ago. What I built that time was not really an engaging site because AMP restricts you to the file size of CSS. You cannot use everything you want because it's basically an AMP page. It's HTML, CSS and JavaScript, but it has some restrictions. You're limited to the number of resources that you can use. This time they have announced a lot of new exciting features. You now have AMP Stories, which is comparable to Instagram Stories. It has video animations. They're also bringing out AMP for email. Even complete web shops are being built now in AMP. I saw many big companies like BMW, Airbnb. They're even moving their complete mobile website into AMP. You might want to check that out if page speed is important to you. To enable AMP, there are a few plugins which enable you to easily make your website AMP-compatible. You have the AMP for WordPress, which is the original WordPress AMP plugin by Automatic. They will soon have a new version, which will be a big step forward in the possibilities with all the new features for AMP. When you have AMP installed, you want to also check the Google Search Console. I don't know if anybody is using Google Search Console. In Google Search Console, you can check the AMP pages. If they have any errors, you can fix them to maximize your results. If your AMP page is not valid, then it's not being indexed by Google. When you have done all these things, your website will run much faster. It will frustrate users less. They will be happier to visit your site and say, hey, this site is fast. I might as well buy it. Some key takeaways from my talk today is start checking your mobile website for performance. Make sure to measure and optimize it. You can automate performance by using performance budgets. Maybe you want to go for a full-blown AMP site. I might as well. When you have your website optimized for performance, it will enable you to reach more people. Thank you for joining me today. If you have any questions about web performance, I'll be happy to answer them.