In 2014, we decided to switch over to the (now) commonly-used HTTPS to encrypt sensitive data that’s being sent across our website. This post describes some useful tips based on our own experiences that might come in handy if you’re considering switching. 

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

Yoast SEO for WordPress pluginBuy now » Info

A little backstory

Back in 2014 HTTPS became a hot-topic after the Heartbleed bug became public. This bug allowed people with ill intent to listen in on traffic being transferred over SSL/TLS. It also gave them the ability to hijack and/or read the data. Luckily, this bug got patched quickly after its discovery. This incident was a wake-up call that properly encrypting user information over the internet is a necessity and shouldn’t be an optional thing.

To emphasize the importance of encrypting sensitive data, Google Chrome (since January, 2017) displays a clear warning next to the address bar whenever you visit a website that doesn’t encrypt – potential – sensitive data, such as forms.

How do I switch?

Because it’s important that your data is safe, we took steps in 2014 to ensure that we have SSL-certificates across our own websites. If you decide to switch (you really should!), there are a few things that you need to take into account to ensure your website fully works as intended once you’re done.

  • You need to change all your internal links. This also means updating links to assets (where necessary). Make sure to go through your theme and alter references to CSS, images and JavaScript files. Additionally, you can change all your links to start with // instead of https:// which will result in protocol-relative URLs.
  • Ensure your CDN supports SSL as well. We make use of MaxCDN, which allows you to easily set up SSL on your CDN subdomain.
  • There are various levels of SSL that you can choose from, each with their own pros and cons. You will find more information about that later on.
  • Ensure you have a canonical link present in the <head> section of your website to properly redirect all traffic coming in from http:// to https://.

Google also published a handy guide on how to move to HTTPS without massively impacting your ranking, which can be found here.

How does this influence my rankings?

Like stated in the previous section, moving from HTTP to HTTPS can influence your rankings slightly if you don’t plan accordingly. However, after you switch over to HTTPS, your rankings will actually improve over time. Google announced in 2014 that having an SSL certificate will be considered a positive ranking factor, so it’s worth the investment.

To make sure Googlebot can re-index your website more rapidly after the move, make sure you migrate to https:// during low-traffic hours. This way Googlebot can use more of your server’s resources. Just take into account that a medium-sized website might take a while to regain rankings. Have a sitemap? Then Googlebot might be able to recalculate and re-index your website even faster.

Setting up HTTPS & SSL on your server

Generally speaking, hosting providers have a service to allow you to enable HTTPS/order a certificate. There are a few types of certificates you can choose from, which differ in a few ways. Every variant also has their own price tag, so before purchasing one, make sure that you go with a certificate that fits your needs and budget!

If you’re a bit strapped for cash and tech-savvy, go take a look at Let’s Encrypt to acquire a free(!) certificate.

If you run and manage your own web server, there are a few things that you’ll have to enable in your server configuration before being able to use SSL certificates. This tutorial explains what steps to take to get a certificate running on your server.

OCSP stapling

Having to check the validity of an SSL certificate can result in a small hit in loading speed. To overcome this, you can make use of OCSP stapling. OCSP stapling is a feature that enables the server to download a copy of the certificate vendor’s response when checking the SSL certificate. This means that once a browser connects to the server, it checks the validity of the certificate based on the copy on the server instead of having to query the certificate vendor itself, resulting in a significant performance improvement.

Apache

Before enabling OCSP stapling on your Apache server, please check that you’re running version 2.3.3+ of Apache by running the command apache2 -v (or httpd -v) on your server. Lower versions of Apache do not support this feature.

If you went through the process of setting up HTTPS on your server as described in the ‘Setting up HTTPS & SSL on your server’ section, then you should have come into contact with a VirtualHost configuration specifically made for usage with HTTPS/SSL.

In that file, take the following steps:

  1. Inside the <VirtualHost></VirtualHost> section, you should add SSLUseStapling on.
  2. Just above the <VirtualHost></VirtualHost> section, add SSLStaplingCache shmcb:/tmp/stapling_cache(128000)
  3. Check that the configuration is still valid by running apachectl -t. If so, reload Apache by running service apache2 reload.

Nginx

