With our Ask Yoast case studies we help clients with their SEO by reviewing the website and giving clear advice and hands-on tips. Those clients send us their website because they’re curious what improvements can be made to improve the overall rankings. This time, we reviewed the website of a high-quality sun protection brand: Calypso. The brand started many years ago in the UK but is nowadays sold all around the globe. Let’s dive into the website to see what they’re doing well and what things need improvement. 

Improve the sharing experience of your products on social media with the Yoast WooCommerce plugin! »

Yoast WooCommerce SEO pluginBuy now » Info

A clean entrance

On entering the website, we immediately see a clean and inviting homepage. The homepage makes sure visitors can easily navigate to the most important content of the website: the actual products. However, we also see things that can be improved.

First of all, we see the slider on top of the homepage. We’re not a big fan of sliders because different studies show that only around 1% of your visitors would actually click on a slide. Besides, sliders often slow down your website a lot, and there are a lot more reasons which you can find in the post linked above.

We think the slider on Calypsosun.com is even more confusing because it contains a video. When a visitor presses the play button within the video, he or she is sent to the video on YouTube:

Slider image link to video

The play button which sends visitors to YouTube

This means that you say goodbye to your visitors in an early stage of their visit. Try to keep them on your website and send them to your content.

What is the best practice in this case? In our eyes, another image, which is now below the fold on the homepage, would be a great top image:

Sun Protection banner

This banner would be a great top image for the homepage

The image contains some introductory content which tells your visitors what’s on the website. Adding a clear call-to-action below this image would be great. Think of a button with a text such as ‘See all products’ to guide your visitors to the product overview page. Below this call-to-action, you can still show the top sellers as you do now.

What are the site’s pages about?

Google needs to understand what a website’s pages are about before the pages can rank for certain keywords. Of course, textual content tells Google what a page is about. An important part of your text are the headings. Headings are meant to tell Google what the main subject of a page is and what other relevant subjects are on the page. This means that the main subject of a page should always be an H1 heading. Subheadings in the text should be H2 or H3 and less important headings should be H4, H5, etc. We recommend using H4 and higher for headings in a sidebar or footer because Google shouldn’t use those to determine what the page is about.

For example, checking one of the product pages of Calypso, we noticed there is no H1 or H2 heading.

The headings on a product page

The name of the product is an H3 heading, but this should be the H1 heading. The subheading ‘Directions of Use’ doesn’t tell so much about the subject of this page so this could indeed be an H5. When the subheading is relevant to the text, it should be an H2 of H3 heading.

Another way of telling Google what a page or post is about is optimizing your site’s metadata such as page titles and meta descriptions. We noticed that Calypso uses great page titles and meta descriptions so they’ve already understood how important this can be for SEO.

Making your pages stronger

It’s clear that every website needs content to rank for certain keywords. If content is well-structured with headings, and page titles are optimized, it’s time to make your most important pages stronger. For Calypso, their product pages are most important because these reflect the products the company is based on. In this case, the product overview page could benefit from a little more SEO-optimized copy.

You might think that blog posts on the website are less relevant. However, blog posts can be valuable in another way, which we’ll explain in the next paragraph. You’ll always have important content and less important pages and posts, but even those have their purpose.

Let Google know what’s important

How do you let Google know what pages are more important? By adding internal links from all relevant pages to the most important pages, you make those pages stronger. When a certain page has lots of links from relevant other pages, Google understands that this page might contain the most important content around a keyword. Make sure you add relevant anchor texts to the internal links to make Google understand for what keywords the most important pages of your website should rank.

For example, when you write a blog post about the best sun protection for kids, you should add internal links to the actual products. If you use anchor text such as ‘Sun protection for kids’, it will be clear to Google what the relevancy between the pages is. Doing this consistently, your product pages will get more and more links and will become the strongest pages of your website.

The ‘Be Sun Ready’ page could be a great cornerstone article for ranking on relevant keywords. This page, however, could benefit from a few optimizations: they could add links to relevant products in the content and a call-to-action-button to the products page. Doing keyword research should provide them with enough keyword suggestions to make this great page SEO-proof.

The products overview

Navigating to the product overview page, we noticed that the categories are visible in tabs above the products:

Product overview Calypsosun

The categories are shown in the tabs above the products

We recommend adding narrow signs to make sure visitors understand that more content can be found clicking on those tabs. Think of a drop-down sign like we use in our main menu:

Screenshot of the main menu of Yoast.com

The drop-down signs after each menu item

You’ll see that these signs will make it clearer to your visitors that they can click on the tabs. Make your site as user-friendly as possible, because the signals users provide are precious as Google uses these as well in their algorithm. Since SEO and UX are increasingly tied, it’s important to improve those user signals.

