WordPress was built by the community. In just a few incredibly productive years, it grew to become the most popular CMS in the world, and all of us in the WordPress Community played a role in the evolution and development of WordPress. Together, we made it into the popular powerhouse it is today. If there was one thing that made it possible, it was the open source philosophy. Just like WordPress, Yoast was born from an open source world. In this interview, Joost de Valk shares his views on a topic dear to his heart.

Joost began his journey into the open source world many moons ago. As a contributor to the WebKit project, which built a layout engine for web browsers, he saw how a group of like-minded people could go up against mainstream, rich companies. WebKit’s small team made waves with their product. Different browsers adopted it and it helped them to hold their own against the incredible power of Internet Explorer. Joost says: “We were unbelievably efficient. I discovered very early on that it was better to build something together than on your own.” 

New to SEO? Learn the Basics of SEO in our Basic SEO course »

Basic SEO training$ 199 - Buy now » Info

A passion for open source

Talk to Joost about open source and his eyes light up. Open source formed him – it shaped his thoughts and visions. Even now, as CEO of a successful company, he’d still choose open source as the business model every time. Joost: “If I had to start over, I’d do a million things differently. But I would choose open source again in a heartbeat. I actually do think it’s better to create together. Take those design agencies that develop bespoke CMS’s. Why? It’s nonsense. It leads to vendor lock-in and that is horrible. There’s only one model: the open source model.”

‘‘If I had to start over, I would choose open source again in a heartbeat ’’

Running a business with an open source mindset is better than keeping everything behind closed doors. Joost: “Why should a school build their own site when there are hundreds of schools with the same requirements and questions? Join hands to make it manageable and cheaper. Just think how much the government could save if they used open source everywhere.”

“To me,” says Joost, “open source is a combination of community, not just friends, and a shared responsibility to find solutions to problems together. Take WordPress for example, collectively we are fixing the problem of publishing to the web. Other projects tackle different problems in the same way, together. This is how society should function; when we set our minds to it, we can achieve anything if we combine our efforts.”

David vs. Goliath

Joost sees open source as a David vs. Goliath struggle: “It’s money versus community. A lot of money versus no money. As a community-driven CMS, WordPress continuously has to figure out how to go up against large-scale commercial efforts. But, in spite of all that money, WordPress continues to grow like wildfire. We’ve reached critical mass and it will only go up from here.”

While WordPress grows, its community continues to expand. According to Joost, the community is diversifying at a rapid rate: “It’s not just developers anymore – the project attracts a wide range of people, from designers to writers. People are willing to invest loads of time into it. Just look at all those WordCamps around the world; all of them are organized by people from all walks of life.”

Open source politics

In theory, open source may sound like the perfect way to get something done, but oftentimes, good-old politics can cause everything to grind to a halt. “The political games are no fun,” Joost says. “It’s a community and therefore pretty diffuse. It takes time to reach a consensus. It’s hard to navigate the waters when there’s no one actually in charge. You have to figure out where decisions are being made and try to be there to influence them. That’s when you find out that not having anyone in charge can make it harder.”

‘‘It takes a lot of time and effort to develop a tool like Yoast SEO’’

Yoast now and in the future

Yoast as a company was built on open source and this philosophy continues to play a big part in its future plans. The Yoast SEO plugin is now spreading its wings, moving to other open source platforms like Drupal, TYPO3 and Magento. But Yoast has to sell something to make money, so in our case it’s a Premium version and other products, like services and education – aspects Joost wants to expand: “In the future, I’d love to be able to give away my plugins for free and generate enough income from our services and education platform. But, that moment is not yet in sight.”

Making money on open source seems strange and contradictory to the openness of open source. Yet, to pay nothing towards the development of products you use every day feels wrong as well. Joost: “It’s almost as if people think it’s rather easy to develop something for WordPress and that it doesn’t cost anything. That’s not true of course. It takes a lot of time and effort to develop a tool like Yoast SEO. Think about it, the readability analysis in Yoast SEO took about six man-years to develop. We could have put it in the Premium version, but we thought about the impact it would have if we gave it away for free. So we did. Come to think of it, I’ve never thought about taking something out of the free version of Yoast SEO to make people pay for it.”

Read more: ‘Yoast WordPress core contributions ’ »

Back in 2012, Twitter introduced a system called Twitter Cards which allows site owners to display enhanced tweets on their websites using a syntax very similar to that of OpenGraph. Thanks to this new system, Twitter can show nicer looking tweets, including ones containing media such as images, audio and video.

