Clouds and Google

Google and WordPress – let’s talk integrations

How to integrate some Google Apps and services into a WordPress site.

Google Products you Need to Integrate Today

Google has so many free and great options that can integrate and support your site that you absolutely have to have a Gmail account these days. Remember the golden age when you had to be INVITED to get a Gmail account from some in-the-know tech guru that you knew? Good times that changed the times. Ok, I’ll presume you’re logged into your Google account at this point and let’s get started.

Google Analytics

Site visitor tracking is absolutely the number one product to get running on your site, the sooner the better. Eventually, you’ll be done playing with all the shiny new plugins and features and want to know HOW your site is doing, and Google Analytics is the king in this regard. Yes, I know Jetpack also provides site visit stats, which is great, but analytics gives you so much more that if you are at all serious about measurements eventually you have to go to Google Analytics. So head on over to google.com/analytics and sign in.

Bottom right is the gear ADMIN icon, click on that, and you’ll see a list of properties you’ve got running. Don’t worry if there isn’t any yet, that’s why we’re here. There are three new columns that should pop up. On the left one is a drop down menu, select that and choose to Create New Account. You just entered the rabbit hole.

You’ll have to fill in some info about your site – basically fill in what you know, and accept the emails you want to receive about additional analytics emails to you – then at the bottom click Get Tracking ID. This is a number like “UA-xxxxxxxx”. Copy that, you’ll need it when you head back to WordPress.

Yeah, I know that there is a bit of script code that goes along with that if you want to MANUALLY add it to your site but if you know how to do that, you probably don’t need this tutorial.

What we’re going to do is suggest some plugins that handle that bit for you. Actually, it seems EVERY plugin and theme wants to do this for you if you provide them that number. Don’t. Choose one method of putting it into your site and stick with it for all your sites. That way you’ll remember where it is if you need to change it in the future (you probably won’t, but still).

A simple plugin that will provide some user data is Google Analytics Dashboard for WP. After you put in your UA code and authorize it, you’re all set. Google Analytics will start tracking your data and this plugin gives you a dashboard chart of visits for the last week and a quick way to get to your analytics page to look deeper.

Google Analytics Dashboard for WP (GADWP)

Monster Insights is another plugin you might like, it’s from the people that brought us Yoast SEO. There’s also addons that can track Adsense and Adwords inside this plugin.

Google Analytics for WordPress by MonsterInsights

Basically, most of these Analytics plugins give you an easy way to insert your UA code and pull a little data from Analytics for you.

If you’re more serious though, you’ll go to analytics to see the data. And once you get more serious there’ll be more scripts from Google to insert onto your site. To handle these I use the header and footer plugin to control these tracking scripts and keep them all in one space. IF it’s a really serious site that has lots and lots of tracking codes, use Google Tag Manager (which you can find at the login window for Google Analytics). That’s a whole tutorial unto itself so we won’t go there.

Head, Footer and Post Injections

Google XML Sitemaps

A sitemap file contains a list of all the pages on your site and is used by search engines to index your site and figure out where things are on your site. Google XML Sitemaps is a free WordPress plugin that creates a sitemap file for your website so your site can be indexed more quickly by search engines. If you’re a Google Webmaster user, it’s one of the requirements to having a healthy website for search engines.

Going an extra mile, this plugin automatically creates and submits your new sitemap file to the major search engines (Google, Yahoo! and Bing) every time there’s a change (e.g. you publish a blog post). Yoast SEO plugin also has this capability but this is a one-trick pony plugin and I like that type of pony.

Google XML Sitemaps

Google Page Speeds Insights

Google has a tool to help you see how fast your site pages are loading and to give you tips on how to speed up your site. Now, you could go to Google Page Speed page and manually enter your page but this is an integration blog post, let’s get it right into our nice friendly WordPress backend.

Google Pagespeed Insights

