At the beginning of the year, Google announced that as of 21ST April 2015, mobile friendliness would become a ranking factor. Sites which weren’t optimised for mobile would become less visible on searches from mobile devices, in an effort to help users ‘find it easier to get relevant, high quality search results that are optimised for their devices’.
Now we’re past the April 21st deadline and the dust has settled, it seems appropriate to take stock and talk about an integral part of mobile SEO that often gets forgotten: speed. For me, this is one of the most fascinating aspects of working with mobile (and responsive design in particular). Having worked on a few mobile projects as of late, I think there’s real value in discussing the quick wins you can make which will hopefully make your website quicker on both on mobile and desktop.
- Do you Really Need that Image? Or…Do you Really Need that Image that Big?
We’re currently in the middle of a content-marketing boom and as such, there’s a lot of love for bold, vivid imagery. Unfortunately, the downside of using big, bold images is the file size and its impact on speed. If you’re considering loading a lot of imagery on your website, make sure to follow these three steps:
- Optimise your file size and then upload – don’t use CSS to resize
- Use an image compressor to get the most out of your file with minimum file size
- Where possible, use clever browser caching on your images.
- Gzip Compression is your Friend
Even if you’re not technically minded, learning about the various options you have available for compressing resources on your website is well worth your time. By enabling Gzip compression, you can reduce the size of your transferred response by 90%: As a marketer, the important bit here is that you can chop down your site speed massively. If you use an Apache server (56% of the web does) then mod_deflate is your new best friend.
- Cut down Unnecessary CSS
There’s something massively pleasing about cutting down unnecessary CSS. By removing unused lines of CSS you’re reducing the filesize of your CSS file and if you’re using a variety of CSS files, you can easily shave off 100kb+ just through this simple clean-up process. If you’re using WordPress, be sure to make use of the dequeue/enqueue stylesheet functions and load up child versions of your new, reduced CSS files. Otherwise you’ll lose these changes when you update your parent theme.
- Identify the Big Wins
When I run my blog through Pagespeed Insights I have an unpassed rule about a 1kb image. Sure, leaving this image technically unoptimised means that I fail the Optimize images rule, but realistically, it’s only 1kb. When you check page speed, clear through the big wins first, then focus on the small stuff. It can be really tempting to try and clear those easy elements first, but if they’re not making a huge impact to your sitespeed then don’t worry about them just yet.
- Use a Caching Plugin
If you’re a WordPress user then rejoice, there are a ton of great caching plugins available to you. Using a caching plugin means your users are served more lightweight versions of your pages, speeding up your website. My personal favourite WordPress caching plugin is WP Super Cache, just because it comes with so many great options out of the box, however there are a variety on the market.
Introduced in 2011 by Google, Bing, Yahoo and Yandex, schema.org’s (https://schema.org) structured data markup is one of the most powerful assets currently available to local businesses looking to improve their search engine visibility. Simply put, schema is extra code (or markup) that allows search engines to easily interpret the information on your website.
Schema markup wraps around your existing business data, such as your opening hours and address, and allows search engines to easily parse and present this information back to users in search results.
Lots of websites use schema.org markup to provide what is known as structured data to search engines. You might have already come across structured data in search results when browsing Google for content such as recipes:
or even when looking for information about a film:
The BBC, IMDB and countless other websites all use structured data to tell search engines about the content on their website, and you can do the same for your local business.
If you’re looking to introduce schema markup on your website, but not sure how to get started, here are a few simple ideas to turn your existing content into structured data.
Getting Started with Schema
If you are not confident with writing HTML, it is definitely best to leave adding the actual markup to your webmaster or website developer. In this article, we’ll include some markup code snippets, which you can either code directly onto your own website or pass along to your developer for inclusion. It is worth noting that there are numerous different methods to add schema to your website. In this article, we have focused on the commonly used Microdata format, but there are alternatives available, such as RDFa and JSON-LD.
Moving on, here are three ways you can introduce structured data markup to your website:
Include Schema Markup for your Address
It is likely that you include your business address on your website. If you don’t work out of a fixed address but do offer services in a set location, then you can still include markup data for your address. To markup your address, you simply have to include the following code, wrapped around your address details:
<address itemprop=”address” itemscope itemtype=”http://schema.org/PostalAddress”> <!– opens address item –>
<span itemprop=”streetAddress”> My street address</span>,
<span itemprop=”addressLocality”>My local area</span>,
<span itemprop=”addressRegion”>My region</span>,
<span itemprop=”addressCountry”>My country</span>,
<span itemprop=”postalCode”>My postcode</span>
</address> <!–closes address item –>
Identify your Business Type with Schema
Schema markup has several different business types listed, meaning you can tell search engines exactly what kind of business you offer. There is the catch-all ‘local business’ markup or you can be more specific and identify your business further, including categories for pet stores, hairdressers and more. (https://schema.org/LocalBusiness). Where possible, it is a good idea to be as detailed and exact as possible with schema, but for a quick-win, you could use a specific local business type to get started:
<div itemscope itemtype=”http://schema.org/LocalBusiness”> <!–opens local business scope –>
<h1 itemprop=”name”>Your Business Name</h1>
<p itemprop=”description”>Information about your business<p>
<p>Open: <time itemprop=”openingHours” datetime=”dd-dd hh:mm-hh:mm”>Your opening hours </time></p>
<p>Phone: <span itemprop=”telephone”>(+44) 208 440 440</span></p>
</div> <!– closes local business scope –>
It’s also worth noting that schema markup has specific formats for opening hours, which you or your website developer will need to be aware of. For more details on this, check out the following guide: http://schema.org/openingHours
Highlight your Customer Reviews
If you have glowing reviews or testimonials on your website, then schema markup offers a great way to highlight this content to potential customers. Google has a fantastic guide to getting started with schema for reviews (https://developers.google.com/structured-data/rich-snippets/reviews), but for now here is a simple example of review markup for a local business:
<div itemscope itemtype=”http://schema.org/Review”> <!– opens review div –>
<div itemprop=”itemReviewed” itemscope itemtype=”http://schema.org/Store”> <!–opens item reviewed div –>
<span itemprop=”name”>Holly’s Store</span>
</div> <!–closes item reviewed div –>
<span itemprop=”reviewRating” itemscope itemtype=”http://schema.org/Rating”>
</span> stars –
<b>”<span itemprop=”name”>A great place to buy from.</span>” </b>
<span itemprop=”author” itemscope itemtype=”http://schema.org/Person”>
<span itemprop=”name”>Reviewer Name</span>
<span itemprop=”reviewBody”>Here’s the review content, left by the reviewer</span>
</div> <!–closes review div –>
The schema markup for reviews is arguably the trickiest of the three we have highlighted today, but it is certainly worth including if you receive a lot of great press or endorsements from customers.
Next Steps with Schema
Want to get started with schema right away? You can visit Schema.org for all of the various markup types available or browse Google’s structured data guide (https://developers.google.com/structured-data/).