How does it work?

As mentioned in the introduction, Twitter Cards make use of a very similar syntax to that of OpenGraph. Twitter has some properties that are specific for their platform which you can see in the following snippet:

<meta name="twitter:card" content="summary" />
<meta name="twitter:site" content="@yoast"/>
<meta name="twitter:creator" content="@michielheijmans"/>

The twitter:card property is required and defines the type of card you want to show. You have four flavors here: summary, summary_large_image, app and player. What the difference is between all these different cards can be found in the documentation.

Both twitter:site and twitter:creator are optional and point to the Twitter account of the website publishing the content and the author.

Optimize your site for search & social media and keep it optimized with Yoast SEO Premium »

Yoast SEO for WordPress pluginBuy now » Info

OpenGraph

When it comes to parsing URLs, images and descriptions, Twitter makes use of existing og: properties. You can overwrite these og: properties with Twitter specific ones, but most of the time this isn’t something you’d want. If your goal is to display completely different information on Twitter, then these tags allow you to override default behavior.

There’s one thing to take into account when using both the Twitter and OpenGraph options. Twitter uses name to specify the attribute whereas OpenGraph makes use of the property attribute. Take this into account if you plan on manually implementing Twitter Cards.

Implementing Twitter Cards

As with other meta tags, you need to add the Twitter tags in the <head> of your website and ensure that the values are set properly on a per-page basis. This can quickly becomes an unwieldy task for a blog, so we built a feature that generates the proper meta tags for you.

Twitter Card settings in Yoast SEO

Twitter Card input field in Yoast SEO

Want to change the look of the Twitter Card for a specific post or page? Just use the form on the Social tab. Here you can tweak specific properties to your liking.

Additionally, our Premium plugin contains Social Previews which display what the Twitter Card will eventually look like based on the current page or post:

twitter cards in yoast seo premium

Twitter Card: Preview your Twitter post with Yoast SEO Premium

Twitter Cards are a great (visual) addition and can help increase traffic to your website!

Read more: ‘SEO basics: how to use social media’ »

To help your blog gain more readers, you can make use of social buttons which allow your current readers to share interesting posts on their social media accounts. But how should you go about implementing them? In this post we’ll explain how we’ve done this at Yoast and will give you some pointers on how to get started.

Optimize your site for search & social media and keep it optimized with Yoast SEO Premium »

Yoast SEO for WordPress pluginBuy now » Info

What are social buttons?

For those who don’t know what social buttons are: They’re the buttons that you’ve seen around the internet that are usually placed somewhere below a blog post that allow readers to share articles on various social media platforms. This is great for gaining extra exposure and thus also getting more traffic to your website.

At Yoast, our social buttons look as follow:

Social Buttons

How did you implement these social buttons in WordPress?

Now you might be wondering about how these buttons were implemented. Your initial thought might be that this was added with some kind of plugin. However, at Yoast we decided to add it to our theme. This gives us extra control in how we style and display things. Of course we could have decided to add these buttons to a plugin, but the added benefit would be minimal for us.

We’ve decided to place the code for the social buttons in a template partial. This way we can easily embed it throughout the website without having to drastically edit template files or having to embed the buttons manually per post.

Here’s a basic example of how we implemented a social button for Facebook. Note that not all the code is actual production code and has been replaced with psuedo-code to make implementation easier to understand.

<?php
// File: <theme_folder>/html_includes/partials/social-share.php
function facebook_social_button() {
$article_url = get_article_url(); // Psuedo-code method to retrieve the article's URL.
$article_url .= '#utm_source=facebook&utm_medium=social&utm_campaign=social_buttons';

$title = html_entity_decode( get_og_title() ); // Psuedo-code method to retrieve the og_title.
$description = html_entity_decode( get_og_description() ); // Psuedo-code method to retrieve the og_description.
$og_image = get_og_image(); // Psuedo-code method to retrieve the og_image assigned to a post.

$images   = $og_image->get_images();
$url = 'http://www.facebook.com/sharer/sharer.php?s=100';
$url .= '&p[url]=' . urlencode( $article_url );
$url .= '&p[title]=' . urlencode( $title );
$url .= '&p[images][0]=' . urlencode( $images[0] );
$url .= '&p[summary]=' . urlencode( $description );
$url .= '&u=' . urlencode( $article_url );
$url .= '&t=' . urlencode( $title );
echo esc_attr( $url );
}
?>
<div id="social-share">
<div class="socialbox">
<a rel="nofollow" target="_blank" data-name="facebook" aria-label="Share on Facebook" data-action="share" href="<?php facebook_social_button(); ?>">
<i class="fa fa-facebook-square text-icon--facebook"></i>
</a>
</div>
</div>