Using buttons to guide your visitors

Clear buttons can have a positive effect on the page path visitors take. You can guide your visitors to the pages you want them to go to next page. For example, you could add a button below each product which says ‘More information’. Doing this, you guide the visitors to the specific product pages and you make sure visitors understand that they can find more content related to the product by clicking on it. Now, the only way visitors see that there is a link behind the product on the current overview is by hovering over the image.

The product pages already have clear calls-to-action added: buttons which say ‘Where to buy’:

The ‘Where to buy’ button is a clear call-to-action

However, there is a way to increase the number of clicks on this button. We recommend changing the color of the button into a color that’s not in your color scheme. Doing this, the button will stand out more and might get more visitors to click on the button. Don’t you think the button catches your eye when it’s in another color?

We’ve changed the color of the button to make it stand out more

Of course, if you have a sufficient amount of traffic you can – and should – do A/B tests for these kinds of things. After an A/B test, you can easily conclude what color works best.

The last tip we want to give for the product page is related to the ‘Where to buy’ section. After clicking on the button, a screen pops up with the names of all the different resellers of the products. However, the only supplier which contains a link is Amazon and this logo is placed at the bottom of the popup screen. When visitors come to your website, they are already online, and they might immediately want to buy your products online. This means that it could be a good idea to guide them to Amazon first to give them the opportunity to buy your products directly.

Make sure your website loads fast

An important issue on the website of Calypso is page speed. Page speed is crucial in the eyes of Google and is considered to be a ranking factor in the future mobile-first index. The longer it takes to load a page, the less user-friendly the page is. Probably you’ll agree that it can be annoying if you have to wait too long for a web page to load. Visitors will bounce because of the loading times and this is a negative user signal, like we mentioned before.

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

Technical SEO 1 training$ 199 - Buy now » Info

Testing the website of Calypso in the Google PageSpeed Tool we noticed a very low score: 18/100. This means you’ll have to start working on the loading times of the website. All possible improvements regarding speed are listed in the Google PageSpeed tool. We recommend starting with enabling compression and with optimizing images. Resolving those two issues probably results in the quickest and easiest increase in the page speed score.

To sum it up

We really loved reviewing the website of your well-known sun protection brand. You’ve created a very clean and clear website and with a couple of changes, you can improve your site’s SEO as well.

For your homepage, we recommend removing the slider and instead, add a clear image which reflects the website. Some introductory content will tell your visitors what the website is about and with a clear call-to-action you can guide your visitors to the most important pages.

To make those crucial pages even stronger, we recommend setting up an internal linking strategy. Make sure your internal linking reflects the hierarchy of the website to help Google understand the site structure. Besides that, using the right headings will improve the site structure as well.

And last, but definitely not least, working on your site’s loading times can be very beneficial. Increasing the page speed score will be valuable for both your visitors as for your site’s SEO. Good luck!

Read more: ‘Ask Yoast case study: SEO of an online shop’ »

In our Ask Yoast case studies we give SEO advice for websites in a specific market or industry. This time: the website of Slemish Design Studio Architects, the business site of an architect duo. The architects told us that they get great responses from their clients, but is their website optimized for search engines as well? We’ll dive into this architectural website to see what improvements can be made to enhance their site’s SEO.

First impression

The first page we land on is the homepage. We see lots of full screen images of the great work these architects deliver on top of the homepage. Though impressive, the images are shown in a slider. Loyal readers of our blog know that we’re not a big fan of sliders. Many experiments show why you shouldn’t use a slider on your website. Only 1% of your visitors will actually click on a slider, they slow down your website and lots of visitors ignore sliders because of banner blindness. Just to name a few.

Looking at this specific website, the slider images are very big as well. The textual content of the homepage is pushed down. We recommend showing some smaller images on top of the site, instead of the slider, and adding some clear introductory content just below these images. Try adding your USPs to the introductory content: Why should visitors choose you as their architect?

Lastly, by adding a clear call-to-action just below the introductory content you’ll make sure visitors can easily navigate to your most important pages. For example, you could think of a button which says ‘Get inspired by our projects’ or ‘Our services’: decide what the main goal of your homepage is. Just to show you the difference, we’ve created a mock-up of how the homepage could look like after following our advice:

Homepage example of Slemish Design Studio Architects

Beautiful images, too little text

On the ‘The Studio’ page, we notice a tab ‘What we do’. This tabbed content tells visitors what kind of work you do and what type of services you offer. Because of the relevancy of this content, we think these services deserve their own menu item. Visitors who want to know more about your team and your company may click on ‘The Studio’. However, they might not expect to find the services you offer there.