Nginx also supports OCSP stapling. Before editing the server configuration, please check that you’re running version 1.3.7+ of Nginx by running the command nginx -v on your server. Lower versions of Nginx do not support this feature.

If you went through the process of setting up HTTPS on your server as described in the ‘Setting up HTTPS & SSL on your server’ section, then you should have come into contact with an Nginx configuration specifically made for usage with HTTPS/SSL.

In that file, add the following lines in the server {} section:

ssl_stapling on;
ssl_stapling_verify on;
ssl_trusted_certificate /etc/ssl/private/ca-certs.pem;

The last line references a file that contains a list of trusted CA certificates. This file is used to verify client certificates when using OCSP.

After adding these lines to the file, check that the configuration is still valid by running service nginx configtest. If so, reload Nginx by running service nginx reload

Become a technical SEO expert with our Technical SEO 1 training! »

Technical SEO 1 training$ 199 - Buy now » Info

Strict Transport Security header

The Strict Transport Security Header (HSTS) is another handy feature that basically enforces browsers to use the HTTPS request instead of the HTTP equivalent. Enabling this feature is relatively painless.

Apache

If you’re running Apache, first enable the Apache Headers module by running a2enmod headers. After this, it’s only a matter of adding the following line to your VirtualHost configuration (in the <VirtualHost></VirtualHost> section) that you set up earlier for HTTPS:

Header always set Strict-Transport-Security "max-age=31536000; includeSubDomains"

Reload the Apache service and you’re good to go!

Nginx

Nginx requires you to add the following line in the server{} section of your server configuration file:

add_header Strict-Transport-Security max-age=31536000;

Testing

To see if your SSL certificate is working properly, head over to SSL Labs, fill in your domain name and see what kind of score you get.

Redirecting URLs

To ensure requests are properly redirected to the HTTPS URL, you need to add an extra line to you configuration. This way, traffic that tries to visit your website over HTTP, will automatically be redirected to HTTPS.

Apache

In your default VirtualHost configuration (so the one that’s used for HTTP requests), add the following to ensure URLs get properly redirected:

RewriteEngine On
RewriteCond %{HTTPS} off
RewriteRule (.*) https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L]

As with the other changes we made before, don’t forget to reload Apache!

Nginx

In Nginx, change the default configuration file that was used for HTTP requests and alter it as such:

server {
    listen 80;
    server_name your-site.com www.your-site.com;
    return 301 https://your-site.com$request_uri;
}

Don’t forget to reload Nginx before testing these changes.

Conclusion

“Should I switch over to HTTPS?” Short answer: Yes. Using HTTPS ensures that private (user) information is being sent across the web in a more secure manner. Especially if you’re dealing with monetary transactions, HTTPS is a must.

What type of certificate you end up going with, depends on your specific use case and budget. Make sure to properly research your options beforehand.

Read more: ‘WordPress security in a few easy steps’ »

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’ »

Once your website starts growing and you continue writing blog posts, you’ll eventually end up with archive pages. These archive pages can be based on taxonomies, categories, custom post types and even dates. WordPress has built-in support for these archive pages, however there are some small drawbacks. In this post, I’ll explain to you how you can use these archive pages in a better way and ensure they actually add value to your blog.

Default archive pages

WordPress supports automatic creation of archive pages. This ensures that you don’t have to think about making them by hand. Sadly, these pages tend to only consist of a list of posts based on a category / taxonomy / post type without any further introduction. This means that your visitors are left stranded on a page without much explanation about what they’re looking at. The chances of your visitors finding what it is they’re looking for are terribly slim in this case and usually visitors will decide to leave that page immediately.

A simple solution to this problem: Add an “introduction” of some sorts to the page. A clear header can already greatly help out your visitors, but for extra important pages we recommend adding a description as well to better highlight the content that can be found on that archive page.

Before avidly writing these introductions, lets ensure they are properly displayed on the pages.

Learn how to structure your site well with our Site structure training! »

Site structure training$ 99 - Buy now » Info

Adding the introduction

Category, tag and custom taxonomy archives