The above code could be used in a similar fashion for other social media platforms, but it can vary greatly in terms of URL structure. We advise you look at the documentation of your desired platforms to ensure compatibility.

To include these social buttons in your blog posts, open up single.php in your theme’s folder and paste the following snippet where you want the buttons to appear:

<?php get_template_part( 'html_includes/partials/social-share' ); ?>

That’s it! If you don’t want to collect interaction data from these buttons, then this is all you need. If you want interactions to be tracked, then read on.

Tracking Interaction with Social Buttons

Having nicely styled social buttons in your website is one thing, but tracking the actual interactions with them would be even better.
At Yoast, we use JavaScript to ensure the tracking of the social media sharing is done correctly so we can easily see what social media platforms are popular among our readers.

The code for this is relatively simple and depends on the Google Analytics Tracker being properly implemented into your website. Assuming this is the case, the following code will be of great help:

jQuery( document ).ready( function( $ ) {
	$( '.socialbox a' ).click( function( e ) {
		e.preventDefault();
		
		if ( typeof __gaTracker !== "undefined" ) {
			__gaTracker( 'send', 'social', $( this ).data( 'name' ), $( this ).data( 'action' ), document.querySelector( "link[rel='canonical']" ).getAttribute( "href" ) );
		}
	});	
});

Get the most out of Yoast SEO, learn every feature and best practice in our Yoast SEO for WordPress training! »

Yoast SEO for WordPress training$ 99 - Buy now » Info

The above JavaScript snippet passes in some of the extra information we passed along to the anchor tag. This extra information can be identified by the data- prefix and is retrieved by calling $( this ).data( [...] ). This method allows us to easily extend the social-share div and add more buttons.

If you want more information on how Google tracks this information, you can read about it here.

Conclusion

As you can see, it’s not very difficult to add social buttons to your blog. Even tracking them in Google Analytics has become a breeze compared to past implementations.

All that’s left is to go and implement the buttons and allow your readers help promote your posts. Good luck!

Read more: ‘Social media optimization with Yoast SEO’ »

Today marks the release of the next version of our flagship WordPress plugin: Yoast SEO 4.4. In Yoast SEO 4.4 you’ll find many small changes and a couple of new features that make it even easier to work with the plugin. In this release post, we’ll give a brief overview of the changes that we’ve made, starting with Yoast SEO Premium.

New features in Yoast SEO Premium

If you’re an avid user of Yoast SEO and Google Search Console, you’ve probably connected these together so that they can work in tandem. Your crawl errors will show up in Yoast SEO so you can work on them from there. It was always possible to redirect 404 error pages using a 301, but with Yoast SEO 4.4 you can now use every type of redirect that Yoast SEO supports. These include 301, 302, 307, plus the 410 and 451 redirects. This makes it even easier to tell crawl bots exactly what should be done with the specific content.

You can find the second cool new feature in the internal linking tool. Yoast SEO Premium shows you the links that have already been added to the text. You can quickly discern the different links because they have a different icon, namely a checkmark. Of course, you’re still free to copy that link if you need to add it to the text again.

Optimize your site for search & social media and keep it optimized with Yoast SEO Premium »

Yoast SEO for WordPress pluginBuy now » Info

Changes in Yoast SEO 4.4

Besides fixing a number of bugs, we’ve been working on some enhancements to improve the flow of the plugin. To start off, we’ve improved the styling of tables, so they are viewable on mobile. In addition to that, we’ve moved the option to disable the keyword and content analysis from the general tab to the features tab.

The newest release of Yoast SEO is now live, so head on to your WordPress install and hit that update button. We hope you enjoy this new release. If you need more information on this release, you can check out the changelog on WordPress.org. Thanks!

Read more: ‘Why every website needs Yoast SEO’ »

WordPress in itself is a decent system but plugins can really take it to the next level. Adding top WordPress plugins can make WordPress into the Swiss Army Knife of websites: just pull out whatever functionality you need for your specific site!

Top WordPress plugins