In addition to that, your services are great subjects to write about. Writing nice informational copy about your services will increase your chance of ranking for keywords related to these services. When you add sufficient relevant content, Google will understand that your website has content for people looking for services like yours. This means those people will easily find you. The more your content seems to fit to the needs of people who search for these keywords, the higher you’ll rank in the future.

Make sure you optimize one specific page or post for one subject/keyword. When you optimize one page for more keywords that are too different, it’s unclear for Google what the main subject of the page is. Pages that contain a lot of information about the keywords you really want to rank for, should become your cornerstone content pages. This blog post about cornerstone content explains in detail what cornerstone content means and this blogpost shows you how to incorporate cornerstone content into your website.

Lastly, we think you can improve your content as well by adding more copy to your project pages. Consider writing a nice text about the planning stage of the project, the building stage and the delivery stage of the project, for instance. In this copy you can add relevant keywords for your business. In addition to that, this allows you to internally link to your cornerstone content pages from your project pages. 

Learn how to write awesome and SEO friendly articles in our SEO Copywriting training »

SEO copywriting training$ 199 - Buy now » Info

Structure your text

When you decide to write more copy for your website in the future, make sure the pages and posts have a great heading structure. On your current pages and posts, we noticed that your logo is an H1 heading. However, the H1 heading should describe the main subject of a particular page on your site to help Google understand what the subject of that specific page or post is.

For example, checking ‘The studio’ page, we see the following headings on top of the page:

Headings Slemish Design Studio Architects

Your company name/logo has an H1 tag now, which means that your company name would be the main subject of this page. While in fact, ‘The studio’ is the main subject of the page. So you should change the H2 heading of ‘The studio’ into an H1 heading. Just remove the H1 heading from the logo on every page of the website. We’d advise to check all of your pages and posts and only add one H1 heading, that describes what can be found on there, on each page.

Read more: ‘SEO basics: how to use headings on your site’ »

The right metadata

You’ll need to add relevant keywords to your page titles to help Google understand what your pages are about. Since page titles are still one of the most important ranking factors it’s important to optimize those to the fullest.

Looking at the page title of your homepage, we think you’ve added too many different keywords to show what your website is about:

Adding all different locations to your page title makes it unclear what your website is about. Moreover, the snippet doesn’t look very enticing to click on in the search results. This might cause a low CTR, or click-through rate. If you want to rank for all the different locations, adding separate pages with unique page titles and content for every location would be a better idea.

We’d advise to create appealing page titles and make sure they describe what can be found on that specific URL. For the homepage, use your USP and add a call-to-action such as ‘See our projects here’ to make people click on your page in the search results. Don’t you think a snippet like this will be more appealing to potential visitors?

On top of that, it’s important to be consistent in your branding. Add your company name to every page title. If you do that, people will recognize your page in the search results more easily, because of the brand name in every page title.

Add more relevant content to your blog

Having a blog can be very beneficial for SEO. Adding posts regularly makes it easy to add content about relevant keywords to your website. It helps you to start ranking for new keywords and to keep ranking for the keywords you already rank for.

Slemish Design Studio Architects have a blog and they add new posts regularly, which is great. However, it seems that lots of posts have little textual content. For example, this post only has two sentences:

Blog post of Slemish Design Studio Architects

Google could consider this post as a thin content page, which could hurt your website’s rankings. Since pages like these don’t add much value to your website, you’d better add more content or remove them from your website.

Keep reading: ‘Blogging: the ultimate guide’ »

Create strong cornerstone content

Besides the benefits of adding more content about relevant keywords to a blog, a blog also gives you an opportunity to add more internal links to your most important pages and posts. For example, when you’ve created a separate page for the service ‘Sun Rooms’ you could write a blog post about new innovations for sun rooms. From that post you can add an internal link to the page about the ‘Sun Rooms’ service. Doing this consistently, that service page – which could be a great cornerstone content page if you add sufficient content – will become a better search result, according to Google.

In addition to internal links within a text, you can add a popular, recent or related posts section to the blog. The sidebar is often used to add sections like these. These links in the sidebar will give the posts they link to some extra link value.

Lastly, adding your blog’s categories to the sidebar will give your category pages some more link value too. Consider doing this if you want to rank with your category pages.

A fast loading website

The longer visitors have to wait for your website to load completely, the more likely it gets that some of them will ‘bounce’ back to the search results. A long loading time frustrates visitors, so they might leave your website before seeing any relevant content. Google uses bounce rate, among other things, to determine if a website provides visitors with a good result. When lots of visitors bounce back to Google’s search results quickly, that isn’t a good sign. You might understand that this can harm your rankings.

On top of that, page speed is an actual ranking factor. Google understands that a website with bad loading times probably isn’t the best result. Similar websites that load faster are likely to end up higher in the search results.

