Blog

Posted by Zoompf

In prior articles, we've written extensively about website performance and securing your website, both factors Google has publicly announced as search ranking factors. These articles provide extensive tips using existing tools and technologies to improve your site performance and security (tips we highly recommend you follow). But did you know Google also developed and is championing a new web transport protocol called SPDY that addresses many of the inherent performance and security flaws in the web today?

In this article I will dive into more detail on how this new protocol works, why it is important to you, and how you can get started using it today.

From experiment to standard

Google created the SPDY protocol as a multi-year experiment to find a faster way for browser and servers to communicate. The results have been so positive that the Internet Engineering Task Force (IETF) is using SPDY as the basis for HTTP/2, a replacement to the current network protocol that powers all Internet web traffic today. While technically HTTP/2 is still an evolving specification, many web browsers, web servers, networking devices, and websites already support both SPDY and HTTP/2 in its current form.

While there are some subtle differences between SPDY and HTTP/2, for the purposes of this article it's safe to use those terms interchangeably. As HTTP/2 rises to prominence in the popular vocabulary, the SPDY vernacular will fall out of use in favor of HTTP/2. For this reason, I will simply refer to SPDY as HTTP/2 for the remainder of this article.

What problem is HTTP/2 trying to solve?

To understand why Google and the IETF are creating a new version of HTTP, we need to understand the fundamental performance limitations we have today. It helps to consider this analogy:

Imagine if all the roads in the modern world were built back during the age of horse drawn carriages: narrow, bumpy and with low speed limits (still true in some cities...). Sure it took a while to get anywhere, but the delay was mostly due to the speed of your horse. Flash forward to today: same bumpy roads, but now everyone is driving a car. Now the horse is not the bottleneck, but instead all those cars piling up on the same log jammed road!

Believe it or not, most website traffic today is not far from this analogy. The original HTTP protocol dates back nearly 25 years. The most recent update is HTTP/1.1 which was standardized back in 1999. That is a lifetime in Internet time!

Like those narrow, bumpy roads of yore, the web back then was a very different place: smaller web pages, slower Internet connections, and limited server hardware. In a sense, the "horse" was the bottleneck. HTTP/1.1 was very much a product of those times.

For example, when web browser loads a web page using HTTP/1.1 it can requests resource (like an image, JavaScript file, etc) one at a time, per connection to the server. It looks like this:

You'll notice the browser is spending a long time waiting on each request. While HTTP/1.1 won't let us make multiple requests at the same time over the same connection, browsers can try and speed things up by making two connections to the same server, as shown in the diagram below:

Using two connections is a little better, but the browser still spends a lot of time waiting to get a download. And we can only download two resources at a time. We could try and making more connections to download more resource in parallel. Modern browsers try to do this and can make between 2-6 connections per server. Unfortunately this is still an poor approach, because each connection itself is used so inefficiently. Since the average web page has over 100 resources, the delay in making all those individual requests one at a time over just a few connections added up and your page loads slowly.

You can actually see this inefficiency by looking at a waterfall chart. We discussed waterfalls in a previous Moz post on optimizing Time To First Byte, and we also have a detailed guide on how to read waterfall charts. Most waterfall charts will show long green sections which represents the time the browser is waiting to download a resource. All that time wasted on waiting instead of downloading is a major reason why websites load slowly.

This inefficient waiting on resources is why optimizations like combining JavaScript or CSS files can help your site load faster. But optimizations like this are just stopgap measures. While you can (and should) continue to optimize our pages to make fewer and smaller requests, we're not going to truly evolve to the next level of performance until we "fix the roads" and improve the fundamental way in which the web communicates. Specifically, we need to find a better way to utilize those network connections.

This is where HTTP/2 comes in.

The solution: HTTP/2

At its core, HTTP/2 is about using the underlying network connections more efficiently. HTTP/2 changes how requests and responses travel on the wire, a key limitation in the prior versions of HTTP.

HTTP/2 works by making a single connection to the server, and then "multiplexing" multiple requests over that connection to receive multiple responses at the same time. It looks like this:

The browser is using a single connection, but it no longer requests items one at a time. Here we see the browser receives the response headers for file #3 (maybe an image), and then it receives the response body for file #1. Next it starts getting the response body for file #3, before continuing on to file #2.

Think of multiplexing like going to the grocery store and calling your spouse just once to get the full list: "Okay we need milk, eggs, and butter. Check." Compare this to HTTP/1.1 which is like calling your spouse over and over: "Do we need milk? Okay, bye." "Hello me again—do we need eggs too? Yep, okay.", "Okay sorry one last question, do we need flour too? Nope, good."

All of that data is interwoven much more efficiently on that single connection. The server can supply the browser with data whenever it is ready. There is no more "make request; do nothing while waiting; download response" loop. While slightly more complex to understand, this approach has several advantages.

