DIY: Test your mobile site!

More than half of all internet traffic comes from mobile devices (fact). So if you are ignoring your mobile site, you might be missing out on half your audience. In this post, I’ll go over the way we check mobile sites in our website reviews. After this post, you’ll be able to check your mobile website yourself on key elements.

Use your phone to check your mobile site

Open your phone’s browser and go to your website. See how it looks. You didn’t see that advice coming, right..? I know of business owners that have never done this. They paid a shipload of money to create a mobile site but haven’t looked at it after their designer presented the design. Like Nike said: just do it. See what you are missing.

Things that you need to check on your mobile site:

  1. Top tasks. Make sure visitors can find your main pages in a heartbeat.
  2. Address and phone number. People use mobile websites of shops to set their navigation, for instance. If you want customers to find your store, list your address. If you want people to call you, this is the main call-to-action on your mobile site. Make it clickable.
  3. A working menu and a search option. It’s nice to add a hamburger menu as it saves space, but please make sure it folds out. Add a search option as a backup for your menu.
  4. Mobile design and UX. Make sure your mobile site is not just your entire website squeezed in that little screen. Toning it down colorwise also helps.
  5. Buttons and links. Make sure these are easy to spot and large enough to click.

Please find more information on this in our mobile UX article.

Order a website review NOW and get a plugin of your choice for free. We'll even configure it for you!

Get a Yoast website review
Note that different phones will differ in how they present your website. For that very reason, we recommend checking the mobile version of  website in other ways as well to find flaws in your mobile site.

Google’s Mobile-friendly test

Test your mobile site: Mobile-Friendly-Test screenshotMobile-friendliness is a ranking factor. Google created a test tool, which makes it easy to see how Google sees your website. It comes with a nice scoring system, that tells you what to improve.

The Google Mobile-friendly test also shows a rendering of your mobile page. If that page looks like the one on the right, my guess is there is still work to do. Even if Google tells you your website is mobile-friendly. Remember that it’s an automated check. In our reviews, we check all the things in this article manually, just to make sure we’re not missing things. If you want to do these checks yourself, please do so as well. Sometimes common sense is much more valuable than what Google tells you :)

Let me elaborate on that:

This video is part of one of our online courses. Find out more about our Basic SEO training!

Web developer toolbar

You can also test your mobile site straight from your browser. In your Chrome browser, simply visit your own website and right-click somewhere on the browser screen. Click ‘Inspect’. After that, click the second icon in the inspector’s menu bar:

Test your mobile website: browser inspector mobile

This will open the website like in the screenshot above. It will allow you to see if your website is fit for multiple screens sizes. Firefox has a similar feature called responsive design mode.

When you select for instance any iPhone in that drop down, and it shows your entire website scaled down to fit the screen, you know your mobile site isn’t mobile-friendly. I tested this local Dutch website and found exactly that:

Test your mobile site: not mobile friendly example

Both tools give a clear advice to optimize that mobile website :)

Conclusion

If you want to check if your mobile site works at all, use the Inspect tool in your browser and Google’s mobile-friendly test. Check for a number of specifics if your website is fit for mobile devices, like top tasks and the size of your buttons. If you would like some more guidance in breaking up your design to fit multiple screens, please read this article on our development blog.

The checks mentioned above are also done in our website reviews. If you want pointers on how to optimize your entire website, including possible recommendations for your mobile site, buy your website review here.

DIY: Optimize your browser cache

Browser caching is the way a browser stores files from your website on a local computer. Browser caching makes sure all files load without unnecessary server connections, which is much faster. In this article, we’ll tell you how to check if that browser cache works and how to optimize it in WordPress. We’ll tell you how we approach this in our website reviews.

What is browser cache?

Browser cache allows you to skip server connections and pull resources right from your local computer. This cache works like the temporary internet files that take up so much space on our computer. You want it there, as it helps to speed up things. But you don’t want it there forever, as things might change on a website. You can set this ‘refresh’ rate to whatever expiration time your want: the longer, the better.

List of expiration times

In most cases, you can set expiration times in seconds. Here’s a handy list of possible expiration times for your browser cache:

  • 3600 seconds (hour)
  • 86400 seconds (day)
  • 172800 seconds (two days)
  • 604800 seconds (week)
  • 2592000 seconds (month)
  • 31536000 seconds (year)

Google recommends a minimum cache time of one week and preferably up to one year for static assets or assets that change infrequently. For the majority of sites, that’s right. However, the right time of expiration largely depends on how often your content changes. If you have a news site, your homepage changes all the time. You can set the expiration time for your homepage’s content (HTML) at 3600 seconds (1 hour) without a problem. But if you load a CSS file in that homepage, that will probably only change during a redesign. The expiration time for that CSS file can easily be 31536000 seconds (a year). Please test and find what works best for your type of content.

