Mobile Performance with Drupal - Part 1, Testing

I don't think you need yet another blog post to tell you mobile is becoming a bigger and bigger thing. Your website has to look good and perform well on mobile - you know that. But is it? How do you tell? How do you improve?

We here at FireRoad Digital are very data driven. So our process for improving mobile performance for our client Drupal sites uses the same general methodology we use for most everything:

  1. Implement best practices techniques for implementatng a certain functionality or improvement, based on our experience with developing and enhancing literally figuratively millions of Drupal websites
  2. Test, measure, analyze the results
  3. Iterate based on what we've learned

Let's look at our own FireRoad website as an example of this process. We developed it in Drupal 7 to be mobile responsive from the beginning, meaning it dynamically optimizes how the content and user interface is displayed and interacted with by the viewer based on the device being used. So we've already done part of Step 1- the basics- but for the sake of example, let's do some testing and analyzing of the initial website before we would normally go through our typical optimizatition process.

We can also use this opportunity to try out Test My Site, a new super easy to use and understand website usability and performance test tool from Google. Based on their PageSpeed Insights, which has been embedded in their other tools such as the Google Search Console, this tool doesn't require a Google account to use and provides results easily understandable results, with clear actions for improvement.

Let's be brave (and transparent) and run this tool on

Google mobile test - first screen


Click TEST NOW and the tool will scan and process your site for a few seconds, and dispense some wisdom about mobile viewing habits and statistics while you wait.

Shortly you will see the results summary page, which for our site is ..


Google mobile test results summary


Our "mobile friendliness score is good" !  Good ... but looks like we could improve.  Click on the GET MY FREE REPORT button and Google will send you a lovely PDF with more details and action items. We can also step through the different categories right now and drill into the details.  Just scroll down ...


Google mobile test results- friendlinessGoogle mobile test results- SpeedGoogle mobile test results- Desktop

So what to do next?  The first category - Mobile Friendliness - shows how well we developed our mobile look & feel to both look good on mobile devices, as well as be optimized for mobile interaction. Looks like we've done pretty well there- the general process of developing Drupal mobile friendliness deserves a blog post of its own, including Drupal theming, media querries, Bootstrap and grids, and lots more ... which we totally should get around to writing one of these days. But looks like there are still a few points we could eke out with some tweaking.

We did the worse on the second category - Mobile Speed. We already run on the fastest, most powerful Drupal hosting platform around - Pantheon - with plenty of processing power, RAM, SSD drives, Varnish caching, and just about anythng else that can be done to increase server response. Since we are not directly managing our web server (with good reason), we do have limited options on what we can change there. On the client side, maybe some of our images are too large to download on mobile quickly. Maybe we should us e a Content Delivery Network. Maybe we haven't configured caching on the client side correctly. Lots of options here.

And thirdly, this test looks at our desktop speed. There will be some similar criteria as the mobile speed, with more leeway given since desktop users typically have more bandwidth available and larger images are needed to fill up bigger desktop monitors.  We did well, but we won't ever be satisfied with a B+.

in parts 2,3 and 4 of this series we will look at each category - why we received the grade we did and what specifically we can do to improve each number. Stay tuned - we are going for 100 / 100 / 100 !

Longer Title and Descriptions on Google Search Results

In their often unannounced, sneaky fashion, Google has apparently snuck in an update to search results pages (SERP) that increases the size of the display Titles and Descriptions.  This gives webmasters and SEOs more room to describe and market pages!

The previous generally-accepted guidance for page title lengths was around 55 characters before Google chopped it off ... now it looks like you can to 65-70 characters.

For page descriptions, 150-160 characters was the consensus length, which generally came in around 2 lines ... now we are sometimes seeing 3 lines, and up to 15-20 more characters per line. That is a lot more space to descirbe your pages.

Here is a very recent example of a Google search:

So what to do with this new exciting update? Update your pages with longer page titles and meta descriptions! Give it a day or two, then check your search results and see how it looks. Iterate and tweak as needed.