There’s two steps beyond installing and activating this plugin. You’ll need to create a Google API key (the plugin walks you through that under OPTIONS) AND you’ll have to enable the PageSpeed Insights API in the same Google Console. Don’t overthink creating this key, leave most of the options alone and just follow the instructions at the plugin page and you’ll be good.

Then it’ll run. This may take awhile depending on the size of your site as it is checking every page and post. When it’s done, you’ll have every page and post of your site mapped out and graded for speed with suggestions on how to improve speed right in your WordPress backend.

Best feature? You can sort it by the speed grade to see your worst offenders.

I did hit some instances where selecting DETAILS didn’t resolve due to server speed – which was also the biggest thing holding back that site speed too so it made sense – but just go back and try again.

Beyond Analytics…

Google Apps Login

Google Apps Login

You can also set up your site login to use Google Apps Login via this plugin. Takes some configuring but if you users are Google users you can save them a password. Also, you can then setup the next handy plugin.

Google Docs

Google Drive Embedder

Want to embed a Google Doc from Drive right into WordPress post? There’s a plugin for that. Google Drive Embedder.

Google Images

Uploadcare: Add media from anywhere

This handy little plugin let’s you add images from your Google Drive to your media library. AND with a shortcode, users of the site can upload images to your connected Google Drive as well. Bonus features: not just your Google image library, it allows image uploads from a lot of online storage locations like Facebook, Instagram, Dropbox, etc.

Google Calendar

Google Calendar is one of the company’s core tools. Event sites, such as a community centre, could have their event coordinator create a public Google Calendar, update it as necessary, and have it displayed on their site to make it easy for their people to keep people up to date as to what’s going on at the centre. I’d love it if my community centre would do this as I wouldn’t have to call them so dang much.

Simple Calendar – Google Calendar Plugin

With the Google Calendar Events plugin, you can display your full calendar as a WordPress post or page or, as shown below, by using a widget. Here’s some of this plugins great features:

  • Display events from any public Google Calendar.
  • Keep managing events in Google Calendar.
  • No need to create events in WordPress or create/educate a new user.
  • Out-of-the-box designs that match your theme’s look and feel.
  • Fully responsive and mobile-friendly monthly grid and list views.
  • Customize event content display using simple tags. No coding required.

Google Fonts

All four of these plugins (Easy Google Fonts, Google Fonts for WordPress, Google Font Manager and Google Typography) enable you to add and use any of the 600+ Google Fonts on your website. Their features vary a bit so give them a look and grab the one that fits you best. And DON”T USE TOO MANY PER SITE. That looks like garbage and cheapens your site. Pick a few and stick with it.

I don’t always use Google Fonts, but when I do I use:

Easy Google Fonts

Last One – Google Reviews

I’m a huge believer in Google Reviews driving organic traffic for local business – if you can get the reviews in the first place. If you’ve managed to do that, why not put the reviews right on your page instead of driving them off you site? Google reviews have more credibility than testimonials (that you *koff* place “without edits” onto your site, yeah, right). And here’s an additional tip about making it easy for people to leave a review in Google Reviews.

Google Places Reviews

the lake lousie canoe shot for google reviews - bizarre I know, sorry

Google Review link generator – make it easy for…

google review techniques

Here’s a quick SEO Tip: get people to review your business on Google+ to show Google you’re real and that real people are aware you exist. Don’t use fake reviews.

But people aren’t reviewing your site, so how do you encourage them. By asking them and sending a direct link to where they post a review on Google. Not as easy as copy pasting though as javascript is in use on the review page so instead use this site to get the direct link:

https://supple.com.au/tools/google-review-link-generator/

