Skip to main content

Mobile Friendliness

Lesson 21 from: SEO - Website Technical Audit Fundamentals

Kelly Murphy

Mobile Friendliness

Lesson 21 from: SEO - Website Technical Audit Fundamentals

Kelly Murphy

buy this class

$00

$00
Sale Ends Soon!

starting under

$13/month*

Unlock this classplus 2200+ more >

Lesson Info

21. Mobile Friendliness

Lesson Info

Mobile Friendliness

In 2018 Google Rolled out its mobile first indexing. So what this means for us is that rather than mobile or desktop sites being treated the same way in google search results, Google is now prioritizing mobile sites in its search. This means that google now officially prioritizes sites and search engine results that are well designed to be viewed on mobile devices. The primary factors to take into account our responsive design, site, speed and schema. Responsive design is the gold standard for all websites. This type of design adjusts for whatever size screen the user is viewing content on. So the content will work well and display correctly for someone on a tablet, a smartphone or even an external monitor. It requires a lot of resource and time to convert a desktop site to responsive after the fact. So our recommendation is to do the initial build of a site to be responsive the speed with which a website loads can make or break the browsing experience on a mobile device. Since mobile ...

devices are used on the go. Often leveraging data that can be more fickle than wifi. A site that's already slow on desktop can be painfully slow to open on mobile. We've all had the experience of turning to our phones to access info quickly, only to watch in frustration as the content takes several seconds to appear. To avoid this issue. Follow Google's mobile friendliness guidelines which prioritize limiting the size and quantity of images that way down online content. We'll talk more about this in a little bit mystifying code and leveraging browser cashing our two additional effective techniques to understand which tactics are right for your site use google's mobile friendly test. It's available directly in google search results. Now we'll talk about schema given the limited real estate than a mobile device provides, it's even more important to show up in the top spots. For many broad searches, Google will provide an answer to the query at the top of the surf, often referred to as position zero. The best way to appear in this answer boxes by incorporating schema are structured data into your website. Schema is a series of tags included in a site's html that can help categorize what's on different pages for the search engines. To understand. For example, if you had a website selling water balloons, you'd use product schema to easily list product details like price and size for google to classify your product. Then if someone searches water balloons under $5, Google can quickly scan these tags to determine which site offers that product at that price and populate a relevant answer in position zero to provide a frictionless experience to a potential customer. There are two primary ways to ensure that clients say is in good shape from a mobile friendliness perspective. So first you want to run the root domain through google's mobile friendliness test. As you can see. You can just google the words mobile friendliness and it'll come up directly in search results. So why don't we use the new york times as an example. We're gonna go ahead and plug the oral into the test here and click run the test. It'll take a little bit of time to analyze because as you can see it's fetching the page and the tool will list the specific issues with the site that could be improved or adjusted to make the site easier to use for mobile visitors and then you can screenshot and download these items for the developers. Reference. All of these updates will need to be made on the client side and here we can say that based on google's own metrics. The page is not actually mobile friendly. So you can see here on the right, it gives you a screenshot of what it looks like on a mobile device and the source code in case you need that. And then we can scroll down to see why it's not mobile friendly. So you can see that the priority issues are pulled out here. There are four of them that the text is too small to read that the content is wider than the screen. The view port is not set, clickable elements are too close together. So then when you scroll down, google gives you these resources, learn how to fix these errors. So if you click on this it'll give you a page that clarifies what they mean by many of these different issues and what you want to do like we said is just screenshot these or make notes of them and talk with the developer about how you might be able to resolve these issues so the text is too small to read, what can we do to make sure that we make the font bigger without actually weighing down the page speed, things like that. You'll also want to assess whether your site speed is in the danger zone. So for that we'll want to use Google's other free tool. The page speed insights to test the speed of the site on both mobile and desktop. So again, we'll use the new york times as an example. You can just google page speed insights to easily find the tool, enter the web page you are all here, we'll give that a little bit of time to load as well. And the best method of tackling any page speed issues that arrive out of the page speed insights test is to follow the instructions provided by google, much like the mobile friendly test. So here we can see that the new york times has an average page speed for mobile and an average page speed for desktop. But when we toggle to desktop we can see that while the page speed is average, the optimization is low. So that's again something that you want to flag. So we'll look specifically at mobile here, The optimization for mobile is good. It's a 99 out of 100, which is pretty much about as high as you can get. It's pretty rare to see 100 out of 100. And as we scroll down, you can get more details on the page load distributions. But what we really want to look at are these page stats and they show what the specific issues are affecting the page speed of this specific site. So the optimization suggestions for the new york times are to enable compression and to leverage browser cashing these are both pretty common recommendations to fix site speed. Then you can click show how to fix And it says here compressing resources with zip or deflate, can reduce the number of bytes sent over the network and then it gives you a quantification here. So if we did this, if we enabled compression that would lead to potentially a 64% reduction in the slowness of the site, That's pretty significant. So that's definitely something we'd want to prioritize and it gives you the exact file here that you'd want to compress. Same. If we look at leverage browser cashing, it gives you the very specific cacheable resources that google is recommending to cash, then we can also scroll down and see optimizations already present and we can see what's already been done by the developers for this site in order to optimize for page speed. So again, what you want to do here is screenshot or put into a spreadsheet these optimization suggestions and then have a conversation with the developer about how we can kind of prioritize these different components to improve site speed overall.

Class Materials

Bonus Materials with Purchase

19. Bonus Lesson - Site Speed Diagnostics and Optimization

Ratings and Reviews

Jazzy Expert
 

Great experience..!!!

Gaily Cowart
 

Aleena Akbar
 

Student Work

RELATED ARTICLES

RELATED ARTICLES