We’ve tested the website of Slemish Design Studio Architects and we found a score of 24/100. The score is in red and this means that there’s work to do! Just follow the advice Google gives in the page speed tool as this leads to both a better user experience, as well as better rankings. 

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

Technical SEO 1 training$ 199 - Buy now » Info

To sum it up

It was a pleasure analyzing the website of this architect duo. You show some amazing work in the images on the website! Adding a cleaner homepage with a clear call-to-action could result in more conversions, so more actual clients. Also, specific pages for all your services could be valuable for both Google and visitors.

Basically, our most important SEO advice is: make sure Google understands what your website is about. This means you’ll need to write relevant content about keywords you’d like to rank for. Furthermore, optimizing your site’s metadata – like titles and meta descriptions – and headings would be beneficial. With internal links you can connect your content and give your most important pages extra value.

And last, but definitely not least, making your website load faster will really improve your site’s SEO and user experience!

Read on: ‘How to optimize your real estate site’ »

It’s official: Google announced that page speed will be a ranking factor in its mobile-first index. But what does that mean? There’s no beating around the bush anymore: you should work on making your site as fast and accessible as possible. Don’t wait, do it now. I mean it.

For years, we’ve been bombarded by one message: mobile is going to take over the world. We needed to adapt ourselves to this new reality where everyone does everything on their mobile devices. While we still spend loads of time in front of our desktop and laptop machines, we can’t deny mobile is crucial. Just look at the upcoming markets, where people use their mobile for all possible tasks.

We also know that if you want to compete with the big boys, get a solid ranking for your mobile site and make some money from it, you need to take care of a few things. One of the most important ones is page speed. 

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

Technical SEO 1 training$ 199 - Buy now » Info

The verdict is in

Let’s look at some recent research: according to Google the average time it takes for a mobile landing page to load is now 22 seconds. Compare that with the three seconds visitors need to decide if they want to stay for your page to load and you will see a huge discrepancy. People are impatient. They want something, and they want it now. While page speed is important for your SEO, it is even more important for your UX, conversion and general customer happiness.

Yes, page speed will be a ranking factor

At the moment, page speed is more of an indicator than a ranking factor. Unless your mobile site is extremely slow, you can still get decent rankings with average page speeds. But it’s been proven time and time again that the speedier your site, the better your results will be.

Google’s latest research shows that the chance of a bounce increases 32% when the page load time goes from 1s to 3s. 1s to 5s increases the chance to 90% and if your site takes up to 10s to load, the chance of a bounce increases to 123%. That’s incredible. For search engines, better results and performance is a sign of a healthy site that pleases customers and therefore should be rewarded with a higher ranking.

Also, Google has recently gone on record saying that page speed will be a ranking factor in its upcoming mobile-first index. Details on how they will evaluate page speed for mobile and calculate rankings are still unknown. But, what we do know doesn’t change much from what we at Yoast have been saying for some time: make sure your site is responsive, as fast as possible, solidly structured, and full of excellent content.

5 ways to speed up your site

Do everything in your power to increase the loading speed of your mobile site. Everyone loves a fast site: we SEOs and search engines, but most importantly, our customers. Firstly, check Google’s PageSpeed Insights tool to see what they advise you to do. Secondly, take a look at the size of your page, as many sites are bloated nowadays. Try to shave off as much as you can by optimizing images, compressing code and loading fewer external scripts and ads. In addition to that, here are five things you can work on:

Activate AMP on your pages

Google’s AMP project is meant to give the web a necessary speed boost. It’s not too hard to implement, and it will give your mobile site a life in the fast-lane. According to Google, AMP is not a ranking factor, but it’s not hard to predict it has a decent chance to become one. Read Google’s documentation on how to implement AMP.

Use HTTP2

That series of tubes we call the internet is at the dawn of a new age. Several new technologies will bring much-needed upgrades to the way the underlying infrastructure has been built. One of these is called HTTP2, and you can already use to speed up your site, barring it uses HTTPS. Find out more on performance optimization in an HTTP2 world.

Switch to PHP7

As we mainly use WordPress in these parts, getting everyone to use PHP7 is a big deal. To get everyone to move from unsupported and unsafe versions, like PHP5.2 and PHP5.3, we at Yoast created Project WHIP. Moving to PHP7 will give your WordPress site a speed boost, keep it secure and make it future proof.

General optimizations

You should already know these tactics. Please use a CDN to make sure that your content is delivered from a location close to the visitor. Use a caching plugin like WP Rocket to keep static parts of your site in the browser cache. Last but not least, please optimize images. That’s low-hanging fruit.

Critical rendering path