This tool that let’s you build a link that goes directly to the “add a review” section of your business listing on Google. Google ranking is affected by how many reviews you get in this business listing. Outperform competition by sending people a direct link to how they review you on google in a newsletter.
Historically, this direct link to the review popup window has been elusive. Google deliberately tries to prevent companies soliciting reviews to prevent false reviews, spam reviews, or bot generated reviews. All well and good for getting quality reviews on your Google Business listing, but what if I want to encourage my real and actual customers to submit a review when they can’t be bothered to click on more than one button? People are lazy after all and we don’t want to waste their time. Google changes how the reviews are made and the code behind it often to confound the bots so a direct link will get broken often, even if you are able to find it.
Supple.com, while generating the link, will also email notify you if the process changes so you can make a new direct link to the review pop-up. Now that’s handy!
I don’t suggest you flood the Google Reviews with fake reviews, that doesn’t help anyone. Rather send the link to your email base or include it on your website to make it easier for quality people to review your business.
taking the plunge into small site hosting

The Speed Force: How to Optimize WordPress for Better…

Having a site that loads fast is the holy grail of web site owners. It’s the stuff of legends but we have faith that fast sites are attainable. In this post we hope to point you in the right direction to speeding up your site in a variety of manners which should be included in your processes for creating your content, managing your sites, server setups, and in code development.

Why is it Important?

Page load times are a “probable influence” on organic rankings according to Google. While you might demonstrate a correlation between particular speed metrics and search ranking, you can’t outright PROVE a causality relationship, since other unmeasurable factors are still at play. For all intents and our purposes though, speed matters to Google rankings, and for one very good reason – fast loading sites are enjoyable sites.

Speed matters for End Users

Google wants each search result to be a good experience for their users. So while relevant content is the most important factor for page rankings, the speed at which a user gets their webpage on screen IS critical for the experience to be pleasurable, and that is a factor that Goolge considers for page rank too. The problem is that sites with a lot of content may be great experiences and some sites with little content may be a pile of dung – pure size and speed can’t be the sole determining factor in optimal site speed. Optimization is the buzzword here. Do your best at optimizing that page load time and Google and your users will reward you.

Google is pretty mum on what it is actually ranking in terms of site speed (some suspect it’s the “time to first byte” loading speed) regardless, speed IS a consideration you should take seriously for many reasons including page ranking, customer experience and better conversion rates.

 

What’s this “Page Load Time” stuff?

Think of page load time as the complete journey. From the server assembling and fulfilling the requests to the networks that deliver it, to finally popping up on your screen where you can interact with the page. Let’s use a family going on a trip as our analogy for determining page load time:

  • The server gets the page ready to deliver and figures out how to deliver it (planning your trip and getting the kids into the car),
  • How often you’re making those deliveries (how many trips you need to make).
  • How much you’re delivering (how many passengers and cargo),
  • How fast its delivered (speed bumps and the speed limits on the road),

Optimizing each of these factors is ideal for page load time (and for the family). To confuse matters when people say”page load time” for a website, they may mean one of two measurements: “document complete” time or “fully rendered” time. Google might not distinguish between the two for page rankings but users certainly do. People want to get on with it, and will start to interact with a page before it’s completely on the screen. For our purposes we’re primarily going to focus on “document complete” as the page load time. “Fully rendered” has factors such as the browser being used and the users computer which we have no control over.

Now, page load time is measured in milliseconds. That’s a thousandth of a second. Humans can detect problems at 100 milliseconds. That’s right, above 1/10 of a second we start to notice (relative to expectations of course). Anything below that 1/10 of a second is deemed as instantaneous by our brains (kids response time is measured in days but expectation time is 1/100 of a second which may explain some parental frustration).

Interesting fact: Usain Bolt’s reaction time out of the starting blocks in the 100-meter final in Rio was 0.155 of a second and he wasn’t the fastest starter! He was 7th of 8 runners. He won his races in the first twenty meters of the run, decimating everyone with his phenomenal ability to get to top speed faster than anyone else in the world. Try to beat his reaction time here.

So fast response time matters but page load time is like the full hundred meters. Response time is one factor among many.

So let’s Start with the Content