Many people have asked us for our list of top WordPress plugins. Of course, we’ve written quite a few WordPress plugins ourselves, but the list of great WordPress plugins is much larger than that. In the article below, we list the top WordPress plugins we use ourselves, on this site or other sites we build, analyze & optimize. This list changes over time; this is probably not the last time we updated it. Note: we listed the plugins in random order.

Let’s go.

WP Rocket

It makes the sites you build perform to your expectations, instead of slowly crawling. And yes, I think every site should be cached to get the maximum performance for each and every user, not just when you start hitting social sites. We recommend using WP Rocket for that.

On a side note: we really like WP Rocket, but if your site is hosted by a great company like SiteGround (like ours is) caching and more speed optimization is taken care of. This eliminates the need for a caching plugin.

Google Analytics by Monster Insights

Since we sold our Google Analytics for WordPress plugin to Monster Insights, they have actively developed and improved what we feel is the best plugin for adding and analyzing Google Analytics data right in your WordPress dashboard. Please check out Google Analytics by Monster Insights for yourself.

Nested Pages

If your site grows larger and larger, you might start to feel the need to move around some pages. A decent site structure helps Google to crawl your site in the most efficient way. Nested Pages uses a nice drag-and-drop interface to maintain that site structure.

Optimize your site for search & social media and keep it optimized with Yoast SEO Premium »

Yoast SEO for WordPress pluginBuy now » Info

AMP

We predict a vast increase in the number of sites that are built solely in AMP as a replacement for your regular website. It probably takes some years, but bottom line is that AMP makes your website more user-focused and faster. Prepare your website with this plugins: AMP.

BlogVault

Not having a backup isn’t an option if you rely on your website for your business. For Yoast SEO Care, we rely on Blogvault to create backups of every site we address. For your website, BlogVault creates incremental backups, so your site won’t be overloaded.

Sucuri WAF

It’s no secret that we really like Sucuri’s security solutions for WordPress. Awesome security monitoring and great service. At least install their Sucuri Scanner plugin. But I recommend checking Sucuri WAF and other products and decide what works best for you.

WP Google Authenticator

I wouldn’t even overthink adding this plugin to your WordPress site. It’s no hassle and will add an extra layer of security to your website. An alternative could be Rublon, which works in a similar manner, but we usually use WP Google Authenticator.

Login Lockdown

For an extra layer of security, we recommend installing a plugin like Login Lockdown, that prevents automated login requests from firing a gazillion login attempts. If some IP range does a surplus of attempts, the login function is disabled for all requests from that range. For more details, check Login Lockdown in the plugin repo.

Any image compression plugin

Yes, I would like to name just one. But the truth is that it depends on your website what plugin works best. We have used Smush, tried EWWW. Kraken.io has a plugin and ShortPixel has one. And has anyone tried the premium Imagify? I would really like to see a comparison for these plugins from an independent, image-heavy website. For now: pick one and use it.

Ninja Forms or Gravity Forms

Both are great plugins to create drag-and-drop forms. Both provide an option for conditional logic and are really easy to use. If you have a form on your website, and any website that has a contact page should have a form, I recommend using Gravity Forms or Ninja Forms.

Better Search Replace

Sometimes you need to do a search and replace in your database in order to make things work right, like after a domain migration. There are more plugins that can help you do a search and replace in your database, but we have used Better Search Replace and found it very helpful. As database actions shouldn’t be taken lightly, I recommend always performing a so-called dry run before doing the actual replacement. This plugin allows for that dry run.

No, we’re not leaving our own main plugin out here. Simply because you really need it.

Yoast SEO plugin for WordPress

We believe this is the best SEO plugin out there, in our own humble opinion of course. Install it on all your websites, simply because it takes care of all the SEO hassle and guides your editors into better writing.

To date, this is the only SEO plugin that is developed by SEO experts, where all the others are made by friendly people that are first and foremost software developers. We stay on top of any changes in SEO and make sure these changes are implemented in the way we optimize your website. That is why we feel our Yoast SEO for WordPress plugin should definitely be in this list of top WordPress plugins.

Read more: ‘5 handy WordPress plugins for your blog’ »

Every WordPress website owner occasionally stumbles upon a problem that could probably be fixed in a heartbeat with a handy WordPress plugin. That’s what makes WordPress great, right? I recall a friend of mine asking about the possibility of an answering machine on his website. There’s a plugin for that. Need to add testimonials in an orderly way? There’s a plugin for that as well.