Running a PageSpeed Insights test will show you which elements block a page from rendering quickly. The critical rendering path is formed by the object – like CSS and JavaScript – that have to load before the content can show up on screen. If this content is blocked, your page will render slowly or not at all. Pay attention to this and keep the path free of obstacles. At modpagespeed.com you’ll find several open source tools to help you with these issues.

Always work on your page speed

Keep in mind that your work is never done. Your mobile site is never too fast, and your customers will never come flocking to you when you shave off just a little of your loading time. Keep working on it. Now, tomorrow and next month. If possible, try to automate your PageSpeed Insights testing, so you get regular updates. Follow the news to see if there are new ways to speed up your site.

Read more: ‘How to improve your mobile site’ »

In the first post of our metadata series, I discussed the meta tags in the <head> of your site. But there’s more metadata in the <head> that can influence the SEO of your site. In this second post, we’ll dive into link rel metadata. You can use link rel metadata to instruct browsers and Google, for example to point them to the AMP version of a page or to prevent duplicate content issues. The link rel tags come in a lot of flavors. I’d like to address the most important ones here.

Use rel=canonical to prevent duplicate content

Every website should use rel=canonical to prevent duplicate content and point Google to the original source of that content. rel=canonical is one of those metadata elements that has an immediate influence on your site’s SEO. If done wrong, it might ruin it. An example: we have seen sites that had the canonical of all pages pointed to the homepage. That is basically telling Google that for all the content on your website, you just want the homepage to rank.
If done right, you could give props to another website for writing an article that you republished.

If you want to read up on rel=canonical, please read this article: Rel=canonical: the ultimate guide.

Add rel=amphtml to point search engines to your AMP pages

In order to link a page to its AMP variant, use the rel=amphtml. AMP is a variation of your desktop page, designed for faster loading and better user experience on a mobile device. It was introduced by Google, and to be honest, we like it. It seriously improves the mobile user experience.

So be sure to set up an AMP site and link the AMP pages in your head section. If you have a WordPress site, adding AMP pages is a piece of cake. You can simply install the AMP plugin by Automattic and you’ll have AMP pages and the rel=amphtml links right after that.

If you’d like to read up about AMP, be sure to check our AMP archive.

dns-prefetch for faster loading

By telling the browser in advance about a number of locations where it can find certain files it needs to render a page, you simply make it easier and faster for the browser to load your page, or (elements from) a page you link to. If implemented right, DNS prefetching will make sure a browser knows the IP address of the site linked and is ready to show the requested page.

An example:
<link rel="dns-prefetch" href="https://cdn.yoast.com/">

Please note that if the website you are prefetching has performance issues, the speed gains might be little, or none. This could even depend on the time of day. Monitor your prefetch URLs from time to time.

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

Technical SEO 1 training$ 199 - Buy now » Info

What about rel=author?

Rel=author has no effect whatsoever at the moment. It hasn’t had any effect we know of for quite a while actually, as Joost already mentioned this in October of 2015. You never know what use Google might come up with for it, but for now, we’re not pushing it in our plugin. It was used to point to the author of the post, giving the article more or less authority depending on how well-known an author was. At the time, this was reflected in the search results pages as well (it’s not anymore). No need to include it in your template anymore.

Other rel elements include your stylesheets (make sure Google can use these) and you can set icons for a variety of devices. SEO impact of these is rather low or simply not existing.

Is there more?

So we discussed meta tags and link rel metadata in the <head> . Is there even more metadata that affects SEO? Yes there is! In our next metadata post, I’ll explore social metadata, like OpenGraph and Twitter Cards. In addition to that, we’ll go intohreflang, an essential asset for site owners that serve more than one country or language with their website. Stand by for more!

Read more: ‘Metadata and SEO part 1: the head section’ »

A revolution is currently going on in the underpinnings of the web. HTTP, the protocol your browser uses to connect to your site, has a new version: HTTP/2. This is not something that should concern the average user, but for web developers, it changes how we do performance optimization entirely. In this short article, I want to explain what performance optimization best practices you can do away with, and why.

What changed?

The most important thing you should know about the new HTTP/2 is that it no longer requires a new request for each file. This is the modification that makes our performance optimization guidelines change so drastically. In the HTTP1 / HTTP/1.1 world, it’d be faster to combine JS & CSS files and even images, so there would be fewer requests between browser and server. In the HTTP/2 world, this type of optimization is no longer needed and can even become counterproductive.

Let our SEO experts analyze and optimize your site: Get Yoast SEO Care! »

Yoast SEO Care$ 199 - Buy now » Info

Can I use this already?

The answer is, fairly simply: yes. If your site is running on HTTPS, then all major current browsers support HTTP/2. You or your hosting company might have to change your server configuration to make sure it supports HTTP/2, but that’s it. Some older browsers might not be able to use it, but your site would still work for them.

