3 Simple Ways I Test my Website Mobile Responsiveness Fast

blog cover image
20
788 followers

With over 70% of persons visiting your website on a mobile device daily, it's a no-brainer you should have a website custom-made for mobile.

Google has recently focused on Mobile loading time also, it can affect your site ranking in a way or another, doing all you can to get your site looks good and load fast on mobile is something you should definitely pay attention to.

Let's take a look at 3 Free tools from Google that will offer you the opportunity to test your page speed and simulate its look on a Smartphone, so let's go.

For the Look and Feel

1/Open the Google Chrome Browser
2/Type in the address of your website


3/On the Top Bar, Go to the View Menu


4/Select the Developer Tab and Developer Tools


5/Press on the Icon that precede "Elements" on the menu Bar


6/Done, you can test now.

Speed Test

To test your website you can use Test my Site With Google, to access the site do a Google search.

When, you're on the site, enter the URL of your website and it will analyze it for you.

What kind of information can you get from Test my Site with Google:

  • The loading time
  • The percentage of customers you're losing depending on of your page speed
  • When you scroll down you will see a graph of how your page is performing.
  • The last section will show you some solution you can apply to speed up your page

You can also tell Google to send you a detail report on your mailbox.

Mobile Friendly Test

This test is different from the Speed test.

It first function is to show you how your page will look like on a Smartphone.

For developer or people who want to learn to code you can also have a look the code.

Looks like you can also send the page for Google Indexing, however, when I tried it, it wasn't able to do that, probably a problem on the server side. I will try again later.

You can also learn more about mobile-friendly pages.

Thank You Google

It's a very smart move from Google to offer these tools for us to use for Free as Online Business and Marketing are moving very fast.

Having this kind of insight will allow us to detect and solve the problems quickly.

We can work faster and focus more on creating great contents.

Calvin

Login
Create Your Free Wealthy Affiliate Account Today!
icon
4-Steps to Success Class
icon
One Profit Ready Website
icon
Market Research & Analysis Tools
icon
Millionaire Mentorship
icon
Core “Business Start Up” Training

Recent Comments

65

Hey Calvin, Wondering if you are using apple or pc?
I have a pc and do not see the same thing that you have here. I found the developer tools but it comes up the codes. Hmmm.. Wondering if I am looking at the wrong place.

I am using a windows PC as well. If you are looking for the "Developer tools", you can either:
- Right click on the page and click "Inspect" (shortcut Strl + Shift + I)
- Or you can click on the dots on the right side of the address bar, then move your mouse to "More tools" and you will find "Developer tools" in the expanded menu

Hope this can help.

Hugh

I'm on Mac and Windows 7. I like Windows 10, waiting for to make money and will buy a Surface Book, Lol.

I guess it's the same on Mac or Windows, you should look for the small icon with a tablet and smartphone.

Now I know that sometimes Google doesn't integrate some functionalities on their browser for Windows users.

I will do some researches and will let you know.

Thank you!! I'll look around as well.

I found it. Thanks. There are codes. I can't seem to see the same images as Calvin posted.

Hello Ha,

I've checked for using the tool on a PC, apparently, it's the same way as on a Mac.

-When you open the developer tool
-your screen will be split in 2 horizontally
-in the middle, you will see a menu bar
-on this menu bar, you should see Elements
-next to it on the left
-there's an icon with a tablet and a smartphone
-a very small icon click on it.

On the top of the browser, you have the option to switch to different devices and the size of the window.

If you still can't get to the Mobile Console you can Google this:

sitepoint how to simulate mobile devices with device mode in chrome

you will see a link to a website name SitePoint, click on it, they have a very good tutorial on the matter.

Hope it helps.

Good Luck to you.

I just tried it on my Windows 10 pc. I don't get the same images that Calvin posted either. Instead, my browser actually shows a preview of what my site looks like on various mobile devices. Guess that means I'm "mobile friendly"/

Hello,

If you want to test your site speed on a mobile device Google:
Test my Site With Google
This is another tool to test your site speed on mobile.

The other one indeed will simulate how your website will looks like on different Mobile devices.

Sorry I should have put the links to these tools, it would be easier, but, I don't know if WA allows us to post external links.

If you have problem using them, please feel free to contact me, I would be happy to help.

Awesome! Thanks so much!

I just ran that test. Looks like I may have some work to do, 8s loading time, gave me a "Fair" and 28% estimated visitor loss.

Thank you, Calvin! That is so cool. There's different mobile phone layouts. Thank you, Smokeywins!

It's amazing!!! -- I a going to try enter the link here to see if WA will allow it. Here is the link for the mobile testing site with Google: https://testmysite.thinkwithgoogle.com/ (testmysiteDOTthinkwithgoogleDOTcom).

Thank you sharing what you learned. There are so much out there. It's hard to keep up.

You're welcome.

Yes, too much things going on.

Everyday I learn something new.
It's good to stay inform, however, I would suggest focusing on writing good contents, doing keyword researches and SEO.
These tasks are the key to success and they take a lot of time to master.

This remind me I have to finish my learning here at WA, Lol.