Now a picture is worth a 1,000 words and impacts load time just as much. As good as WordPress is at developing thumbnails and as good as the plugin SmushIt or WordPress is at compressing them on the fly, always START with the smallest possible image that is the largest you need (upsizing is bad for image quality, just trust me on that). That’s in terms of pixel dimensions or physical dimensions. Just keep in mind, images are the single worst site element for dragging page load time down, so let’s begin our speed journey there.

Get the Physical Size Right

Don’t take a 300X300 pixel image and stretch it to 2000X2000 pixels. Conversely, don’t use a 300X300 pixel image when all you need are 30X30 pixels.

icon speed test gifTake this icon. I saved it at 1081 X 1081 pixels and am presenting it at 300 X 300 pixels. What a waste! Yes, WordPress gives me some auto-generated thumbnail options that are closer to the size I wanted, 500X500 pixels to be precise, but even if I use the 500 pixel thumbnail image and drag and shrink it down to 300 pixels, I’m still loading up the 500 pixel image, apx. 30% waste in load time for this image. And the original, which I’ll never use, is taking up server space!

PRO TIP: Start with as close to the correct physical pixel size image as you need, every time, for massive page load time savings.

 

 

 

Use the Right File Format for the Image

You’r a lot about different file formats, people get pretty emotional about this topic. Be a Vulcan, don’t let emotions rule your decisions. Each file format has their own benefits when it comes to how many kilobytes you want to shave off the image.

GIF: no matter how you pronounce it, this format is much better at handling large non-gradient images. Like logos and icons – that have solid blocks of colour. It also supports transparent pixels, so you don’t have to use a PNG for that.

JPG: great for photos. You can also save them using different levels of file compression (which results in image degradation). I always compress till I can notice, than back off a bit. PRO TIP: I use 8 as my default in Photoshop and go from there.

PNG: great for photos that need transparency, not so great with big blocks of colour, you’ll get a slightly larger PNG than you would a GIF in that case. PNG’s are great, but only use them if you have a need for transparency, otherwise JPG compresses the file much better.

 

Tests with Flat Colour Images

PNG size test
This transparent PNG’s file size is 22.6 kb at 250X250 pixels and uses the RGB colour space.
gif spped test
This GIF is 2.26 kb at 250X250 pixels and uses very narrow Index colour space without transparency.
250X250 pixels
This GIF’s file size is 1.5 kb at 250X250 pixels and uses an even narrower Index colour space where the colour white ahs been replaced with transparent pixels (you can’t tell but there’s no white in the icon image, the white from the background is showing through).

 

This JPG image is 250x250 pixels, uses the RGB colour space, is 16.8 kb, and has no transparency options.
This JPG image is 250×250 pixels, uses the RGB colour space, is 16.8 kb, and has no transparency options. I purposely pushed the compression too far and it is starting to get artefacts (ugly additional pixels) and the image isn’t as crisp as it should be.
Max quality JPG is 283 kb in file size.
Max quality JPG is 283 kb in file size. Image retains all quality but is far larger file size than it needs to be.
MidHigh quality JPG is 115 kb in file size.
MidHigh quality JPG is 115 kb in file size. No noticeable image quality loss and less than half the file size. But how small of a file size can you go before the image starts to go bad?
Low quality JPG is 69 kb in file size.
Low quality JPG is 69 kb in file size. You can start to see some degradation of the image if you look close. Blacks are turning gray and the image loses crispness. The colours also start to lose some vibrancy or saturation.
Lowest quality JPG is 48kb in file size.
Lowest quality JPG is 48kb in file size. Noticeable suffering of image quality in the floor, legs and solid colour areas.
PNG is 718 kb in file size.
PNG is 718 kb in file size. Top notch image, just huge in file size.
GIF is 147 kb in file size.
GIF is 147 kb in file size. You can notice some blocking happening in areas that are supposed to be gradients.

