 Thank you for the introduction. Welcome everybody, well thanks for coming to my talk. It's really nice that you're here. Well, my talk was announced, it's about speeding up your website. My name is Mike Reinhardt, I live in Rotterdam. I really like Rotterdam, it's my city. I'm about making your website faster. I like fast websites, I don't like watching slow loading screens. I started when I was a kid, I always had a creative mind. I didn't make it to art school or an art academy, but I always kept myself creative. By the 90s, I started fiddling in GeoCities. I don't know if anybody knows about GeoCities. Eventually, I started building my own web page. My first web page online, Microsoft's front page. Anybody familiar with it? Cool. It was fun times at that time. We didn't really care about speed or optimizing for mobile devices, because there were no devices to browse the internet with. We had a lot of creativity to create all kinds of websites. The internet then web 1.0. We didn't call it that way, but that's what it was. It was one-way communication, basically. One big information dump of webpages linked together via hyperlinks. It was fun times, but over the years I developed my skills from webmaster to web designer and eventually a web developer. Today there are millions of pages and a lot of devices that we have to optimize our website for. It's very important these days that our website loads fast, especially on a mobile device, because we have to compete with billions of websites. If you look at your statistics, I don't know about your statistics, but if I look at my analytics, almost half of the traffic now comes from a mobile device. Sometimes even more than half. People visit your website from a mobile device. This was a statistic from 2016 from Steadcounter, and it shows that mobile has over surpassed desktop traffic. Especially on mobile speed is important. According to research, it's almost 53% of your website visitors. They will leave your site if it takes longer than 3 seconds to load. You could lose more than half of your web traffic before people even see your site. If you leave them waiting with some white loading screens and don't show them that anything is happening, people will just click away. Now this data is also not unseen by Google. Google is paying a very close attention to speed. Last year they introduced Google's speed update. I don't know if you probably heard about it. Last week there was an article in news that after this update, until now they saw that the average speed of web pages improved by 20%. This really helped to speed up the internet. It takes a long time for web pages to load. According to Google research, it takes more than 15 seconds for a mobile site to fully load. If you think about it, people will leave your site if it takes longer than 3 seconds. That is way too long. Because web pages are carrying a lot of weight, we've seen over the years that the internet has become heavier and heavier. We are loading a lot more JavaScripts, images, videos. The average web page nowadays, I've seen figures of 5 megabytes or even more. According to research, more than half is over 2 gigabytes. If you consider that the old classic game Doom, which is a first person shooter with 3D graphics, multiple levels, sound effects, is only 2.3 megabytes. Today we are still struggling to just put out a piece of web content in the same size. We still have some work to do. All this weight is really affecting the user experience. We keep our visitors waiting with loading screens, slow loading web pages. It's affecting the overall experience of our web visitors. They don't measure time with a stock watch. They measure it with their brains, their eyes. When they see a white screen or things don't move, then you get people like this throwing their foot. Also the big companies, they also know this data. There are a lot of reports, for example Amazon. They saw that for every 100 milliseconds, their website loads slower. They lose like 1% of sales. That's like billions of dollars. Maybe we don't make billions of dollars with our website, but still, who wants to lose money? You can find a lot more reports on this website. It's called WPOStats. If you ever want to convince your client or boss to optimize your website, you can find here a lot of interesting reports on what kind of effect it has on sales, visitors, and engagements. Web performance is not really a one-time thing. It's like a continuous process. It's a journey that you continue to monitor, optimize, and measure. Measurement in my eyes is part of web performance. Before you do any optimization, you want to start with measuring. Find the starting point and see what is slowing you down. There are a lot of tools these days that you can use. All of these tools are free to use. Most of them are web-based. They offer all kinds of interesting figures, like load time, page size. Pingdom test is another popular tool among the WordPress community. Web page test is like the industry standards. All kinds of figures on how your website is performing. All these figures tell you half of the story. They don't really tell you how fast your website feels in the eyes of the visitor. There is one story about elevators in the old days. I don't know if you know the story. In the early days, when in New York they were building high-rises, elevators were introduced. People were complaining how slow the elevators were. All kinds of engineers were thinking about solutions to speed up the elevators. It cost a lot of money using faster engines to speed up this elevator. One clever engineer came up with a solution. He said we shouldn't focus on the elevators, but we need to focus on the users, on the people inside the elevators. It was a clever invention to put mirrors in the elevators to distract the people inside the elevators. After they put these mirrors in the elevators, they asked the people if they thought the elevators were faster or not. They said these are much, much faster. The speed was exactly the same. That's the story about elevators, but back to the web. How can we get people engaged? How can we keep them focused on our website? The most important metrics for that to keep in mind is the first content for paint. That's when you first show something on the screen that something is happening. You want to quickly show something that stuff is loading up. There are several other metrics like first meaningful paints, but then there is also the time to interactive. That's actually the time when people can start interacting with your website. That's what we should be optimizing for. Where do we start with optimization? We can go to Google and type in how to optimize my website. We will get millions of results. I think there are thousands of tactics to speed up your website. Back-end, front-end sites. You name it. I just listed here 10 performance tips. I don't know all the tips and tools, but I know a lot. I just thought, let me list the top 10. We will go through these. For that, I'm using my own site project. It's the Miami Guide. I was talking to Ian. Miami is one of my favorite cities. I go there every year. I came up with the idea to create a website in WordPress and started a travel guide. I go there every year. I have my social media profile. It's a really fun city. But enough about that. The travel industry is really a competitive market because there are lots of travel sites. One way to win from competitors is definitely with speed, especially in the travel brands. You see a lot of travel websites that are really loading slow. They are using a lot of video, of course. The first thing I do is start a measurement in Lighthouse. Lighthouse is a tool that is freely available in your browser, the Google Chrome browser. I ran a report. At this time, when I measured my site, it was 6.5 seconds. Time to interactive. What is nice about Lighthouse is that it gives you also some opportunities that you can use to speed up your website. When you scroll down, Google gives you several optimization tips. The first tip is to defer off-screen images. Off-screen images are images that you don't see immediately above default. When you visit the website, somewhere at the bottom of your website, there can be images that are not immediately visible. By lazy loading defer off-screen images, you can speed up your site. One way to do that is a lazy way is to use a plugin. I'm currently using this one. It speeded up my site to 3.9 seconds. This was on desktop and we are in a mobile-only world. We need to optimize for mobile. When it comes to web performance, you can start out with all kinds of tweaks, but that's just like putting a band-aid on something. Most importantly is to have a good hosting platform, so a fast loading server. With HTTP2, there was a talk this morning, talking about the advantages also for security-wise HTTP2. HTTP2 is also a lot of advantages for performance, loading more than two times faster. Another thing you want to do is run the latest version of PHP. Also security-wise, it's important, but performance-wise, by running the latest version of PHP, also it's a recommendation for WordPress is to run PHP 7.3, I believe. I don't know what's the latest version. That can help you to speed up your website like three times. Enabling Gzip on your server. By enabling Gzip, you compress your files and it's compressing it to smaller packages, so also you will save lots on bandwidth, and a CDN, so a Content Delivering Network. Is everybody familiar here with a CDN? If you have a website that's visited from multiple locations all over the world, people will be able to access the files on your server much faster because they will be accessing it from a nearby server. Well, tip number six, images. Well, that's still one of the main quick wins to speed up your website, so it's like the low-hanging fruit. A lot of web pages these days are using images, so we need to make sure that we are using the right format, right sizes, and that they are compressed. There is a guide by Eddie Osami. Here's a whole guide on how to optimize your images. You can basically give a whole talk about how to optimize your images. I really like this tool. It's a tool from Google. It's called Squash. It's a web-based app, and the app itself is like 15 kilobytes, but it really compresses your images really nicely. You can select all kinds of different formats, and it's available right in your browser, so you don't need any other tools. Another way to optimize your images is to use a plugin. If you work with a lot of people like content editors, you can install this, and automatically images will be updated when they upload images to a blog post. You don't have to worry anymore about optimization for images. Well, number seven is caching and compression. You want to cache and compress everything there is on your websites. By using a plugin, you can easily, well, this is one of the most popular ones, WP SuperCache, you can cache your websites. There will be also a talk after my talk about web performance, and he will talk more in depth about caching. Besides caching, you want to make sure that your code is merged and minified. When you normally visit a web page, when you go to view the source code, you will see a lot of white spaces between all the codes, well, merging and minify combines your codes, takes out all the white spaces and unnecessary characters, and the overall package is a lot smaller, so that it loads much faster, especially on mobile devices. There are plugins for everything on WordPress, also for merging and minifying your codes. You can use auto-optimize. Well, besides optimizing your codes, you want to make sure that you are serving clean codes. What I mean by clean code is that you don't want to serve any code that is not being used or unnecessary, especially with plugins. If you have plugins running on your website, that you're only using, for example, on your contact page, but not on your own page, well, that's still a weight that you're serving to all your pages. There's a special plugin called the plugin load filter, and with this plugin you can disable other plugins, not to load on specific pages, so that you only serve what is really needed on that page. And, well, a final tip is to offer a valid code. So you want to make sure that the code that's on your page that has no errors. You want to make sure that your style sheets, well, they load in the header, and that all your scripts are at the bottom of your web page. Otherwise, you will get these messages from Google that you are loading blocking resources. And also you want to check if there are no images that are 404s, images that are not found. So you want to make sure that code is validated. Well, after all this optimization, you want to constantly check what is the effect of your optimization work. So at the time I checked, my site now loads in 3.8 seconds on a mobile device. So it's quite okay. You can go for 100%, but I didn't set it as a goal, especially on mobile. If it is below 5 seconds, it's okay. So besides optimizing, you want to make sure that you keep on monitoring it because your site is really dynamic and it changes. So it's important that you monitor how your site is doing. So there are a lot of tools. For example, Google Search Console now also gives you alerts if several pages are slowing you down. So you will get notified and optimize them. What you can also do is set performance budgets. So there's a tool online that's how to calculate performance budgets to see how fast your site needs to load and then calculate how much weight your page needs to be. And also in Google Analytics, they now offer the page speed score. So you have a nice overview of which pages are slowing you down so you can optimize them as well. And they even give suggestions on what you need to optimize. So Google really helps a lot to make our website faster. And how fast you need to be is I think really depends on your competitors. So if you want to compare, if you don't know who your competitors are, well, there is this website. It's called a similar web. You just fill in your own website or as a competitor, it's also possible. And it will give you all the web pages that are competing with you. So it's a handy tool. And then just check how they are doing and make sure that you're running faster than them. There are other and more advanced tools. This is Speed Curve. It's a really nice tool to benchmark yourself with other websites. I used this in the past with clients. But it's really nice to see where you stand with your competitors. And you can make it a real sport to stay the first in line. So now that we basically talked about all the three topics about measurement, optimization and monitoring, this is going to really help you to get fast and also stay fast. So, and I think that's the most important thing of web performance. So, and that was my talk. Well, thank you for being here and having questions. So I have some more tips on my website that you can download some guides.