Plugins range from large, like our Yoast SEO plugin (which every website needs) to really small, with almost Hello Dolly-like impact. No matter what the size, plugins can come in really handy, especially when you’re not a developer or you lack the capacity. In this post, I’ll go over a number of plugins that really saved my day in the past!

Optimize your site for search & social media and keep it optimized with Yoast SEO Premium »

Yoast SEO for WordPress pluginBuy now » Info

Auto Post Thumb Pro

Especially webmasters that have had their sites for ages will recognize this issue: a lot of themes you can find in the WordPress theme repo just look a lot better with a post thumbnail, but not all of your posts have that thumbnail. It doesn’t matter if your theme allows for a list of recent posts or if it includes excerpts on your archive pages, chances are that they will include post thumbnails. That just looks so nice, right?

The legacy of your old posts without a thumbnail makes that the alignment of a collection of posts (f.i. in a widget) looks off. It looks messy. In comes Auto Post Thumb Pro. When I wanted to repost Instagram images on a website, this plugin made sure there was a thumbnail for every post. And (re)generated thumbnails for every older post. After installing this plugin, I can use any theme I wanted to use that displayed these thumbnails on (almost) every page.

By the way, if you are looking for a new theme for your blog, I can recommend Anders Noren’s themes. I’ve used a few and really like the clean designs and easy-to-use setup.

Easy Custom Auto Excerpt

One of the things we come across in our SEO consultancy is duplicate content caused by displaying entire posts on taxonomy pages (like category pages). WordPress has plenty of ways to display excerpts instead of full posts. Usually, one of the requirements is using a <!-- more --> tag in your posts. Include that tag by clicking the icon in the Insert More tag | Handy WordPress pluginsimage, located at the styling options on the Edit pages in WordPress. If you feel that that’s too much of a hassle, the Easy Custom Auto Excerpt plugin will help you out. It’s one of those plugins that you install, configure and forget about, simply because it works.

The Easy Custom Auto Excerpt plugin allows you to automate that more tag by, for instance, adding it after a number of characters or after the first (or first two) paragraphs. It allows you to do some basic tweaking of how that excerpt looks like (alignment of the thumbnail for instance). In the premium version, you can also fine tune the Read more button – a feature that convinced me to purchase a license – and disable excerpts for certain post types (like posts that just contain an awesome photo). Of course, this depends on the type of blog/site that you have. Go see for yourself how this handy WordPress plugin can help you out.

Responsive Lightbox

What to say about this handy WordPress plugin? If you’re a bit like me, you installed, removed and re-installed your share of lightbox plugins. The horror! They either don’t work out of the box, add fancy stuff to that pop-up or simply ignore your galleries. And how about those previous/next buttons that are too small to click. Not to start about how crappy things look on a mobile device, right?

Responsive Lightbox | Handy WordPress plugin

I found Responsive Lightbox to be a nice solution. If you are sick and tired of your current lightbox plugin, install this plugin and see for yourself.

Simple Custom CSS

Sometimes you want to do just a little design tweak and not worry about it being overwritten the next time you update your theme. You have two options:

  • Create a child theme, which might be a bit of a hassle for that tiny little tweak, or
  • simply add some lines of CSS code via this little plugin: Simple Custom CSS.

It does just that. I really like it. There are more handy WordPress plugins that do this, but I found this one to be both the less bloated (I just want to add CSS, not learn CSS) and the one that works without the constant need to add !important to my declarations.

Yoast Comment Hacks

Last but not least, I’d like to add this little gem Joost developed: Yoast Comment Hacks. If you have a WordPress blog and receive a lot of comments, use this plugin to add some smart extras to your comment maintenance toolkit. Among others, it allows you to thank first-time commenters by redirecting them to a thank you page. It also allows you to set a minimum comment length, for instance. Go check for yourself how this little handy WordPress plugin can make maintaining your comments just a bit easier!

I’d love to hear about your favorite handy WordPress plugins in the comments!

When we say “related posts for WordPress“, we say “bad performance”. Without using an external service like ElasticSearch, it’s practically impossible to have related posts work fast in WordPress. That’s why we’ve always stayed away from including any related posts plugin on our site. It’s also the reason we haven’t tried to come up with a solution ourselves before. In the upcoming release of Yoast SEO Premium, this will change. We found a way to have blazing fast related posts! Let me explain how we did that.