If you want to add an introduction to a category, tag or custom taxonomy archive, you can easily create a custom template file to override the default ones. For example, you can create a `category.php` file in your theme to override the default template file. If you want more information on how the templating hierarchy works in WordPress, just look at this infographic before continuing.

In your newly created `category.php` template file, add the following snippet above the WordPress loop:

if ( ! get_query_var( 'paged' ) ) {
  echo wpautop( term_description() );
}

If you want to support shortcodes, try this instead:

if ( ! get_query_var( 'paged' ) ) {
  echo wpautop( apply_filters( 'the_content', term_description() ) );
}

The above code takes the title and description that you added in the WordPress backend for the category and displays it on the category archive page. This method also applies to tag and custom taxonomy archives.

If you use the Genesis theme, you won’t have to do any of the above alterations. Luckily, Genesis already has built-in support for this type of thing, so it’s as easy as ticking two checkboxes in the theme settings.

Genesis Archive Settings

Or if that doesn’t work, you can just add this to your Genesis child theme’s functions.php:

function yoast_term_archive_intro() {
 if ( ( ! is_category() && ! is_tag() && ! is_tax() ) || get_query_var( 'paged' ) ) {
   return;
 }

 echo '<h1 class="entry-title">' . single_term_title('', false) . '</h1>';
 echo '<div class="entry-content">' . wpautop( term_description() ) . '</div>';
}

add_action( 'genesis_before_loop', 'yoast_term_archive_intro', 20 );

Of course, you are free to expand the above function to add some more CSS classes to further style the output.

Custom Post Type archives

Altering custom post type archives is a bit trickier than overriding default tags, categories and taxonomies. You can add a new file called `archive-{posttype}.php` where you replace the `{posttype}` portion with the name of your custom post type. By then adding the following code to said file, you can achieve a similar result:

if ( ! get_query_var( 'paged' ) ) {
  $post_type = get_post_type_object( get_post_type() );
  echo '<h1>' . $post_type->labels->name . '</h1>';
}

Now for the hard part. Because custom post types don’t have any type of form in the WordPress backend, it is impossible to easily add a description to these custom types nor is there a recommended way of storing the data. One method you can use when you use a child theme in Genesis, is by expanding the `functions.php` file with the following code:

function yoast_cpt_intro() {
  if ( ! is_post_type_archive() || get_query_var( 'paged' ) ) {
    return;
  }

  $post_type = get_post_type();
  
  if ( genesis_get_option( $post_type . '-title', 'child-settings' ) ) {
    echo '<h1>' . genesis_get_option( $post_type . '-title', 'child-settings' ) . '</h1>';
    echo wpautop( genesis_get_option( $post_type . '-intro', 'child-settings' ) );
  }
}

add_action( 'genesis_before_loop', 'yoast_cpt_intro', 20 );

As you may have noticed, the code example uses two custom genesis options: `$post_type . ‘-title’` and `$post_type . ‘-intro’`. These can be defined in your Genesis child theme. You can read how to do that over here.

Preventing duplicate content issues

To avoid duplicate content issues, the previous code snippets make use of a simple check to ensure we’re not on a paginated page. The `get_query_var( ‘paged’ )` function call determines whether or not we’re on a paginated page.
If it detects the query variable `paged`, we can assume that this page is one in a series of multiple pages and thus should not display the description.

Since the introduction of rel=”next” and rel=”previous”, websites that have paginated archives and whom have properly implemented the `rel=”next”` and `rel=”previous”` attributes, will be receiving more visitors on the first page in the series. Nevertheless, you should not solely rely on this, but use it in conjunction with the `get_query_var( ‘paged’ )` option.

Styling the archive introduction text

To ensure that people actually read the introduction text, it’s very important to add proper styling to the page. After all, these introductions need to be made with humans in mind first, SEO second. Don’t fall in the trap of styling it the same way as your posts as this might result in visitors not understanding that the text is actually something entirely different from your content. A good example can be seen in the following screenshot:

Conclusion

Based on the information shared in this post, you should be able to make clear archive pages that help your visitors understand the content they are looking at. Additionally, you should be able to create these archive pages for custom post types. We look forward to seeing some of your beautifully styled archive pages.

Read more: ‘Site structure: the ultimate guide’ »