First of all, network connections don't sit idle while you are waiting on a single resource to finish downloading. For example, instead of waiting for one image to finish downloading before starting the next, your browser could actually finish downloading image 2 before image 1 even completes.

This also prevents what is known as head-of-line blocking: when a large/slow resource (say for example a 1 MB background image) blocks all other resources from downloading until complete. Under HTTP, browsers would only download one resource at a time per connection. HTTP/2's multiplexing approach allows browsers to download all those other 5 KB images in parallel over the same connection and display as they become available. This is a much better user experience.

Another great performance benefit of HTTP/2 is the "Server Push" feature: this allows the server to proactively push content to a visitor without them requesting it. So for example, when a browser visits your website, your server can actually "push" your logo image down to the browser before it even knows it needs it. By proactively pushing needed resources from the server, the browser can load pages much quicker then was previously possible.

Last, but not least: HTTP/2 works best with http. As we mentioned before, both performance and security are an ever increasing component of search ranking. While the HTTP/2 specification technically allows for use over non-http connections, Google's earlier SPDY protocol required http. For compatibility reasons, most web server software will only use HTTP/2 over an encrypted http connection. Getting on the http bandwagon not only protects the security of your users and is good for your search ranking, but also is the most effective way to adopt HTTP/2. For more information, see our prior post on enabling http.

The future, today!

So clearly HTTP/2 offers some great benefits for both speed and performance, but what does this mean to you right now? Well, you may be surprised to learn, HTTP/2 is already available, and can be supported by you without impacting your old users running on HTTP/1.1.

You can think of HTTP/2 just like any other protocol, or even a spoken language. For it to work, you just need an agreement from both the sender and receiver to speak the same language. In this case, the "sender" is the web browser and the receiver is your web server.

Browser support

Since it's unlikely you will create your own web browser like Microsoft, Google, Apple or Mozilla, you will not need to worry about the "sender" side of the equation. Support for HTTP/2 in the web browser is already in widespread use across the modern browsers of today, with adoption only increasing as older browser versions age out.

In fact, the latest versions of all the major desktop web browsers already support HTTP/2. Chrome and Firefox has supported it for several years. Apple added support to Safari in fall of 2014 with Safari 8. IE 11 supports HTTP/2, but only if you are running Windows 8.

Similarly, there is already widespread HTTP/2 adoption on smart phones as well. Android's older web browser, helpfully named Browser, has support HTTP/2 for several years. The current default browser for Android is Google's Chrome browser. Mobile versions of Chrome use the same networking code as Desktop Chrome. This means that both Chrome on Android devices, as well as Chrome on iOS devices, both support HTTP/2. Apple added support to the iOS version of Safari with iOS 8.

Your best best is to look at your website analytics and see what web browsers your visitors are using. Chances are, the majority of visitors have HTTP/2 capable web browsers (you can check against this list of desktop and mobile browsers that support HTTP/2). In that case, you can safely move on to the next step.

Web server support

While you have little control over which browsers your visitors use, you do have direct control over your web server. Put quite simply, to support HTTP/2 you need to select a web server that supports HTTP/2 and enable it. And of course, that server should also continue to support HTTP/1.1 as well because you will always have users using older browsers.

Continuing our "spoken language" analogy from before, you can think of HTTP/1.1 and HTTP/2 as different languages like English or French. As long as both parties can speak the same language, they can communicate. If your server only supports HTTP/1.1, then visitors can only speak to it with HTTP/1.1. But, if your server also supports HTTP/2, then your users browser will also choose to speak (the faster) HTTP/2. And finally if your server does speak HTTP/2, but your users browser does not, then they will continue to speak HTTP/1.1 just as before, so there's no danger in "breaking" your older users.

Right now, both the Apache and nginx web servers support HTTP/2. nginx supports HTTP/2 natively, and Apache supports it via the mod_spdy module. Since Apache and nginx serve traffic for 66% of all active web servers, chances are good that your website's server can support HTTP/2 right now.

If you aren't using nginx or Apache you still have other options. There are a number of smaller, more specialized projects that support HTTP/2. You can also place a reverse proxy that support HTTP/2 like HAProxy in front of your existing web server to get the same benefit as having a web server that directly supports HTTP/2.

If you run your site through a hosting provider, check with them to see which web server version they are running. Major sites like WordPress.com and CloudFlare all already offer HTTP/2 support. If your provider is not yet supporting HTTP/2, let them know this is important!

Adding HTTP/2 support