The fastest related posts ever

Our solution has a frontend and an admin component. Let me start by asking a very simple question:

On a content page, what would be the fastest implementation of related posts you could think of?

The (somewhat dull) answer:

Simple, old-fashioned links.

You simply don’t need to generate related posts, if you already link to your related content in your text. Not only is this better for frontend performance, it also benefits SEO. It’s simply better to link directly to your related content in a meaningful context, than to use a generic related posts box somewhere else on your page.

Of course this is easier said than done. The real problem related posts widgets solve is that you no longer have to think about related content yourself. So yes, we still need an algorithm to suggest related content, we just don’t need it on the frontend. Instead, we need to bring this functionality to the editor. This way, we can suggest the writer of an article which related posts he/she might want to link to in their text. We call these *internal linking suggestions*.

Why suggesting related content is costly

So, I guess we haven’t gotten rid of the problem of generating related content in a performant way. The thing we can’t seem to get around, is that we’ll have to do one, or more, very heavy queries to the database at some point. To suggest related links, we need to compare the content of one post with that of all the other posts on our site. The WordPress database isn’t optimized for such queries though. To do this in one operation is costly, and in case your site has a lot of content, that may slow things down substantially.

Optimize your site for search & social media and keep it optimized with Yoast SEO Premium »

Yoast SEO for WordPress pluginBuy now » Info

Indexing content, one post at a time

About a year ago, we moved our content analysis from the server side to the browser. This had a lot of advantages, but a slight inconvenience was that we could no longer calculate the SEO score for a post on the server. This calculation now has to be done in the browser for each post separately. This way we’ve already managed to dramatically improve server side performance with regard to our content analysis tool. When we started thinking about our prominent words algorithm, we realized this would also allow us to easily index content. Saving the most prominent words of every post to the server would make it very easy and cheap to query related content.

Continuous improvement

By leveraging our content analysis tool and utilizing the processing power of the browser to index content, one post at a time, we’ve managed to drastically reduce the heaviness of the queries needed to find related content. Now, we haven’t run any benchmarks yet, but it’s clear that this solution is much faster and easier to scale, without taking any serious performance hits.

In Yoast SEO Premium 4.0 – launching soon! – we’re shipping the first version of our internal linking suggestions tool. We’ll continue tweaking the algorithm to make sure our internal linking tool is the best and most performant related content tool available for WordPress.

Read more: ‘Related posts need to make sense, not just be there’ »

Having a website, online shop or blog that’s fast is a must nowadays. A fast website doesn’t only give your visitors a much better experience, but it also helps your website to rank. Sending fewer HTTP requests to the server can improve the loading times of your website. But why is that?

What are HTTP requests?

HTTP requests are requests that get sent to the server whenever someone visits your website. These requests can contain a variety of information for the server to process and act upon. The most important part of such a request is the URL. Based on this information, the server will try to return a valid response, such as a file. The first stable implementation of HTTP, HTTP/1.0, does these requests in series. This means that a group of requests needs to be finished before the next group is sent. Obviously, this means that pages with a lot of external files will suffer from longer loading times, making your website slow.

Speeding up initial loading times

As described in the previous section, loading a lot of files one after another will result in longer loading times. Now you might be wondering “How do I speed this process up?”. Luckily, there are a few techniques and advancements in browser technology that can help you with this.

Order a website review and get a plugin of your choice for free. We'll even configure it for you »

Get a Yoast website review€ 699 - Buy now » Info

Browser pipelining

Since the introduction of HTTP/1.1, it has been possible to use a feature called “browser pipelining”. This feature allows the browser to fetch multiple files in rapid succession, without waiting for a previous request to finish. This means that the browser doesn’t have to wait as long to send off the next request.

In theory, this would be a very handy feature to have enabled by default. Sadly, in practice, this system still has some flaws. Due to its asynchronous nature, it’s possible that files load in the wrong order.

Let’s take a custom jQuery plugin as an example of how browser pipelining could do more harm than good. As your custom plugin depends on jQuery, the jQuery library needs to be fully loaded before your plugin can properly run. You might already see where this could go wrong; because browser pipelining doesn’t wait for previous requests, your plugin could load before jQuery. The result? JavaScript errors.

This problem with load order can also easily occur with something like images. In the case of images, it’s possible that the order in which the images get displayed differs from the actual order in your HTML.

HOL blocking