And how do you do that on your Drupal website?  Our Implementing Google Ranking Factors in Drupal guide will give you the step-by-step details, or you can just make sure you are running the Drupal Metatag module and use it to set detailed, active and unique description and page titles for you home page and all other pages on your site. Be sure to check your Google Search Console results for what Google thinks of your page titles and descriptions.

Get Insights from Google about your Drupal Website using Webmaster Tools

Webmaster Tools, according to Google, is a "free service offered by Google that helps you monitor and maintain your site's presence in Google Search results" and "can help you understand how Google views your site and optimize its performance in search results."  It is an invaluable tool that you should be using.

Some of the things you can do with Webmaster Tools:

  • receive messages from Google about issues it has found with your site (including crawling and security issues)
  • be sure that Google can properly view all your content
  • understand which search querries are leading viewers to your site
  • see which websites are linking to your site (backlinks)
  • confirm that Google is reading your sitemaps
  • see how Google views your semantic microdata
  • find out recommended HTML improvements
  • learn if you have duplicate or short meta descriptions and page titles
  • see how fast your web pages are loading

This information covers the core of modern SEO practices.  But to view it and use it, first, you need to verify your site ownership with Google to begin using Webmaster Tools.  Which we hve covered in a previous blog post - Verify your Drupal Site!.  Do that first, then wait a few days for some data to accumulate.  Then come back here and we'll walk through a few of the most important Webmaster Tools reports.

First, let's look at the home page.  You should see all the sites you have added and verified.  And hopefully a "No new messages or recent critical issues." message for each.

Google Webmaster Tools home page

Click on your website name link to bring up the dashboard for your site.  If you have any messages, check those first.  It could be that Google can't index your Drupal site, or worse, that it found malware or a security issue.  Take care of those first- a security issue could get you completely blacklisted from Google!

Our example site below shows no messages or site errors that Google tracks.  There are some 404 errors shown under URL Errors.  You can learn more about those errors so you know what to fix under Crawl >> Crawl Errors.

You want to see those pretty little green checkmarks.  A upward trend on your Search Queries is also a good thing.

There's too much to cover completely here, but you should definitely check :

  1. Search Traffic >> Search Queries.  What terms are Google users searching for that leads them to your site.  There is also data on your click-through rate and the average position you show up on search results (10 per page).  Are these the terms that you want to be found for?  Are people seeing you in search results, but not clicking?  Here at FireRoad we once wrote a blog post about configuring a certain type of complicated large computer monitor we were using.  We get tons of traffic to that post, but it really isn't useful traffic since we don't sell or service those monitors.
  2. Search Traffic >> Links to Your Site.  Which sites link to your site?  Lots of quality links (that is, from sites that Google thinks highly of) helps your SEO.  it shows those sites respect your site and content enough to link to it.  Lots of un-quality links (that is, from Estonian link farms) can really hurt your SEO.  If you've been using offshore "$100 gets you on the front page of Google" link building services ... stop.  That might have worked years ago, but now it does the opposite.  You can also disavow any links that you don't want and request Google not consider them.
  3. Search Traffic >> Mobile Usability. Having a mobile-friendly website is critical now.  Google will tell you if it thinks you have issues with mobile usability.
  4. Search Appearance >> Structured Data.  If you are using semantic microdata on your site to better tell Google what your content means, it will show up here, along with any errors.  We will have a guide to using microdata on Drupal websites out soon.  You can also use Search Appearance >> Data Highlighter to manually identify it.
  5. Search Appearance >> HTML Improvements.  It only shows a few suggestions, but on important issues it may find on your meta descriptions, page titles and non-indexable content.
  6. Google Index >> Index Status.  Make sure all your pages are being indexed.
  7. Google Index >> Content Keywords.  What does Google think are the most relevant keywords on your website?  Are they want you want?  If not, change your content.
  8. Crawl >> Sitemaps.  Do you have a XML Sitemap on your website?  It helps Google understand your site structure.  It should show up here, and make sure all your pages are included.  If not, see our post on Setting up an XML Sitemap in Drupal.
  9. Other Resources >> PageSpeed Insights.  How fast does your site load?  The faster it loads, the better you will rank.

