 All right. We're going to talk about why it's important to be mobile-first over mobile-friendly today. When you see this picture, what do you see? A lighthouse, obviously. Lighthouse, you know, it guides, it warns ships that are at sea. I see something else, though. I also see a tool that is guiding your site to be mobile-first. This is Google Lighthouse, which is the new page speed algorithm that they come out, specifically for mobile devices. The purpose is to improve the quality of websites, specifically mobile. However, if something like this is important to Google, then that means that it's only a matter of time before it affects your website. Right now, mobile-friendly sites are what Google is prioritizing. But the lighthouse check, it makes sure that you have a mobile-first website. And so we can kind of see the writing on the wall as to the direction that Google is going to be taking. So to get started, we're going to talk, how did we get to this point? We're going to do a quick overview of what's happened in basically the last 25 years of the search industry. So 15 to 25 years ago, you had lots of different search engines. And most of them were more or less directory sites, where you would submit your site, or someone else would submit it, and it would take the title, the description, the keywords. And it would use that to go and put up the information when someone would do a search. Eventually, they started to personalize these sites, where you might have your own homepage. You'd get a weather widget. You might have some local news that would appear on the side. But more or less, the results were all pretty much just what was in the directory at the time. Now, when I was in high school in the early 2000s, Google, it was a thing, but it wasn't a household verb. No one really used it all the time. So in 2005, Google decided to start to attempt to make sure that we had actual personalized search results. It would launch the personalized search results based on what our search history was. And it would use that to fight spam tactics that had already come out from, I guess, search marketers. And it really helped bring Google out as a big player. So two years later in 2007, they added universal search. And this is where they combined the results of the links with local news, books, movies. And it made it so that when you would search for something, you wouldn't just get web pages, but you might actually get relevant content. The goal was to provide more value to us as users. This is also the year that the iPhone came out, which pretty much changed how we now develop websites today. So in 2008, Google added suggested search results. So there really was a time where Google was pretty much like a regular WordPress search. You actually had to type out exactly what you wanted to search for and hit Enter. Now, at second nature, we start to type what we want. And then we just select what makes the most sense, go with that. Once again, the goal is to add more value to us. This is also when Duck Duck Go came out, which gave Google some much needed competition. And it's also when the first Android device was released. In 2009, Google added real-time search results. So it started to grab results from Twitter, Facebook, other social media. And that way, when we'd have a search come through, we would actually know something that happened within the last minute, within the last couple seconds. Once again, the goal is to give us as users more value. This is also the year that Bing came out, where it was rebranded from LiveSearch, which I guess a year before that was Windows LiveSearch. In 2010, the caffeine update came out. And that was where Google focused on speeding up how fast you could get that information. They went through and just made it so that it was more performant. And it's interesting because here you're at a time where everyone is focusing on how long people can stay on their website. And Google is focused on how fast they can get you off of their website, knowing that if you leave their website fast, you might have gotten what you want and you're going to come back. The goal was for user experience and also to get ahead of the competition. This is also the year that the iPad was released. In 2011, was when the Panda updates came out. And that is where low quality content was dropped, as well as sites that had way too many ads to the content ratio. This is where substantial ratings actually were affected, because 12% of all search traffic was affected by the Panda updates. And the goal was for better user experience for us. In 2012, the Penguin updates came out. And this is where Google started to punish sites that would buy links or they would stuff keywords into the site. This is also when the knowledge graph came out. And if you don't know what that is, when you search for, say, a celebrity, then you will have on the right side where it will actually give you the Wikipedia bio. You might have a picture of them. You might have some movies that they've been in, maybe colleagues or something like that. And the whole goal is to provide us with information as fast as possible. In 2013, we had more updates to Penguin, which Combat Spam, but also the Hummingbird release came out. And that was where Google went and rewrote their algorithm from scratch. So it was the first time they had done this since 2001. And the biggest feature that came with this was conversational search. So you could actually ask a question to Google, how do I do this? And it would know what words to parse out. OK, you're asking a question. Here's the main focus and provide quality content to you. Once again, for the user. 2014 was where the Pigeon update came out. And that pulled data from your location and maybe synonyms of local words that you might use that aren't used in other areas to try to generate search results for you. So if you're here in Dayton and you're searching for something and you're searching for the exact same thing in California, you're going to get different results based on where it is that you're making that search from. As always, the goal was for a better user experience. In 2015 was the dreaded mobile get-in update. Phones are becoming more popular at this time. And mobile-friendly sites, they rank better for Google. Now, this is where Google also started to use machine learning and artificial intelligence as a ranking factor behind the results. Now, the goal, once again, more relevant results for us, but giving a bonus to sites that are accessible across all devices. In 2016, the POSM update came out, which is another local update. And this made it so that you had more results that would change based on our location. So if I was in Beaver Creek, which is a town just outside of Dayton, and I'm searching for a restaurant using the keyword with Dayton, then Google would also provide restaurants that are in Beaver Creek closer to me that are also trying to rank for Dayton. And it managed to figure out the location, providing closer results for you, more accurate for you. I also want to point out that this is the year that the iPhone 5 SE was released, which is the last semi-popular phone that has a viewport width of 320 pixels. And this is also the year that phone usage passed desktop usage for online use. In 2017, there were sites that had excessive pop-ups or ads. They also got punished. And the updates were all unconfirmed. And so we're assuming they were pretty much just unnamed Panda and Penguin updates to promote quality content and get rid of spam. But it continued the trend that the value is for the user. In 2018, just this last year, the main rankings for Search, it switched to Google SmartBot or Googlebot Smartphone, which means that desktop was officially second in the ranking factor that Google was using for all results. PageSpeed Algorithm was also a bigger factor that was used. So Google wanted faster sites. Then just this past November was when Lighthouse became the main ranking factor for mobile, for Google, and for part of their PageSpeak algorithm. And once again, the value is for us as a people to have a better internet experience. So back to this photo, this is Lighthouse. It's a guiding force to help make your website better specifically to improve the experience for your mobile visitors. Also, this is for Google. I mean, it's going to help your search rank better if you follow it. But this is for Google. And Google, as we know, it has the famous algorithm where you don't know what it is that it's actually doing, and they're not releasing any of that information. So how do you make use of it when it seems like it's completely untouchable? Is this something that we're just completely frozen out from with access? So what is a mobile-friendly website? I've been making websites since I was a kid. Maybe not quite that little. I was probably more that age, and those aren't my best years, so we're just going to move on. But mid to late 90s, I was creating websites, and I made them for a computer, obviously, nothing else. Now, the sites that I made, they looked absolutely terrible. And so did everything else on the internet, because we didn't know any better. We were just trying out and seeing what worked. And at that point, I remember I was hoping that I could develop something for sites that were bigger than 640 pixels wide. And I remember putting an image that was 1024 saying, your monitor needs to be this wide so that you can view everything on this and make people search. We didn't care about users. I don't know, we just weren't very good in the beginning. Eventually, you had blackberries come out, palm devices, and they had a browser in them. But no one actually used the internet that way, and so we didn't have to cater to them. And then 2007 happened with a literal breakthrough of the iPhone. The good news for anyone who was making websites is the iPhone, it wasn't super common, and it was pretty expensive for people to use. And so we still didn't necessarily care about those users. And besides, I wanted to make websites for bigger screens, not for smaller screens. So eventually, you had Android phones come out. You had the iPod touch come out, Windows smartphones came, and then they eventually went away. Eventually, everyone had smartphones, and we actually needed to cater to them. We needed to start thinking about people. Because we didn't want little tiny sites that were inside of the phone that people would have to pinch and zoom and swipe around to actually read an article. So people started to make separate mobile websites that had the M subdomain or mobile subdomain. And you had two separate code bases that you actually needed to maintain. Some people actually have two separate WordPress installs. You'd have to make sure that you copy things from one to the other. Eventually, there were some plugins that came out that would sniff what device was being used, and it would switch the mobile theme. But there was still a lot of work in maintaining between two separate things. Eventually, browsers started to support more mobile query, more media queries, and we're still in design for the desktop. But then, as the screen size would get smaller, the page would adjust. Page would adjust smaller. And we'd set up breakpoints according to the viewport so that way people could access the content that we, I guess, felt was appropriate. The site was built for a desktop, but it was still friendly to mobile. That is a mobile-friendly website. But what is mobile first? Mobile first, obviously, is just the reverse. It's where we build for mobile, and then we expand up into desktop. But what is the point of actually going mobile first? So, quick survey. Who here has used a desktop or a laptop computer to access the internet today? And of course, since I'm at a tech conference, I see a lot of hands up. Who here has used a smartphone to access the internet today? Hey, look, every hand is up. So in 2018, a survey found that 52.2% of all worldwide online traffic, it came from mobile devices in 2018. 57% of people say that they wouldn't recommend a business that had a poorly designed website. Here's the kicker, though. That survey right there is from 2011, so that number is likely higher today. In that same 2011 survey, you had 40% of people say that they went to a competitor's website when they had a bad experience on another website. So you probably already knew this, but mobile is important. Google thinks it's important, and people think it's important. But why is it important to go mobile first? The first is load time. A site that's coded to be desktop first, it first loads all the styles that need to be done for the desktop, and it loads all the CSS for that, and then it adds the extra CSS for the tablet view and the mobile view and everything that's in there. And then you have to have the browser parse through all that to find out, okay, this is what is needed for the mobile display. Our browsers on our phones, they are not as performant as browsers that are on computers. So it actually takes longer for the browser to parse through all of that. Also, a lot of times if it's not actually put on properly, it hasn't been coded properly, you might have an element that is hidden on a mobile device, but it is still actually loading and still downloading in the back end on that same mobile device, which slows down your load time. Now mobile first, it builds the code so that way everything is built with the mobile and then as you get into the larger browsers on computers which are more performant, then it's actually going to parse in all that extra data. And the other thing is you think about phones. Sometimes we're connected to wifi devices or connected to wifi, other times we're using mobile data and that right there is generally slower than the wifi. Computers, they're almost always on wifi or wired into an internet connection, so the internet is also faster on computers, which means we really need to cater to these mobile users. The next is design. Most designers when they're building for a website, at least in the past, they were building it on a computer. They wanted to max out that real estate and then the stakeholders who were approving it were looking at it on a computer and that's what gets approved. And at the end, oh, we have to have mobile friendly site so everything gets squished down and thrown in and mobile is the afterthought. There never was a user experience that was actually tailored to the mobile user because all that we had to worry about was desktop. Mobile first, it reverses that where you actually have to focus on the experience of the mobile user. You start by building that so that way you can see everything that most people are looking at your site with and then since you're still having to worry about desktop, you build it up and you have a full experience start to finish from both sides. So who should have the better experience? Who do you wanna make happier? The mobile users or the desktop users? Both are important and you might have data that says that you have 98% desktop traffic and if that's the case, go for the desktop. But currently with most sites, mobile has the edge and it looks like it's only gonna get bigger from that point. So how do you run Google Lighthouse? For me, I have a script that I run that performs a Lighthouse audit on a site and then it generates an HTML report for me and that why I'm able to see how everything is working but that's not the easiest for just any beginner to set up and so if you want the full explanation come talk to me afterwards and I can kinda show you how my setup is but there's a way that you can do it just from the browser. There's the URL that has the instructions. Yes, these slides will be posted so you don't have to copy it down but use Chrome because it's from Google so they're requiring that you use their own browser and you open the DevTools which is control shift J on a PC or command option J on a Mac and then there's a little tab that says audits. You click on that and you click to perform an audit and you have a bunch of little check boxes on there. Just check everything for the first thing because that will give you the full mobile report and then you click run audit. There's an easier way though if you install the Google Lighthouse Chrome and I can't talk extension then you just click the little icon at the top corner of the browser and it will say generate report. You click that and it will actually give you the report that you need. Yes, yes, yep. So with Google page speed insights when you run that you will see a mobile tab and a desktop tab. The desktop is their general page speed insights that they have. The mobile tab just runs the performance section of Lighthouse in the score. It doesn't run the full report of Lighthouse that they're using. So what is the scoring looking for? Each of the sections are scored from zero to 100 and it's just gonna check the mobile version of your site. Nothing else. And their scoring icons that they have it doesn't make much sense because it's color coded where it says green is 90 to 100 but then the scores actually have the color with the numbers on. So I don't understand why it says it but generally good is 92 and 100 which is green, yellow, which is just no case score is 50 to 89 and a poor score is zero to 49. And the things that it starts to check for is performance. And this is what is being checked in mobile page speed insights right now. So how fast does your site load? For a mobile site, Google generally says that it needs to load in under three seconds and be done. It also says that for the first content paint it needs to load in under 1.6 seconds. This means that when you click something to access your site in the first second and a half you need to have something appear on the screen that fast. So how do we decrease that load time and increase that performance score? The first is obviously mobile front, mobile first development and design. And if you're a developer, these are just some SAS media queries. You can use them if you want, you can look but it's basically some variables and then the usage provided on how I've been doing mobile first websites. Now there might be overkill because I've got probably about 9,000 variables listed so you can choose the way that you want but everything is covered. There is one note and that's why I wanted to point out about the iPhone 5SE which at work we call Ethan's tiny, stupid iPhone. Ethan is one of my coworkers who actually has the phone. I work in ad tech and we have a requirement that ads which are 300 pixels are not wide are not allowed to be cut off. So those are a standard size that's shown on mobile devices. If you have a phone that's 320 pixels wide then you have to worry about margins and when it's going into people's themes we have to adjust things so that it actually works properly. The true mobile first would be to cater to this iPhone 5SE and then start to move out to normal mobile phone sizes but the way that I do development is I actually cater to all mobile devices and then those couple of media queries for the 5SE those come in after the fact. The reason being I don't want to load just this and have that parsed along with the normal mobile queries when I don't have to. I'm catering to where most of the traffic is. Next is to have a quality theme. Basically have no bloat. You know those amazing one size fits all themes that will load 17 different sliders and you can have all the different color options that you want. Those are the worst. Why? Because they're loading way too much CSS, way too much JavaScript and a lot of them are making lots and lots of database calls just to build your page. I'm not going to publicly shame any of them but recently I was asked to optimize a site that was on one of these really popular themes and it also was on one of the top hosting plans that are out there so it should be running fast. The theme took three seconds alone just to build the homepage on every single time that anyone accessed it and that is just from the database calls that were made to pull in everything to build that page. I managed to get some caching thrown on behind it and dropped that response but it still took a lot longer than what it should just because of how slow that database was running because of the theme that was on there. I switched the theme off to something else and instantly things got faster but that wasn't allowed so I had to go back to it and that initial load time was terrible. Make sure that you have a quality theme which also applies to plugins. Plugins that run on the front end some of them will add their CSS code they'll add their JavaScript code and you might need it for just a simple shortcode that you're displaying on one single post but the plugin has made it so that they enqueue that on every single page and depending on the file size of those you might have things that are loading repeatedly on pages that they don't even need to be on there. Be careful what it is that you are putting on your page. Good hosting, you know the old adage you get what you pay for, that is so true with hosting. Faster hosts, specifically ones that have been catered to WordPress, they make sure that they optimize it as best as they can. Some of them will even cache some of the database calls in memory making things faster for you. A lot of them will include content delivery networks in their hosting package so that way they can serve assets faster. They've been built so that they will work with HTTP too which will give faster resource service. They have better uptime. A lot of them include free SSL certificates which is required for HTTP too. If you have good hosting that will also help improve your score. Image optimization, to do this just perform an image audit on your site. Look at your homepage, look at the, I don't know, 10 most popular posts that you have. Look at your pages and look at every single image on there. Say to yourself, what is the purpose of this image? Does it need to be here? Why is it here? Find out if you have images that are too big. If you have something that is a 5,000 pixel image and for some reason that 5,000 pixel image is being loaded on the site and it's only in the 700 pixel width content area then you need to make sure that image is sized down. Optimize your images beforehand whether you're doing it manually by compressing them or using a service that you can have where it does it when you upload to WordPress. Also, if you lazy load your images then it's going to make it so that it only loads the images right at the top in your viewport and as you scroll it starts to load them as they come in which will severely decrease the load time that is needed for your site initially. And the last one and this one is hard is remove jQuery. I know that 99% of themes and plugins use it but if you can find the ones that don't you're saving so much load time specifically with mobile. Because the browsers are more performant in desktops when you are running jQuery something will run like that but in mobile it takes a lot longer to parse and a lot longer to actually calculate what happens while if you're using just regular JavaScript vanilla JavaScript then that loads a lot quicker as if it was on jQuery on a desktop really actually still faster. So the next thing that Google Lighthouse is checking for is a progressive web app. When you're using a social media app or a social media company are you using the app that comes on your phone or are you using the browser and going through it? Obviously people are using the app because it's faster, it's smoother. You have push notifications that come through but it's more expensive to build. It takes a lot more work to build that app. And so if you have what's known as progressive web app or a PWA it essentially is turning your website into an app. Your website it will run like an app. So what is the gains that you can have from having your site as a progressive web app? The first is that it's reliable. Once your site has been downloaded the site is gonna load pretty much instantly even if the user happens to be offline they still can access your site and it's content. Through the use of what's called a service worker then individual complete pages can be cached and the developer can even set up when that cache needs to be updated. So if a new post has come out or if you've updated a plugin then the version can be ticked and the next time someone visits the page when they're offline it will download the proper things. And this also will remove network requests which means that your site is going to be fast. Very fast because if everything is cached and the site works offline you're not making any extra calls. No matter what generation you're a part of we're all feeling entitled to having a fast internet experience. So I've been using Mac computers for, I don't know, a little over a decade and recently I had to pull up my old PC and this is nothing against PCs it's just the technology that I had on the computer it was like 10 years old and turn it on and it doesn't have solid state drive or anything like that and I had to wait and wait and wait and waiting that long it made me angry it shouldn't have but if your site is slow people are going to get angry if they're like me at least. Don't give your users that frustration so if you have a fast site they're gonna love you. Also PWAs are engaging because your site is now an app someone can actually download your site and have it installed on their homepage without the use of an app store. It offers a full screen experience if you set it up that way you can actually have push notifications go out to the user if you set it up that way and it's gonna be so reliable and so fast that people won't have problems engaging with it if you have a good website and actual quality content associated with it though. Next, Google is looking for accessibility. Yes, accessibility is important as Steve mentioned today. Lighthouse, it's going to check some of the basic things for you but also what's nice is accessibility a lot of it is subjective and so they're going to give you a list of things that you can check for manually afterwards and I highly recommend going through all of those when you run this test on your site. Now, I'm not an accessibility expert but some of the things that I've found are pretty important for accessibility are color contrast. If someone is color blind are they able to see the difference? What is the difference between your foreground color you have and the background color? Is it even readable for those people or people who have more vision impairment? Do you have well-structured HTML elements? So if they're using a screen reader it's actually going to understand the hierarchy and be able to tell someone who's visiting your site what that hierarchy is. Do you have correct attributes on the elements? So you're not trying to trick the browser into thinking things are what they aren't which in turn can trick someone who's got an impairment. And keyboard-only usage. Do you have a logical tab order set to your site when you're using the keyboard only? If you wanna have a really fun experience turn on your screen reader on your computer turn off your monitor and then try to navigate through your own website. You know your website better than anyone else and if you're not able to do it then imagine someone who literally doesn't know your website. How are they gonna access it? You need to be thinking about people. Next Google looks for best practices. There's always going to be best practices and sometimes these practices are going to change but by following some of the ones that Google wants then it's going to make your site better. First one is HTTPS. Do you have an SSL certificate installed on your site that will prevent intruders from tampering with or listening to data between your site and your visitors giving you more trust? Do you have HTTP2 set up? And this will provide faster resource service and that also means that less data will be required for your users. This requires having HTTPS on it though so one is required for two. Do you ask for permission requests? Initially on load. If you have a site where you want to push out notifications don't ask someone as soon as they enter your site do you want to receive notifications from that? Google doesn't like that, people don't like that. If you have a map where you're geolocating something don't just ask can I have your location as soon as they turn on site? No, wait until you have an actual targeted event. Wait until they click on the find my location button before asking them that. That way you can provide them with a good user experience. Do you have any browser errors that are logged to console? Basically is your JavaScript working? Do you have anything that might be broken on your site that the browser is seeing as broken? The big one is also if you have images that might be 404-ing so they're not showing, broken images. And speaking of images does the image display match the aspect ratio? If you have an image that is a three by two ratio and you're trying to squish it into a one by one square and it starts distorting it, people don't like that, Google doesn't like that either. And obviously was there any doubt? This is Google, so SEO is something that they're looking for. Three areas that they're looking for. First, is your site mobile friendly? Yes, this is a mobile first talk. But if your site is mobile first, obviously it's mobile friendly. Two, are you following content best practices? Do you have well-structured HTML? Do you have title tags? Do you have descriptions? Do you have alt tags added, or alt attributes added to your images? Do you have actual text links? You're not putting an image in there so people and search engines aren't able to see where this link is going. And last, is your website crawl and index friendly? Basically, are you returning valid HTTP status codes? And do you have a robot.txt file that is opening search engines to your site? So there are a lot of things that you have to pay attention to to score well on Google's Lighthouse and have a mobile first website. Is it possible, especially on a WordPress website? And the answer is that yes, it totally is possible. And Jimmy's reaction there was my reaction two weeks ago when I finally managed to make it work on a website. And also, I had a coworker who literally texted me 10 minutes before this talk started, showing me that the Progressive Web App is now a badge instead of this, so this talk's already outdated. But I'm leading the development of a theme framework for Mediavine, which is called Trellis. And we're gonna be completely open sourcing it once we're done with it. But we managed to finally score a perfect 100s across the board. This theme, it includes a PWA right out of the box, which is kinda cool. But we're making sure that it's ticking all those boxes. And no, this theme isn't done. And these numbers are probably inflated because yes, this test, it had one image. It had one plugin active. And if you look up at the top, you can see that's the dot test domain. So it was running on a local site, meaning who knows. So we decided, okay, let's just take this half built theme and move it on to a popular WordPress host. And we scored a 99 in performance, which is still really good. This is just the theme as a Progressive Web App, which shows how cool it is if you can have a Progressive Web App for your website because it really bumps up that performance score that you have. This also does not have caching enabled. So this is just running as is. One thing bugs me though, at 90 in the SEO, we're not, it's not open to the public yet. So the robot dot text is turned off, meaning I'm always gonna have to look at that 90 if I run it on an extra site. I just have to deal with it. But once again, why is it important to go mobile first? Selfishly, because Google likes it. I mean, your site's gonna rank higher, which means you're gonna have more people visiting your site because it's faster, it's nicer. And obviously that depends on if you have quality content or not. Google's Lighthouse, it can guide your site to being mobile first. Unselfishly, however, it's for people. As we saw, all those changes that had happened over the years of search industry, they happened because they wanted to provide better experience for people. That's what our underlying factor should be. More people are using mobile phones, we need to give them an optimal experience. The web is open to all, as it should be. We need to do our part to make sure that it stays open to everyone. I'm Seth Alling, I'm a senior software engineer at Mediavine, you can find me online at SethAlling.com or on Twitter at SethAlling. Do we have time for questions? Any questions? Yeah. So the question is what themes for mobile first and any tools for developing? Right now, I don't know of any themes that are out there for mobile first, I've always just built my own. So that's probably the best answer I can give at the time. We don't, I don't know, there might be more. Maybe someone can answer that later. We can talk later. And then for developing, I'd say the main thing is, and it was hard for me at first to get my head around it, was actually thinking in a mobile environment and when making media queries, actually realizing that I am not trying to go down, I'm trying to go up, which it doesn't seem like it's that hard of a contact switch, but whenever I do it, I still, because I've only been doing it for about a year where I finally made the switch to mobile first, it's just thinking about it all the time, making sure that you're really focused on the mobile user. Is that your question? Yes. So question was progressive web app or native app? And really it depends on what it is that you're going for. A native app you'll probably still be able to do a lot more than with a progressive web app. The nice thing about a progressive web app is it's your own website and it's going to do better for that general search traffic, but if you need specific app technology, then definitely want to go with a native app. Progressive web app is just in the sense that your website now can become like an app. Any other questions? All right, thank you.