Another phenomenon that sometimes occurs when using browser pipelining is Head-of-line blocking (HOL blocking). What this means is that a particular packet (a part of a file) is keeping another packet of the same file from successfully completing. Other packets can only continue on their way once the delivery of the first package to the browser ends.

Due to the issues mentioned, most browsers disable HTTP pipelining by default. In the latest version of HTTP, aptly named HTTP/2, the issues with pipelining are addressed by using a technique called multiplexing which sends multiple HTTP requests over a single TCP connection. If you want to use this technique, make sure your server and your audience’s browsers, properly support HTTP/2.

Move JavaScript files out of the head section

There’s another way to make your website to load faster without much extra hassle. But first a brief history lesson!

Placing all the required CSS and JavaScript in your <head> section used to be considered common practice. However, the problem with this technique is that the rest of your HTML won’t display because these files block its rendering. This results in your visitors looking at a blank page for a couple of seconds.

As early as 2007, a new best practice surfaced. This best practice recommends moving all the JavaScript from your <head> section to the bottom of your page, just before the </body> tag. Why? Because JavaScript blocks any further rendering of a page until it has loaded all its files. By moving the JavaScript, the page’s HTML renders first instead of last. Sometimes it’s possible that you want the rendering of the page to wait until a particular JavaScript file loads. This would be the only exception when it comes to moving files out of the <head> section of your HTML.

Moving CSS to the bottom of the page is not recommended, as it stops the browser from correctly displaying and formatting your content. This impacts the overall user experience. Nobody wants to visit a website where text jumps around the screen because a stylesheet doesn’t load until the very end. Although moving your JavaScript to the bottom of your page doesn’t reduce the number of HTTP requests, it does help improve the overall experience.

Reduce the number of files

Another option to speed up your website is by limiting the number of files that load. This is because for every file you try to load, your browser sends a separate HTTP request to the server. Fewer files means fewer requests and therefore a faster website.

Most commonly, JavaScript, CSS, and images are the main culprits when it comes to slow loading pages. To combat this, you can use a few techniques, namely:

Minifying and concatenating your JavaScript and CSS files.

By minifying and concatenating assets such as CSS and JavaScript, you not only reduce the overall file size, but you also minimize the amount of files that need to load. A good rule-of-thumb is to group files based on their respective functions; if you have multiple files that do something with image manipulation, it might be a good idea to concatenate those.

Additionally, by limiting the amount of CSS files that load initially, you reduce the overall loading time. In that case, minification and concatenation can help as well. After the initial loading of CSS files, your browser caches it so subsequent requests shouldn’t take up as much time. You can imagine that having a single file with all the relevant CSS, plus the caching, can significantly improve the overall experience.

If you have CSS that is very specific for a particular page, you’re better off loading that file separately. As a result, you won’t unnecessarily ship specific CSS rules that aren’t used elsewhere in your HTML.

There are plenty of online tools to help you with minification and concatenation during development. You can also use a plugin, such as WP Rocket, to help you out with this.

Optimizing images

Some themes are heavily dependent on pictures. Because images are also separate files themselves, they too fall victim to the limitations of HTTP. To get around this, it is possible to make use of a technique called CSS spriting. This technique allows you to take multiple images (usually of a similar size) and reduce them into a single image. Then with some smart CSS techniques, you manipulate the sprite and only display a specific part of it. There are a couple of online tools that can help with this, such as SpriteMe. It’s unnecessary to create sprites for _all_ your images, but it’s worth putting in the extra effort for things like backgrounds and social media icons.

Lazy loading

Another way to ensure images won’t make your pages slow, is using a “lazy loading” plugin. Lazy loading is a technique where some JavaScript looks at the current viewport of the visitor and only loads images that are (almost) within view. A good plugin for this is the Lazy Load plugin which delays loading of images until the user starts scrolling down the page.

Bonus tip: use a CDN

Finally, here’s an extra tip. Content Delivery Networks, or CDNs, are a network of optimized servers across the globe that guarantee fast delivery of static content such as images, CSS and JavaScript. The main advantage of using a CDN is that you’re retrieving content from a separate server. This overcomes one of the HTTP restrictions which limits sending a large amount of requests to a single server in one go. By overcoming this restriction, you can achieve shorter loading times! Another advantage of these CDN’s is that the data comes from a server closest to your visitor’s physical location. Shorter distances to the server means faster data retrieval. It’s possible to use more than one CDN, which means your browser can deal with even more HTTP requests at the same time.