As I mentioned, HTTP/2 is simply another language your web server can use to communicate. Just as a person can learn a new language while remembering their mother tongue, your web server will continue to know how to communicate HTTP/1.1 after you add support for HTTP/2. You aren't in danger of shutting anyone out from speaking with your site. People using newer browsers will communicate using HTTP/2, and older browsers will continue using the older HTTP/1.1—nothing breaks. If you have the time, there really is no reason not to update your site to support HTTP/2.

Remember, HTTP/2 is just a better way to transmit web content than HTTP/1.1. Everything else about your website (the URLs, your HTML markup, your redirects or 404 pages, your page content, etc) all stays the same. This makes adding support for HTTP/2 fairly straight forward:

1. Make sure your website is using http. See our previous article on implementing http without sacrificing performance.
2. Verify your server software or infrastructure can support HTTP/2.
3. Update and configure your server software or infrastructure to support HTTP/2.

That's it. Your website is now using HTTP/2.

Well hopefully it is. The steps involved to update/configure your website will vary depending on your what software you use, so we cannot provide you with detailed guide. However, we did built a free tool, SPDYCheck, which you can use to verify you have properly configured your website to HTTP/2 (aka SPDY). SPDYCheck works like a checklist, verifying each step of how a browser negotiates with your server to communicate via HTTP/2. It can tell you where in the process things are not working, and it also provides helpful recommendations like enabling Strict Transport Security. With SPDYCheck, you can be sure that everything is functioning properly, and verify that you site supports HTTP/2.

Conclusion

We all know that faster sites help improve search engine rankings, but faster sites also offer better user experiences. Faster sites engage your users longer, and promote sharing further sharing and linking. HTTP/2 is an amazing leap forward that can help improve the performance and user experience of your website. However, HTTP/2 is not a silver bullet. Optimizations like losslessly optimizing your website's images can have a big effect on your site's performance and will still be needed. In short, while you should add HTTP/2 support to your website, make sure you are doing other optimizations and following performance best practices to ensure the best possible user experience. If you are looking for a place to start, or want to see how your site is doing, Zoompf's free performance report is a great way to understand what you can do to make your website faster.

Sign up for The Moz Top 10, a semimonthly mailer updating you on the top ten hottest pieces of SEO news, tips, and rad links uncovered by the Moz team. Think of it as your exclusive digest of stuff you don't have time to hunt down but want to read!

Posted by richardbaxterseo

As content marketing evolves, the list of media you could choose to communicate your message expands. So does the list of technologies at your disposal. But without a process, a project plan and a tried and tested approach, you might struggle to gain any traction at all.

In this post, based on my MozCon 2014 presentation, I'd like to share the high level approach we take while developing content for our clients, and the lessons we've learned from initial research to final delivery. Hopefully there are some takeaways for you to enhance your own approach or make your first project a little less difficult.

This stuff is hard to do

I hate to break it to you, but the first few times you attempt to develop something a little more innovative, you're going to get burned. Making things is pretty tough and there are lots of lessons to learn. Sometimes you'll think your work is going to be huge, and it flops. That sucks, move on, learn and maybe come back later to revisit your approach.

To structure and execute a genuinely innovative, successful content marketing campaign, you need to understand what's possible, especially within the context of your available skills, process, budget, available time and scope.

You'll have a few failures along the journey, but when something goes viral, when people respond positively to your work – that, friends, feels amazing.

What this post is designed to address

In the early days of SEO, we built links. Email outreach, guest posting, eventually, infographics. It was easy, for a time. Then, Penguin came and changed everything.

Our industry learned that we should be finding creative and inventive ways to solve our customers' problems, inspire, guide, help – whatever the solution, an outcome had to be justified. Yet still, a classic habit of the SEO remained: the need to decide in what form the content should be executed before deciding on the message to tell.

I think we've evolved from "let's do an infographic on something!" to "I've got a concept that people will love – should this be long form, an interactive, a data visualization, an infographic, a video, or something else?"

This post is designed to outline the foundations on an approach you can use to enhance your approach to content development. If you take one thing away from this article, let it be this:

The first rule of almost anything: be prepared or prepare to fail. This rule definitely applies to content development!

Understand the technical environment you're hosting your content in

Never make assumptions about the technical environment your content will be hosted in. We've learned to ask more about technical setup of a client's website. You see, big enterprise class sites usually have load balancing, pre-rendering, and very custom JavaScript that could introduce technical surprises much too late in the process. Better to be aware of what's in store than hope your work will be compatible with its eventual home.

Before you get started on any development or design, make sure you've built an awareness of your client's development and production environments. Find out more about their CMS, code base, and ask what they can and cannot host.

Knowing more about the client's development schedule, for example how quickly a project can be uploaded, will help you plan lead times into your project documentation.

We've found that discussing early stage ideas with your client's development team will help them visualise the level of task required to get something live. Involving them at this early stage means you're informed on any potential risk in technology choice that will harm your project integrity later down the line.