Order your review NOW and we’ll throw in a one-year license premium plugin of your choice for free. We’ll configure that plugin for you as well!

Buy now for just $699! »
Offer valid until the 30th of June

Yoast_SEO_courses_banner

Testing your browser cache

In this section, we’ll show you a couple of site speed tools we use to check browser caching in our reviews. Which one you’d like to use to check browser caching for your website, depends on personal preferences as well.

YSlow

My personal favorite for checking browser caching is Yahoo’s YSlow. It’s available as a browser extension, works pretty fast and checks a lot more that just the expiration times of your browser cache. Here’s a screenshot:

Browser cache: yslow screenshot

ETags

Besides just a simple expire headers check, YSlow also allows you to check for entity tags, which are also called ‘ETags’. These ETags are used to “determine whether the component in the browser’s cache matches the one on the origin server.” This helps a browser determine if a new file is available. Note that ETags tend to slow down a website, so please dive into the subject and see if you really need these.

As you can see in that image (click to enlarge), the first file is a CSS file that has a one day expiration time. The screenshot was taken June, 20th and the file expires on the 21st of June. I don’t think that is necessary; in most cases, set expiration times for CSS files to a year.

Google PageSpeed Insights

Google provides its own check for browser caching in PageSpeed Insights. If the section ‘Should Fix’ contains the recommendation ‘Leverage browser caching’, you should definitely address this.

Browser caching: pagespeed insights screenshot

As you can see in the image above, like YSlow, Google PageSpeed Insights tells you which files need a (far future) expiration date. And that these are usually CSS files,  JavaScript files or (template) images.

If these tools aren’t clear enough, there are more tools we rely on to do extra checks, like Pingdom and GT Metrix.

WordPress plugins that help browser caching

Browser caching is something you can for instance set in your .htaccess file. For most users, that’s probably not something you do every day. However, if you are using WordPress, you’re in luck. There is a number of plugins that can help you with this. We have listed two for you below.

WP Rocket

At Yoast, we’re fans of the WP Rocket plugin. It’s simplicity, combined with a lot of options, make this our to-go-to speed optimization plugin. Browser caching is enabled right after activation of the plugin. Feed cache and mobile cache can be enabled in the plugin. Find out more here.

W3 Total Cache

Because of the labyrinth of options this plugin has, we stopped recommending W3 Total Cache for the average WordPress user. However, it does have more specific browser caching options than most other plugins. In WordPress (with this plugin installed), go to Performance > Set expire headers and enable these. After that, go to the separate sections for CSS/JS and HTML and choose your section-specific expire time.

WP Rocket is really our first recommendation. But if you know your way around speed optimization, feel free to check W3 Total Cache as well.

Why you should buy the Yoast Basic SEO training

Most of the SEO skills we teach you in our Basic SEO training can also be learned in our blogposts and eBooks. So, why should you buy our Yoast Basic SEO training course then? In this post, I will give you 5 reasons to buy our training!

1. DIY SEO is cheaper than hiring

Learning to do SEO yourself will always be much cheaper than hiring someone to do it for you. And SEO is something you will have to continue doing, it won’t be done… ever. We will teach you to do long-term holistic SEO. Buying the Yoast Basic SEO course is an investment in your own knowledge. It will definitely pay off!

2. Learning SEO step by step

Although our blogposts do in fact cover most of the important topics concerning SEO, our training helps you to understand all these topics in the right order and context. We will teach you everything you need to know and start from the very beginning: by explaining what Google does. In 5 modules containing training-videos and reading material we will gradually talk you through all aspects of SEO.

3. You will be forced to actually learn

Our Basic SEO course will really put your knowledge to the test. Reading a blog post or an eBook could make SEO look easy. You could easily start thinking: I get this, I can do this. Our Basic SEO training will challenge you with questions following every module. These questions are particularly hard and test whether or not you have actually understood all the material.

4. You will receive a certificate and a badge

After you have finished the 5 modules of our Basic SEO course, you will receive a personalised certificate and a badge. You can put the badge on your site. Clicking on it will show your certificate on Yoast.academy. That way people can see that you’ve actually followed our entire course.

5. The Basic SEO training costs only $249

For this low price you will receive 5 modules (Introduction to SEO, Keyword research & Site structure, Technical SEO, SEO copywriting and UX and Conversion), including 12 training videos, lots and lots of reading material and accompanying questions. You will have to reserve at least a full day to complete our course. On top of that you will receive two eBooks (Optimizing your WordPress site and Content SEO) for free.

Get your Basic SEO Training now »