So I can use HTTP/2, but should I?

Yes, you should use HTTP/2! It’s a lot faster than old fashioned HTTP1, and when you set it up well, most of your visitors will benefit hugely.

Does HTTP/2 mean I don’t need a CDN?

Even with HTTP/2 you still need a CDN. A CDN delivers content a lot faster than your average server ever will, so your site would still benefit enormously from having one. Every proper CDN will already support HTTP/2.

Performance best practices that changed

The following performance best practices are no longer needed with HTTP/2 and should be done away with:

  • Concatenating CSS and JS files
    As reducing the number of requests is no longer an issue, there’s no reason to do this anymore.
  • Image spriting
    Image spriting is the practice of combining several small images into a larger image so as to reduce the number of requests. This is a cumbersome process with quite a bit of overhead, and HTTP/2 entirely removes the need for it.
  • Domain sharding
    Though this was slightly less common, some heavy sites used multiple CDN domains to serve their files. This because a browser could only open eight parallel connections to a server in the world of HTTP/1 and they’d want to serve more files in parallel. Because HTTP/2 removes the need for parallel connections as there can be parallel downloads within one connection, this best practice becomes counterproductive. The use of multiple CDN domains actually means multiple DNS requests, which slows the site down instead of speeding it up. (Steve Souders, the godfather of web performance, already predicted in 2013 that when HTTP/2 becomes ubiquitous, domain sharding will go away.)
  • Inlining CSS and JS
    Inlining small bits of CSS and JS is a practice that was aggressively pushed by Google. Because the CSS and JS are inline, it cannot be cached properly. As a request for a small file now has no extra overhead, we can do away with this best practice.

Google PageSpeed and HTTP/2

Unfortunately, Google’s PageSpeed tool and many other web performance testing tools are rather slow in their adoption of HTTP/2. They should be changing their guidelines. If a simple HTTP/2 test shows you that a site is capable of using HTTP/2, quite a few of the site speed suggestions are moot. Their documentation speaks of “networking round trips” that simply, in an HTTP/2 environment, don’t happen.

There are people at Google that understand this, of course. This presentation by Ilya Gregorik in 2015 already shows all of that.

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

If you check your site speed with Google PageSpeed Insights you might get the advice to minify your Javascript (JS) and Cascading Style Sheets (CSS) files. Your JS files contain the code for the interactive elements of your website. And in your CSS files you specify the design of your pages. Minifying those files will decrease your page load time, thereby providing a better user experience.

We received a question about minification of JS and CSS files at Ask Yoast. Besides that, we also get the following question quite often when performing one of our SEO reviews:

“Why and how should I minify my JS and CSS files?”

Check out the video or read the answer below!

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

Yoast SEO for WordPress pluginBuy now » Info

Minify your JS and CSS files

“JavaScript (JS) is the stuff that makes your web page interactive and CSS is the stuff that makes your web page look good. Basically, these two things are code that you send to the browser, and that the browser needs to render.

A browser, like any other computer program, doesn’t care what the language that it receives, looks like. It doesn’t need the spacing and the comments and all other stuff, that your developer needs to make sense of it all. He needs the structure to get through the code, however the browser has no benefit from that.

Stripping all of that down, actually makes the file that you send to the user a lot smaller. Because when you minify it, you remove all the extra spaces, all the line breaks and all the comments. Stripping all that, can save up to 30-40%, or even 50% of file size in some cases. There really is no benefit of sending that stuff to the end-users, so minifying saves time and money for everyone. 

That’s why you should do it. Good luck!”

If you’re on WordPress, there’s a vast amount of plugins that can help you minify your HTML, CSS and JS files. We generally recommend WPRocket for this and some further improvements to speed up your site.

Ask Yoast

In the series Ask Yoast we do our best to answer your SEO question! Need some help with your site’s SEO? Send your question to ask@yoast.com. You might get a personal answer on video!

Read more: ‘DIY: optimize your browser cache’ »

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

A question that often pops up for sites that are chasing “hot topics” is: how to get Google to crawl our site faster? This could be either because you have a big site and want to see changes faster or because you’re optimizing a news site. There are a few things you can do to improve your crawl speed. We’ll cover them in this post.

There are a couple of possible reasons why Google is slow when spidering your site. The first might seem obvious: if Google doesn’t find enough (quality) links pointing to your site, it doesn’t think your site is very important. The other reasons are technical: it has too much to crawl on your site, your site is too slow, or it’s encountering too many errors.

Your site doesn’t have enough authority

When your site doesn’t have enough quality inbound links, Google will not crawl your site very quickly. You can imagine it doesn’t necessarily want to spend much time on a site that it doesn’t deem important. When your site is brand new, this will be the case.