Initial stakeholder outreach and ideation

Way back at MozCon 2013, I presented an idea called "really targeted outreach". The concept was simple: find influential people in your space, learn more about the people they influence, and build content that appeals to both.

We've been using a similar methodology for larger content development projects: using social data to inspire the creative process gathered from the Twitter Firehose and other freely available tools, reaching out to identified influencers and ask them to contribute or feedback on an idea. The trick is to execute your social research at a critical, early stage of the content development process. Essentially, you're collecting data to gain a sense of confidence in the appeal of your content.

We've made content with such a broad range of people involved, from astronauts to butlers working at well known, historic hotels. With a little of the right approach to outreach, it's amazing how helpful people can be. Supplemented by the confidence you've gained from your data, some positive results from your early stage outreach can really set a content project on the right course.

My tip: outreach and research several ideas and tell your clients which was most popular. If you can get them excited and behind the idea with the biggest response then you'll find it easier to get everyone on the same page throughout your project.

Asset collection and research

Now, the real work begins. As I've written elsewhere, I believe that the depth of your content, it's accuracy and integrity is an absolute must if it is to be taken seriously by those it's intended for.

Each project tends to be approached a little differently, although I tend to see these steps in almost every one: research, asset collection, storyboarding and conceptual illustration.

For asset collection and research, we use a tool called Mural.ly – a wonderful collaborative tool to help speed up the creative process. Members of the project team begin by collecting relevant information and assets (think: images, quotes, video snippets) and adding them to the project. As the collection evolves, we begin to arrange the data into something that might resemble a timeline:

After a while, the story begins to take shape. Depending on how complex the concept is, we'll either go ahead with some basic illustration (a "white board session") or we'll detail the storyboard in a written form. Here's the Word document that summarised the chronological order of the content we'd planned for our Messages in the Deep project:

And, if the brief is more complex, we'll create a more visual outline in a whiteboard session with our designers:

How do you decide on the level of brief needed to describe your project? Generally, the more complex the project, the more important a full array of briefing materials and project scoping will be. If, however, we're talking simpler, like "long form" article content, the chances are a written storyboard and a collection of assets should be enough.

Over time, we've learned how to roll out content that's partially template based, rather than having to re-invent the wheel each time. Dan's amazing Log File Analysis guide was reused when we decided to re-skin the Schema Guide, and as a result we've decided to give Kaitlin's Google Analytics Guide the same treatment.

Whichever process you choose, it helps to re-engage your original contributors, influencers and publishers for feedback. Remember to keep them involved at key stages – if for no other reason than to make sure you're meeting their expectations on content they'd be willing to share.

Going into development

Obviously we could talk all day about the development process. I think I'll save the detail for my next post, but suffice it to say we've learned some big things along the way.

Firstly, it's good to brief your developers well before the design and content is finalised. Particularly if there are features that might need some thought and experimental prototyping. I've found over time that a conversation with a developer leads to a better understanding of what's easily possible with existing libraries and code. If you don't involve the developers in the design process, you may find yourself committed to building something extremely custom, and your project timeline can become drastically underestimated.

It's also really important to make sure that your developers have had the opportunity to specify how they'd like the design work to be delivered; file format; layers and sizing for different break points are all really important to an efficient development schedule and make a huge difference to the agility of your work.

Our developers like to have a logical structure of layers and groups in a PSD. Layers and groups should all be named and it's a good idea to attach different UI states for interactive elements (buttons, links, tabs, etc.), too.

Grid layouts are much preferred although it doesn't matter if it's 1200px or 960px, or 12/16/24 columns. As long as the content has some structure, development is easier.

As our developers like to say: Because structure = patterns = abstraction = good things and in an ideal world they prefer to work with style tiles.

Launching

Big content takes more promotion to get that all important initial traction. Your outreach strategy has already been set, you've defined your influencers, and you have buy in from publishers. So, as soon as your work is ready, go ahead and tell your stakeholders it's live and get that flywheel turning!

My pro tip for a successful launch is be prepared to offer customised content for certain publishers. Simple touches, like The Washington Post's animated GIF idea was a real touch of genius – I think some people liked the GIF more than the actual interactive! This post on Mashable was made possible by our development of some of the interactive to be iFramed – publishers seem to love a different approach, so try to design that concept in right at the beginning of your plan. From there, stand back, measure, learn and never give up!

That's it for today's post. I hope you've found it informative, and I look forward to your comments below.

Sign up for The Moz Top 10, a semimonthly mailer updating you on the top ten hottest pieces of SEO news, tips, and rad links uncovered by the Moz team. Think of it as your exclusive digest of stuff you don't have time to hunt down but want to read!