At Yoast, we sometimes receive the question how to remove www from your website’s URL – or add it. In this post, I’ll show you how you can enforce either a www or non-www URL by tweaking your .htaccess file (or nginx.conf if you’re running on an Nginx server).

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

Does using one or the other impact SEO?

You might be wondering if using one or the other will have an impact on your SEO. The answer is: no. It’s really just a matter of preference/esthetics. Just make sure you properly add the www and non-www domains in Google Search Console, as described here, to ensure Google can properly index your website.

Removing www from your domain name

If you prefer to market your website without the www prefix, you can add the following lines to your .htaccess file (Apache only):

RewriteEngine On
RewriteCond %{HTTP_HOST} ^www.example.com$ [NC]
RewriteRule ^(.*)$ http://example.com/$1 [R=301,L]

Restart Apache and check that you get redirected to the non-www version when using the www prefixed URL.

Note that Apache’s mod_rewrite module needs to be enabled. Otherwise, the above snippet won’t work.

Now, in Nginx this snippet is a bit different, but yields the exact same result when placed in the proper configuration file (which depends on your setup):

server {
 server_name www.example.com;
 return 301 http://example.com$request_uri;
}

Now just restart Nginx and you should be good to go!

Adding the www instead of removing it

To do the opposite of the previous section, add the following code to your .htaccess file:

RewriteEngine On 
RewriteCond %{HTTP_HOST} ^example.com$ 
RewriteRule (.*) http://www.example.com$1 [R=301]

And in Nginx, all it takes is this:

server {
 server_name example.com;
 return 301 http://www.example.com$request_uri;
}

That’s all there is to it!

Read more: ‘Ask Yoast: www and duplicate content’ »

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’ »

There will be times where you want to redirect visitors to a different part of your website when they visit a particular page or post. Reasons for this can be that you renamed a post and its URL, a page was removed or you want a different page to rank.

Redirects in a nutshell

The name ‘redirect’ pretty much says it all: It sends visitors traveling to a specific page to an alternative one. But what does this 301 mean and how does it differ from a 302 redirect? Both send your users to a different page. The only subtle (yet very important) difference is that a 301 will permanently send visitors and search engines to the new destination. 302 redirects indicate that you only temporarily want visitors to be sent to a different page.

Creating a 301 redirect on the server

One of the most basic methods of adding a 301 redirect, is by editing your .htaccess file on the server. This method is only available on Apache servers. Nginx has their own way of defining redirects in the server configuration and requires extensive knowledge of system administration.

These configurations can get quite unmaintainable over time, especially if you’re an avid blogger or you’re trying to improve the SEO of your posts. On top of that, you would have to log in on your server over FTP, edit the files and re-upload them every time you add a new redirect. That’s why, generally speaking, using this method is not considered the way to go.

Creating a 301 redirect with PHP

As a WordPress developer, you have two options: Either you make a redirect by altering the headers of a file in the code -or- you make use of WordPress’ built-in
wp_redirect function.

An example of plain PHP could be as follows:

<?php
// MyExampleFile.php
header("HTTP/1.1 301 Moved Permanently"); 
header("Location: http://www.my-blog.com/a-new-destination"); 
?>

And this is how you’d do the same, but now by using WordPress’ built-in function:

wp_redirect( get_permalink( http://www.my-blog.com/a-new-destination ), 301 );

If you forget to add the 301, both WordPress and PHP will both assume that it’s a 302 redirect, which isn’t always the case.

This method is a bit easier than editing files on the server, but can also become cumbersome once the amount of redirects increases.

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

Yoast SEO for WordPress pluginBuy now » Info

Creating a 301 redirect with Yoast SEO

Our Yoast SEO Premium plugin offers you a helping hand when it comes to creating these redirects. Our built-in Redirect manager assists you whenever you change the URL of a post, page or any of the taxonomies that may result in a possible 404 if you don’t properly redirect visitors.

In addition, we also offer you an interface to edit or remove these redirects at a later point in time. The plugin also tells you when you’re about to create a redirect that will result in a redirect loop. This looping is something you want to avoid at all costs.

Read more: ‘How to properly delete pages from your site’ »