Ha I guess you can use Photoshop right?
If this is the case I recommend you use Photoshop to compress your images, Photoshop is the best tool to compress images, you have a total control on it.

Compressing images is the most important task to accelerate site loading speed.

Some themes allow you to replace an image of a page you would use for a desktop or laptop for another smaller one for Mobile. So your page will load faster on a smartphone for example.

Yes, the main problem is always compressing your images.
It's why compressing images is a very important task.

You will also see some codes problem, unfortunately you can't do anything for that because Wordpress theme will always generate more codes than necessary.

I also remembered having javascript issue, you can't do anything either, except if you're a programmer.

But it's OK, don't pay too much attention to it.

Excellent idea... is there a compression option when you save? Is it JPG? Thank you, Calvin! I totally agree. Your post is always very helpful. I always learning something new.

I am focusing right now on the content and I do get distracted. I have generated $6 so far: $3 from Google and $3 from Amazon. I am still learning how to do call to action and monetize. There is a balance somewhere I am still not fully tapped in yet.

Hmm, but I do have the EWWW Image Optimizer plugin. Is there a configuration that I am missing? I haven't touched the settings since I launched the site.

I don't think we do anything extra with EWWW Image Optimizer Plugin.

I believe, the image configurations in other software are additional to EWWW. Like Calvin suggested to use Photoshop to reduce the images because photoshop has compression algorithm. I need to dig into this as well to understand.

There are also formats such as JPG, GIF, TIF, Bmp, & many others. Each one has its own advantages and disadvantages.

Thanks, happy to see I was able to help.

In Photoshop under the File Menu, you have "Save for the Web option.

It will open a new window with a lot of options, you can choose the file type and the compression density.

For images and photos, I would suggest JPEG, try a compression of 60, you can go to 50 or even 40 if your image has a width of 1920 Pixels.

For an image with a width of about 790 Pixels, 60 or 50 is better.

For an image that looks like a graphic or drawing, GIF or PNG are better. With PNG you can save an image without the background.

Note: From Photoshop CC2015 they've moved the "Save for the Web" option to Export, it's also under the File Menu.

If you have any question about Photoshop, don't hesitate to ask me. Did you know you can also create videos in Photoshop and the compression for the size of the videos is pretty amazing.

Unfortunately, I've never used EWWW Image Optimizer, I would delete it every time I build a new website.

I don't like having too many plugins, a lot of pros recommend 5 to 8 max, and this one I just don't need it.

You can try to compress your images using a tool call Tiny Jpeg, I never used it also, but many peoples said it's pretty good.
The advantage, it's not a plugin, you do it directly on a browser.

If you don't use EWWW Image Optimizer, you can delete it, it won't affect your website.

If you don't like All in One SEO, you can try Yoast, these 2 are the 2 most famous for SEO.

Yoast has a very good blog with a lot of interesting resources, don't hesitate to visit their website.

If you want to learn how to use the tools properly for Marketing, I would suggest you go to Thrive Themes website, they have a section call Thrive University, it's pretty good and it's free.

They discuss subject like Call to action, where to have them and other very good stuff.

Thrive themes also has a very good Youtube Channel, you can learn a lot of interesting things.

I would also suggest WPCrafter Youtube Channel, this guy is really good at everything Wordpress.

But don't buy anything, even what they show you look very useful. I just suggest buying a good Wordpress Theme, like Thrive Themes or Elementor.

Watch a lot of videos and training first before deciding to buy something.

Wow, I didn't know about the video. Thank you for the tips in Photoshop about images that is really good to know. What about transparency layer? Sometimes I want the image of the logo only and not the white background so I would choose transparency bg. It'll pick up any colors when I add it to my website. I find that gif supports it but not jpg. Is there any other image format that support transparency layer?

If you don't want to have a background, when you save for the web in Photoshop, disable or delete the background color.

Save the image using png format, when you do that you won't see the background.

Now you can place the image on your website with any color as the background.

For a logo, I would recommend you use the Save As function instead. When you do a Save As, choose your file format as PNG without compression, Interlaced is ok.

Your logo will look a lot better when you save it that way.

Before saving you should also delete the background or make it invisible.

To delete a background double click on the background layer, it will become a normal layer and you will be able to delete it.

PNG is good when you want a part of a photo without the background. GIF is more suitable for graphic or drawing.

When you work with websites, you don't need to care about others file format, JPEG, GIF, and PNG are all you need.

Fantastic information! Thank you, I am always curious about those formats.

Definitely want to look into this. Thank you, Calvin.

Hmm, I have just recently started using the images as part of Site Content. Looks like I have another thing to add to my to-do list, compressing all the images I've already got on my site. I think most of my images are JPG/JPEG, never realized this would have such a negative effect on my site.

I know I did a lot of image uploading directly to my site prior to using SiteContent, but I wonder if I need to worry about Compressing the Site Content images as well. @CalvinC, thoughts on this?

I use SiteContent only for writing contents without adding any images.

I think SiteContent did compress the images when you upload them.

However, to be sure, try to upload the same image on SiteContent and on Wordpress directly by using TinyJpeg first.