With very little work, you will be up and running with Google Webmaster Tools and using its free tools to better understand and improve your Drupal website.

Setting up Goals in Google Analytics for your Drupal site

"Setting goals is the first step in turning the invisible into the visible."
        - Tony Robbins

Quick - what percentage of all the visitors to your website use your Contact Us page to request more information?  On your "Download our Guide to Norwegian Cheeses" landing page, how many people give you their imformation and submit the form, and how many aren't convinced and decide to get their Norway cheese info somewhere else?  Are those numbers going up ... or going down?

You can't tell how well your page design and marketing efforts are working if you aren't measuring goals and conversions.  Fortunately for Drupal sites, with a little help from Google it's easy to do.

Let's start with your Contact Us page, and assume you are using the core Contact module.  If not, first set one up.  You will also need to set up Google Analytics and the related Drupal module if not already installed.  Once those are working, head over to Google Analytics, click on Access Google Analytics on the upper right side, select your website and All Web Site Data to get to your home Analytics page.  Look under Conversions >> Goals >> Overview to see all your configured goals ... which at the moment is likely none.

First step in setting up goals in Google Analytics

So let's set some up by clicking on the Set up goals button.  You should see this:

Click on +New Goal.  Google Analytics provides many templates for configuring your goal - choose Contact us and then Next Step.  You should then see this:

Step 2 of configuring a goal in Google Analytics

It is asking you to configure how you will consider this goal met.  The default type, and only one that makes sense for our Contact Us page is Destination, meaning that Google Analytics will consider the goal met when the user visits a certain page.  Specifically we need a thank-you page - a page that is only reached after the user submits the Contact Us form.  We can't use the URL of the Contact Us page itself - that only tells us that the user viewed that page, not that she submitted it.  After she clicks the Send Message button, she should then be shown a new page that thanks her for sending the message, and perhaps has some additional sales and marketing info on it.  But the important thing is that it is a different page, so we can track it.

Which is now a problem for us, as the Drupal core Contact module doesn't have the option to specify a redirect page that the site viewer is shown after submitting the Contact Us form.  When a user submits the form, she simply sees a standard green Drupal status message and stays on the Contact Us page, like this:

Not an especially good User Experience, and more importantly, it doesn't give us what we need to trigger the goal.  Adding that important functionality has been discussed for many years, and there is work going on now to put it into Drupal 8 ... but what do we do for all our Drupal 8 sites now?  We could use the Webform module to create our Contact Us page, which does have the redirect page option as well as many other additional features, but at the cost of highercomplexity and effort to implement.

Fortunately there is a perfect module that adds just the functionality we need - Contact Plus.  Install in your preferred manner.  Now, when we edit our sitewide contact form (Structure » Contact form >> Edit), we see a new configuration field for Redirect path.  

The default is to redirect to the front page, but that isn't useful.  Instead, create a new Basic Page that thanks the site user for submitting her info, promising them to get back to her shortly, and any other marketing messages you may want.  Set the URL to something like  Put that entire URL into the Redirect path field (the module can't handle a relative path unfortunately) and save.

We now have what we need to finish configuring our goal in Google Analytics.  Go back to that browser tab, make sure Destination is selected and click Next step.

Enter just the relative path of your thank-you URL (the part after the site name) and click Create Goal. You can leave the other advanced options set to off. If you use a social tracking system that adds more characters to the end of all your website URLs (like ?JK8uejshl), then change Equals to to Begins with or your goal won't trigger.

We are done!  Well, except for viewing the results on Google Analytics, which right now there won't be any.  Run a test on your Contact Us form, wait a day or so for Google Analyics to record the event, then check back at Google Analytics, Conversions >> Goals >> Overview to see your goal completion data.  We will go into more advanced Goals and Conversions methods in a future blog post, but for now you working toward a goal.

And be sure to use the FireRoad Digital Contact Us form to see what you get after pressing Send Message!