Use Excerpts

Do you have a page that shows the first chunk of bunch of your posts? Consider crafting excerpts. When that page is formed it has to process those pages, grab the first bit of each, assemble it and present it. If you have excerpts, that same page quickly grabs the excerpt, and only the excerpt, and knows exactly how to use it. Not a big problem for actual content delivery time, but the process to get that page ready to show is sped up considerably by crafted excerpts.

 

Lots of Comments?

IF you have a ton of comments on a blog post consider breaking them into pages. Text is small though, so you’d better have a LOT of comments to make this worthwhile as you’ll LOSE visitors for every additional click they have to make through your site. Find this under your DASHBOARD-> SETTINGS -> GENERAL

saved as a really small gif by the way
saved as a really small gif by the way…

Caching

Caching is… well, bothersome, but necessary. A webpage on WordPress is made up of many parts that get assembled and presented to the viewer as the whole page. Fine and dandy, but if you have a lot of parts and calls to the server, this puts a strain on the server which slows down the page load time. Caching assembles and stores the final assembled page beforehand, and serves the complete page when the call is made to the server. No building it on the fly so it speeds up page load time.

It’s great for the front end but I’ve run into so many issues with the back end that it makes me debate it’s worth for small business sites. I’ve had it conflict with many other plugins, there are ongoing security issues with the most popular caching plugins, and I don’t believe small sites should bother with the hassle it may bring to your site.

Many speed site testing sites look for caching and knock down your rating for not having caching turned on, they presume that it’s always a good thing, which may not always be the case. Google doesn’t care. They measure speed, not how you get there, so try caching out carefully and intentionally and make your own judgements as to it’s worth. On pure speed, yes it’s a good thing, on hassles it brings your the administrator sorting out conflicts, maybe not so much.

I have a few sites running Comet Cache, it seems to be a pretty stable, simple, non-conflicting cache plugin. It also allows you to clean up your database occasionally. Which is also a also a good thing to do – purging all those revisions and trashed posts will make your database easier to deal with for the active pages and posts.

Browser Caching

On the other end of the equation, why should the browser be getting new elements each page view if your page elements don’t change often? Let the users browser pick up some of the heavy lifting by storing elements on their side and re-using them when needed for set amount of time (it’s good to reload old elements occasionally in case a change is missed).

You can configure your web server to set caching headers and apply them to all cacheable static resources. It’s pretty easy if you have access to the .htaccesss file, just add the code below and adjust as you see fit. There’s probably plugins that do this too but I haven’t bothered to look for them.

## EXPIRES CACHING ##
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg “access 1 year”
ExpiresByType image/jpeg “access 1 year”
ExpiresByType image/gif “access 1 year”
ExpiresByType image/png “access 1 year”
ExpiresByType text/css “access 1 month”
ExpiresByType text/html “access 1 month”
ExpiresByType application/pdf “access 1 month”
ExpiresByType text/xjavascript “access 1 month”
ExpiresByType application/xshockwaveflash “access 1 month”
ExpiresByType image/xicon “access 1 year”
ExpiresDefault “access 1 month”
</IfModule>
## EXPIRES CACHING ##
Obviously, you can set your own time limits to when you think these will need to be re-sent to the user. Browser caching works if assets on your pages aren’t reloaded each time a user visits your site.

Expiry Headers

Another want most page speed analyzers ask of your site is to add expiry headers. These are basically instructions for the browser on how long they should hang onto elements of your site before asking for a fresh new copy. Images tend not to change too often, so why retrieve them every time when a visitor comes back? Setting expiry headers manually involve editing your .htaccess file. And since we don’t like coding manually, we use a plugin for it. Far Future Expiry Header does the writing to .htaccess for you (FYI: in iThemes Security, there’s an option to prevent plugins from writing to the .htaccess file, oops, so if you notice this isn’t working check there first). Far Future Expiry also lets you turn on gzip compression, another oft suggested speed boost trick, though it depends on your server if this actually works. That is, even if you write to your .htaccess to enable gzip compression, the server may not allow it and won’t pick up on those instructions.