If you uploaded an image on SiteContent, you should also be able to find it on the Wordpress library.

You can then inspect the size of the image.

I would suggest you test TinyJpeg for compressing, I think it's better.

Don't hesitate to share your results.

Perhaps I will do a training about image compression later using free tools like TinyJpeg.

What do you think?

I think it is excellent idea! You have vast knowledge of great tools that I have not used before. I am aware of Photoshop but I didn't know the details that you have mentioned about the images. Thank you!

That could be helpful. I do use photoshop a lot, but never realized I would need to use the "save for web" feature.

I have also used Canva in the past to create images, do I need to be concerned with compressing those as well?

In my opinion, Photoshop is the best tools to compress images, you have a total control.

Adobe has very powerful algorithms for compression for it software Photoshop.

However, not everybody knows how to use Photoshop, it's why a lot of companies and persons will suggest you use a tool like Canva or TinyJpeg for example, they're simpler and free.

As a Photoshop user for many years, I don't like tools like Canva or any other tools that promise you this or that. I know Canva is a pretty good tool and it's free. I like the templates on Canva, but I know how I can do this or that better in Photoshop, so I don't care.

For people who don't know what is Photoshop, I can understand Canva is a great option. Honestly, I will learn to use Canva and other free tools to make graphics or compressing images, because of it's how the majority of peoples will do these tasks.

I can't teach peoples if I don't even know how to use the tools they will be using.

But if you know how to use Photoshop, stick to Photoshop and its Save for the Web option, they're so much more useful and powerful.

You're welcome.

Good info! I've got an older version of Photoshop, and will definitely use it moving forward.

If it helps I used the Test My Site by Google and it worked great. Good luck,

tom

I got it working, yay! Thank you.

Thanks for these steps I will definitely use it to test my site

They're pretty interesting and most important they're from Google and Free to use.

Thanks Calvin, great information! Much appreciated! ;-)
Sharlee (Chocolate IceCream)

You're welcome the Ice Cream Lovers.

LOL! You love ice cream too, don't you, Calvin? :-)
Sending some of your favorite e-ice cream over, perfect, just the way you like it! (Just add a bit of imagination, okay?) ;-) LOL!
Sharlee (Chocolate IceCream)

It's impossible to hate Icre Cream I think particularly when outside is so Hooooooooot, Lol.

I'm learning to make some, very interesting.

Oh really! I think my freezer isn't getting cold enough, but I would none the less like to get your recipe, if you don't mind to share it! You can PM it, if you don't mind. ;-)

YES, hot weather is always a good enough excuse to eat some more ice cream! ;-) LOL! Enjoy it! ;-)

No problem, I will PM you the recipes.

I have a passion for cooking recently, it's really fun, you can mix so many different things and culture.

It's unlimited, good and healthy.

I won't say I'm passionate about cooking (do I get points for honesty?) lol, but we do believe in healthy, home-cooked / home-made meals. Sounds like you are having a lot of fun in the kitchen? Enjoy! ;-)

Honesty will always pay off in the long term, Lol.

Yes, I believe it will become a trend, cooking at home.

A lot of chefs are sharing their recipes online, it becomes so much accessible.

Before you have to go to school or ask someone to teach you, most of the time they won't because it's how they make a living.

Online have its cons and pros, for learning is definitely a pro.

Anybody can learn for cheap or even free nowadays.

Great information.
Jerry

Thanks.

Great information that you take the time to share with us. thank you, Calvin, make it a great week.

Thank you, will try to write more contents like this one.

Good thoughts there Calvin

Thanks.

Hey Calvin,
This is something I will have to check out because I never knew about this. Thanks for letting me know!!

Tried and True

Elaine

You're welcome Elaine, don't hesitate to try them.

This is something we will try. Really awesome, thanks!!

You're welcome.

You can try to get the results send to your email, it's pretty detailed.

Excellent, thank you for this, Calvin.

Has it worked on different sized screens!

Do you mean by trying the tools on a smartphone for example or changing the screen size when using the tools on a laptop.

I haven't tried to test the tools on a smartphone.

However, on a latop, no, you can't choose the screen size.

I believe the reason is on a tablet the result is very similar to a laptop Pc. I tried to visit my website on an Amazon Fire 7" and I was surprise to see the result is very similar to what I can see on a laptop.

I guess starting from 5" we will see some significant difference.

Good point you get there, have to try and see from which size, we can really see some significant changes.

They have a feedback section on the Mobile Friendly tool, it can be interesting to let them know.

Calvin

Calvin,
Most interesting, mine loads onto phones perfectly, word and photos aligned, and I have done nothing, it could be the theme.

Yes, a lot of themes are responsive now.

However, sometimes you will meet with some problem with few themes.

Being able to detect where the issues come from will allow us to fix them faster.

It can also be a good indicator that perhaps we have to consider changing themes.

Calvin

Absolutely right.

See more comments

Login
Create Your Free Wealthy Affiliate Account Today!
icon
4-Steps to Success Class
icon
One Profit Ready Website
icon
Market Research & Analysis Tools
icon
Millionaire Mentorship
icon
Core “Business Start Up” Training