So, when you need more crawl action on your site, start doing some link building. We’ve written about that topic before, I’d suggest reading these three posts as I won’t go into it any further here:

  1. Link building from a holistic SEO perspective
  2. Link building, what not to do
  3. 6 steps to a successful link building strategy

If the above three posts are not enough for you, there’s more in our link building archive.

Technical reasons for slow crawling

The technical reasons for Google to crawl your site slowly can be divided into three groups: your site is too slow, you have too many errors, or you have too many URLs.

Your server is slow

The main reason why we see Google crawling sites slowly, is when the site itself is actually slow. Google actually indicates this to you when this is the case, on the “crawl rate” page of Google Search Console. If this is the case, Google might show you a “faster” option:

Crawl faster

Our advice: set it to “Faster”, but don’t stop with that: make your server respond faster, either by upgrading your hosting, or improving your site’s caching. Chances are that when Google is suffering long load times, your users are as well.

Optimize your site for Google News! Create XML News Sitemaps, editors’ picks RSS feeds and more with Yoast News SEO! »

News SEO for WordPress pluginBuy now » Info

Too many errors on your site

If you have a lot of errors on your site for Google, Google will start crawling slowly too. To speed up the crawl process, fix those errors. Simply 301 redirect those erroring pages to proper URLs on your site.

If you don’t know where to find those errors: use the Google Search Console integration in Yoast SEO. Or log into Google Search Console. If you have access to your site’s access logs, you can also look at those, preferably with a tool like Screaming Frog’s Log file analyzer.

To prevent your site from being crawled slowly, it’s important that you regularly look at your site’s errors and fix them. We have a more extensive article on fixing 404 errors.

When your site is down too much, Google will slow down incredibly hard. If this happens because of your hosting, switch hosting. Make sure to check on your site’s uptime with a tool like Pingdom.

Too many URLs

If you simply have too many URLs on your site, Google might crawl a lot but it will never be enough. This can happen because of faceted search navigation for instance, or another system on your site that simply generates too many URLs. To figure out whether this is the case for you, it’s always wise to regularly crawl your own site. You can either do that manually with Screaming Frog’s SEO spider, or with a tool like OnPage.org.

Tips to increase your crawl speed

A couple of simple tips to increase your site’s crawl speed:

  • Using the methods above, find and fix all the errors.
  • Make sure your site is fast.
  • Add an XML sitemap to your site and submit it to the search engines.
  • If all of that fails to improve your crawl speed, start link building!

Specifically for news sites, if you want to be indexed faster, you should also look at our News SEO plugin. When you’re in (or want to be in) Google News, it can help make sure you meet all the technical requirements.

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

Just today, WP Media pointed us to a high-risk XSS vulnerability in W3 Total Cache (W3TC). This was a very popular WordPress plugin that has over 1 million active installs. Although it’s a very popular plugin, it hasn’t been updated in over six months. We stopped recommending it a while back for WP Rocket, a W3 Total Cache alternative that skyrocketed in use over the past few months.

We agree with Julio’s statement that when you need to explain to other people you haven’t abandoned your plugin, due to questions about that, the clock has already struck midnight.

XSS vulnerability

Let’s first explain what’s going on here:

XSS (short for Cross-Site Scripting) is a widespread vulnerability that affects many web applications. The danger behind XSS is that it allows an attacker to inject content into a website and modify how it is displayed, forcing a victim’s browser to execute the code provided by the attacker while loading the page.
Source: Sucuri

That’s definitely not what you want your website to do, right? In this case, we are talking about W3TC being vulnerable to a XSS flaw, high risk rated. This one should be fixed asap. With nobody maintaining the plugin, that is a huge issue for the millions of sites that use the plugin.

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

$ 699 - Buy now »Get a Yoast website review

Instead of waiting for a fix, we recommend disabling the plugin and using a W3 Total Cache alternative like the ones listed below.

W3 Total Cache alternatives

Luckily, there are more plugins you can use to optimize your site speed. And most work pretty well out-of-the-box. We have listed three speed optimization plugins for you as alternatives for W3 Total Cache.

  1. WP Rocket
    Our most-recommended speed optimization plugin. WP Rocket simply delivers speed improvement. It has a lot of options under the hood and works by simply clicking some checkboxes in their dashboard.
  2. WP Super Cache
    Made by Automattic, so it works flawlessly with WordPress. It’s a simple speed optimization plugin that helps a lot of WordPress sites. We have to add a note: it hasn’t been updated in five months as well. But all in all, it’s a nice, free WP Rocket or W3 Total Cache alternative.
  3. Comet Cache
    Formerly known as Zen Cache, formerly known as Quick Cache. If you change your name so often, you’re probably actively working on your plugin as well, right? Registration is needed.