CDN

Content Delivery Networks is another way to speed up the delivery of your site’s resources. Essentially, it spreads your site out to other servers that are able to deliver faster speeds for specific types of content (images, live streaming, etc). And another benefit to using a CDN from @levi_mccormick on twitter pointed out to me:

One reason a CDN can speed up loading is allowing more simultaneous connections. Browsers limit connections per domain.

Again, this is best used for larger sites with thousands and thousands of page views where those milliseconds add up. It’s fairly easy to implement, but again, it does require some experience and can cause caching issues. It’s a way to prevent bottlenecks of high demand content as well. For small business sites, the speed increase is minimal and may not be worth your while to implement. Like most of these WordPress speed boost tips, you have to consider the effort to results ratio and decide if it’s worthwhile to you.

Read more about CDN on Wikipedia. Google, Amazon, and WordPress.com all offer some form of CDN. My only advice is to use CDN intentionally and watch for possible problems during implementation and down the line. Know what you’re doing or don’t do it at all.

Hosting

Your domain name provider and your site host play a large factor in how fast your site gets delivered. You can test this out with the Waterfall measurement found at https://gtmetrix.com/ which takes a look at how fast your host resolves your domain name and gets it pointed your your site (among many other measurements of what’s happening at your site).

AMP

AMP (or Accelerated Mobile Pages) is a protocol for speeding up mobile presentations of your site. If a large portion of your viewers are on mobile devices than you should absolutely implement AMP on your site. It essentially builds an instant loading cache version of your page that is screaming fast on mobile devices.

AMP consists of three parts: MP HTML is HTML with some restrictions for reliable performance and some extensions for building rich content beyond basic HTML. The AMP JS library ensures the fast rendering of AMP HTML pages (it does this by using best javascript practises for mobile and getting rid of the bad that may be on your site) . The Google AMP Cache can be used to serve cached AMP HTML pages (it’s a CDN for mobile pages, see above).

Tutorials on the technical can be found here.

As you can tell, Google is a huge promoter of AMP, believing mobile is the future. Google will penalize your rankings for NOT having AMP if your site is searched for on mobile. So this tip is almost mandatory if you like page rankings on mobile searches.

Full disclosure: I haven’t delved too deeply in AMP specs or manual implementation. I let this plugin take do the hard work for me. It generates the AMP cache files automatically and does what needs to be done.

GZIP Compression

Compressing things always ends up making them smaller and load faster. GZIP is a server side compression that sends smaller components to the brower that uncompresses them at the client side. Many cache plugins or minify plugins offer a way turn turn this on but but this speed boost might not work for you if your server does not have either mod_deflate or mod_gzip installed.

In cPanel you can turn gzip compression on via the Optimize Site panel.

Know the Plugin Hogs

Sometimes a simple little plugin can kill your site speed. Say for example, it conflicts with another plugin or is just a resource hog but how would you know? Install P3 Performance scanning plugin, test and then remove the big offending plugins. [UPDATE: this plugin hasn’t been updated in awhile and is reported to NOT to work, and even break, some sites running WP 4.7 – USE WITH CAUTION. I’m looking into altermatives].

For example, on one site I found out the plugin being using for 301 redirects was accounting for HALF of the entire sites plugin processing! Unacceptable, especially since other plugins offer the same service for much less load on your server. Of course if it’s a killer, must have, plugin that’s using up your resources, you may have to live with it.

 

Pre-Rendered Pages

This was brought up at the WordPress meetup where I presented the above information. I’m definitely going to look into it and I’ll let you know my thoughts on it in the future with an update to this blog post.

 

 

Have any awesome tips for speeding up a site? Let me know with a comment. This post is just to get the dialogue rolling!