Here at Yoast, we use MaxCDN (affiliate link), but with the rising popularity of CDN’s, there are plenty others to choose from. Once you’ve found a CDN provider of your liking, using a caching plugin like WP Rocket can help you to configure your CDN for your website.

Conclusion: Reduce those HTTP requests

As you can see, plenty techniques are available to decrease the loading time of your website. By far, the biggest improvement you can make is reducing the amount HTTP requests you send to the server. Additionally, making the files smaller through minification can also help speed things up.

So, go forth and optimize your CSS and JavaScript! Lower those HTTP requests! Your visitors and servers will thank you for it.

Read more: ‘Site speed: tools and suggestions’ »

Our development team has been working hard on new features for Yoast SEO Premium. You can expect some exceptionally cool stuff in the coming months. Besides fixing a couple of bugs, we lay the groundwork for one of these features today. Eagle-eyed users of the 3.7 version of Yoast SEO Premium will probably have noticed the new box beneath the analysis section, called ‘Insights’.

In its current form, Insights shows you the words or word combinations that appear most often in your text. Yoast SEO scans your content and analyses it as part of the readability check. Its goal is to help you write better content. With this new feature, you could use the results to check if your text is optimized for the right keywords. Maybe you’ll get valuable insights when a different word keeps popping up or you could notice a new combination of words. If the words in Insights don’t line up with your keyword research for this post, well, then you have work to do.

yoast seo 3.7 insights

Optimize your site for search & social media and keep it optimized with Yoast SEO Premium »

Yoast SEO for WordPress pluginBuy now » Info

Bringing new features to Yoast SEO Premium

Obviously, we’ll enhance this feature soon. In a little while, we can give you all kinds of cool suggestions for your texts or the structure of your site. And who knows what else. It’s one of a slew of features we have planned for Yoast SEO Premium. If you don’t have premium yet, we highly recommend you get it, since it adds a lot of value to the plugin. We can’t wait to show you what’s next!

To coincide with this release, we’ve also published a new Keyword research training. Our SEO copywriting training is a great success, but we’ve noticed that quite a few people already know a lot about the writing part. However, they’d love to learn more about the keyword research part. That’s why we’ve made them available separately as well. You can now follow whatever course fits your goals best.

At Yoast, we love to make our work available for everyone. We try to develop products that follow accessibility guidelines to take away any technical hurdles people may stumble on. But we can always take an extra step to help the user navigate the front-end. That’s why we’ve added a wizard to Yoast SEO 3.6, one that guides the user through the initial set-up.

Following hot on the heels of the 3.5 release, which focused on fixing bugs, we now release Yoast SEO 3.6. In this release, we’ve worked hard on getting a better experience when opening Yoast SEO for the first time. It can be rather overwhelming and the amount of setting up you have to do is pretty serious.

Making choices

Settings are a necessity. You have to make the right choices to get the most out of Yoast SEO. To help people navigate this, we’ve added a ten-step process that lets users gradually fill in the details of their site. Among other things, you can specify the environment in which your site is running, the type of site, social profiles, post visibility and Knowledge Graph metadata. You can also set up Google Search Console and choose the title settings.Yoast SEO onboarding

In the end, the user has a working install of Yoast SEO with the most important settings filled in. After running the wizard, the settings will be hidden. You don’t need these anymore, so they don’t have to be in the sidebar menu. You can turn these back on, of course. If you’d like to rerun the wizard you can launch it from the general tab on the settings page. We hope this feature makes it a little less overwhelming to open Yoast SEO for the first time.

Yoast SEO 3.6 Feature tab

Toggle features

The Yoast SEO dashboard has a new Features tab. Here you can enable/disable certain features. If you want, you can turn the advanced settings page on or off. Should you turn these off, they’ll disappear from the nav bar on the left-hand side as well. We’ve even made it possible to enable or disable the admin bar in Yoast SEO.

We’ve had multiple questions about the admin menu bar. Some people want to turn it off. That’s ok, and we’ve added that possibility, but you’ll lose a lot of handy checks. You’ll have no easy way to validate your HTML or CSS, or the mobile friendliness and speed of your site. But that’s all up to you of course. You can always turn the admin bar back on if you need it.

Yoast SEO Admin Bar

Full changelog

As always, we’ve posted the full changelog on WordPress.org. Happy updating!