Over to you

If you want your website to be safe RIGHT NOW and you are using W3 Total Cache, we recommend investing a few bucks in WP Rocket. It’ll be worth your while. If you don’t feel like investing that money in your website, feel free to switch to one of the other W3 Total Cache alternatives instead!

We’re using Sucuri’s Website Firewall at yoast.com, which eliminates the need for a separate speed plugin. But we have installed WP Rocket on some other sites with great results, so we’re happy to recommend them! Plus, we’re on the awesome and fast WP Engine hosting platform. Just in case you were wondering ;)

Browser caching is the way a browser stores files from your website on a local computer. Browser caching makes sure all files load without unnecessary server connections, which is much faster. In this article, we’ll tell you how to check if that browser cache works and how to optimize it in WordPress. We’ll tell you how we approach this in our website reviews.

What is browser cache?

Browser cache allows you to skip server connections and pull resources right from your local computer. This cache works like the temporary internet files that take up so much space on our computer. You want it there, as it helps to speed up things. But you don’t want it there forever, as things might change on a website. You can set this ‘refresh’ rate to whatever expiration time your want: the longer, the better.

List of expiration times

In most cases, you can set expiration times in seconds. Here’s a handy list of possible expiration times for your browser cache:

  • 3600 seconds (hour)
  • 86400 seconds (day)
  • 172800 seconds (two days)
  • 604800 seconds (week)
  • 2592000 seconds (month)
  • 31536000 seconds (year)

Google recommends a minimum cache time of one week and preferably up to one year for static assets or assets that change infrequently. For the majority of sites, that’s right. However, the right time of expiration largely depends on how often your content changes. If you have a news site, your homepage changes all the time. You can set the expiration time for your homepage’s content (HTML) at 3600 seconds (1 hour) without a problem. But if you load a CSS file in that homepage, that will probably only change during a redesign. The expiration time for that CSS file can easily be 31536000 seconds (a year). Please test and find what works best for your type of content.

Order your review NOW and we’ll throw in a one-year license premium plugin of your choice for free. We’ll configure that plugin for you as well!

Buy now for just $699! »
Offer valid until the 30th of June

Yoast_SEO_courses_banner

Testing your browser cache

In this section, we’ll show you a couple of site speed tools we use to check browser caching in our reviews. Which one you’d like to use to check browser caching for your website, depends on personal preferences as well.

YSlow

My personal favorite for checking browser caching is Yahoo’s YSlow. It’s available as a browser extension, works pretty fast and checks a lot more that just the expiration times of your browser cache. Here’s a screenshot:

Browser cache: yslow screenshot

ETags

Besides just a simple expire headers check, YSlow also allows you to check for entity tags, which are also called ‘ETags’. These ETags are used to “determine whether the component in the browser’s cache matches the one on the origin server.” This helps a browser determine if a new file is available. Note that ETags tend to slow down a website, so please dive into the subject and see if you really need these.

As you can see in that image (click to enlarge), the first file is a CSS file that has a one day expiration time. The screenshot was taken June, 20th and the file expires on the 21st of June. I don’t think that is necessary; in most cases, set expiration times for CSS files to a year.

Google PageSpeed Insights

Google provides its own check for browser caching in PageSpeed Insights. If the section ‘Should Fix’ contains the recommendation ‘Leverage browser caching’, you should definitely address this.

Browser caching: pagespeed insights screenshot

As you can see in the image above, like YSlow, Google PageSpeed Insights tells you which files need a (far future) expiration date. And that these are usually CSS files,  JavaScript files or (template) images.

If these tools aren’t clear enough, there are more tools we rely on to do extra checks, like Pingdom and GT Metrix.

WordPress plugins that help browser caching

Browser caching is something you can for instance set in your .htaccess file. For most users, that’s probably not something you do every day. However, if you are using WordPress, you’re in luck. There is a number of plugins that can help you with this. We have listed two for you below.

WP Rocket

At Yoast, we’re fans of the WP Rocket plugin. It’s simplicity, combined with a lot of options, make this our to-go-to speed optimization plugin. Browser caching is enabled right after activation of the plugin. Feed cache and mobile cache can be enabled in the plugin. Find out more here.

W3 Total Cache

Because of the labyrinth of options this plugin has, we stopped recommending W3 Total Cache for the average WordPress user. However, it does have more specific browser caching options than most other plugins. In WordPress (with this plugin installed), go to Performance > Set expire headers and enable these. After that, go to the separate sections for CSS/JS and HTML and choose your section-specific expire time.

WP Rocket is really our first recommendation. But if you know your way around speed optimization, feel free to check W3 Total Cache as well.