Category Archives for "WordPress Stuff"

How to minify WordPress HTML, CSS and javascript

HOW TO MINIFY 
WORDPRESS
HTML, CSS AND 

JAVASCRIPT
FILES

Minification is one of those things you'll often see recommended to speed up your WordPress site.

It’s also one of those things that can easily break your WordPress site, causing frustration and headaches for the average WordPress owner.

So what is minification and should you use it on your WordPress site?

What is minification in WordPress?

I didn't know this, but minification is actually a real word. It doesn't show up in many spell checkers but it's been around since the 19th century.

Minification in our context means making a file as small as possible without affecting how it works. It does this by removing all unnecessary content in the file.

Unnecessary content includes

  • Spaces
  • Code comments
  • Formatting
  • Line breaks
  • Carriage returns

Minification usually also includes concatenation, which simply means joining together. If you have fifteen CSS files on your website, these can be joined together into one. Instead of downloading those fifteen files from your web server, a browser only needs to download one. Obviously, this reduces the number of round trips to the server.

The first important thing to understand is that minification is not going to give you the biggest speed gains on your site. Other things will have a much bigger impact than minification on your site, such as

If you haven’t used any of these tactics to speed up your WordPress site, follow the links above and do them first. Then you can come back here and use minification as a fine-tuning tactic.

The best way to understand how minification works is with an example.

How minification works with examples in HTML and CSS

WordPress loads many files to present a single page of your website in a browser. Let’s say one of those files is a HTML file containing the following code (this is for demonstration purposes only so it doesn’t matter what the code does or why):

<html>
​<head>
​<style>
/* styles for front page paragraph */
.front-page { font-size: 120%; }
.front-page { width: 85%; }
</style>
</head>
<body>
<!-- front page paragraph: START -->
<div>...SOME CONTENT IN HERE...</div>
<!-- front page paragraph: END -->
<script>
afunctioncall(); // a call to some function
</script>
</body>
</html>

The code above contains 363 characters, including whitespace.

There are a few things to note about the code above:

  • Comments (in red) are useful for a developer to understand why something was done. But they won’t affect the code meaning and they have no impact on the web page content - they can be removed.
  • Carriage returns and line breaks are useful for the same reason. But again, they're meaningless to your browser - they can be removed.
  • Other whitespace like spaces between characters are again convenient for humans. And again meaningless to your browser - a lot of them can be removed.
  • A smart minification algorithm would notice that there are two lines defining a style for the same element, .front-page. These can be combined.

When we apply what we've noted above to our code, we get the following:

<pre><html><head><style>.front-page{font-size:120%;width:85%;}</style></head><body><div>...SOME CONTENT IN HERE...</div><script>afunctioncall();</script></body></html></pre>

Now the code contains 162 characters, a 56% reduction. It’s less than half the original size.

It’s clear to see that doing this on all the files that make up your website can reduce the size of files to be downloaded by a not-so-insignificant amount. Your web server can now send this minified file to a visitor’s browser instead of the original file.

Benefits of minification

  1. Your WordPress website loads faster for your visitors because only data essential to the web page is downloaded.
    • Your site uses less bandwidth per visitor because less data is transmitted over the network.

What can’t be minified:

Minification is only useful for text based files, i.e. all scripts and style sheets including HTML, PHP, CSS, JS etc.

Images, audio and video files are already compressed. Removing redundant information from them is unnecessary.

It’s also important to note that total minification is not always a good idea. It can break some things on your site, in particular things like image grid layouts and image sliders. For this reason, you should carefully test the level of minification you can safely use on your site.

How to minify files in WordPress

Minify using plugins

Most caching plugins include a feature to minify files. We use either WP Rocket and the relative new-comer Swift Performance on our clients' sites.

There are also plugins specifically for minification but I've honestly never found the need to try them.

Manual minification

Yes, it is possible to minify code manually. For large scale programming projects it can have an impact but this isn’t usually practical in normal web development.

It can be done by

  • Removing unused code
  • Shortening variable names
  • Shortening function names

Of course, this should be done in such a way that the code doesn’t become unreadable for anyone else reading it.

Conclusion

Reducing the size of your web page is an important part of WordPress optimisation. First you should use high-impact techniques like image optimisation and cachingOnce you've done those, minification is a useful way to get smaller speed gains with just a little effort on your part.

Minification is just one of the many items included on our speed checklist that we use on every website we look after. You can download that checklist right here.

​Sources

https://developers.google.com/speed/docs/insights/MinifyResources
https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/optimize-encoding-and-transfer#minification-preprocessing--context-specific-optimizations
https://wp-rocket.me/blog/minification-explained-in-plain-english/

Here’s the real reason you need website maintenance!

why you need WordPress maintenance

Photo by Victor Garcia on Unsplash

Do you want to know the real reason your website is not as safe or as fast as it could be? It’s the real reason you need website maintenance. And it has nothing to do with technology, knowledge or content.

It’s the same reason my garden isn’t the best garden in my neighbourhood, although there’s no reason it couldn’t be.

It’s the same reason my time to run 5 kilometres (3.1 miles) is unlikely to get better than 26 minutes any time soon.

And it’s the same reason I’m completely helpless if my motorbike breaks down on top of some Swiss mountain.

Website maintenance is not what you do

It’s because I’m not a gardener. I’m not a pro runner. I’m not a mechanic.

And the crucial thing is: I don’t want to be those things and that’s okay!

I don’t want to be a gardener. It’s fun and I enjoy learning how to grow my own veggies. But I only want to spend as much time as it takes to get to the point of harvesting those vegetables.

I enjoying reaping the benefits of exercising and feeling fit and healthy. Being fit is good enough for me. But I’m no elite runner and don’t have any desire to be the fastest runner on my block.

I enjoy driving my motorbike through the Alps or the Jura on a sunny day. I enjoy swinging into the corners and feeling the G force when I pull out of that corner with a smile on my face. I can ride the bike pretty well and I’ve never had an accident. But if it breaks down, God help me! I used to be able to dismantle the engine on my 1995 Shadow and put it back together. But it’s all electronics nowadays! I know nothing about modern bike electronics and don’t have any real drive to learn about it.

And that’s all okay! I don’t have to be ANY of those things.

The professionals can help me

Because if I need gardening advice I’ll go to the garden centre. I’ll ask one of their well-trained staff what kind of soil is best for this vegetable or how much water this shrub needs.

If I need advice on fitness training I’ll consult one of the health bloggers I respect. He or she obsesses enough with this stuff to spend most of their time on it. They don’t get caught up in the latest fads; fundamentals are the things that matter to them and that’s why I trust them.

If my bike has problems I’ll call the guy who sold it to me. I trust him. He’s very professional and he’s completely obsessed with motorbikes. That’s why he owns and runs a very successful bike shop.

But if my website speed drops or if I suspect there’s a security gap somewhere?

I’m a wordpress maintenance guy

Then I’ll happily spend hours poking around the server myself. I’ll analyse every bit of data a page loads to see what’s going on. And I’ll happily spend another few hours doing whatever it takes to fix it. I’ll read as much as I have to; I’ll experiment as much as I have to and I’ll spend as much money as I have to to get to a point I’m happy with.

But I’m a trained computer scientist. I’ve worked in that domain for 25 years because I love it. I really want to learn all I can about it. I really want to keep up with the crazy pace of change. I really want to see how far I can push a website to shave another millisecond off its’ loading time!

I do that because I obsess about it. It’s what I enjoy, it’s what I know very well and it’s what I’ve chosen to do every single day. I lie awake at night thinking about how to get a client site loading just that little bit faster (just ask my family!)

Because that’s what I do.

For the other stuff – I hand that over to people who know and care about it well. Finances, graphic design and motorcycle mechanics are some of the things I can’t or just don’t want to deal with. I pay other people to deal with them.

Conclusion

So, what are you obsessed about and spending your time on? Building a business that will genuinely help people and leave you feeling satisfied at the end of every day?

Or are you obsessed about learning the technology so you know exactly how to make your website that little bit faster, that little bit more secure?
If you aren’t obsessed about that, it’ll never be as fast and as safe as it can be.

And that’s okay. You should be obsessed with building and growing your great business. Leave the other stuff to other people.

What do you think? Do you delegate any of your tasks to others so that you can focus on what you do best? Let me know in the comments.

You're not a pro, but you want a super-fast WordPress website anyway?

No problem! This checklist will show how I get load times of 3 seconds or less. Even on cheap shared hosting!

How to edit the page title and page description in Google search results

edit the page title and page description in google search results

What’s the one thing you want me to do when your site shows up in Google’s search results? You want me click on that link and end up on your website, right?

Well, if your page appears in my search results, if it looks relevant and as if it’ll answer my question, I definitely will click on that link and go through to your site.

Your title and your description as they appear in my search results are probably what are going to make me click or not.

This means that your title and description is important for getting traffic to your site. So, you want the title and description of your page to look enticing to me in those results.

Just how do you edit the page title and page description in Google search results to show what you want? With WordPress it’s very easy to take advantage of these important text snippets.

What is a page meta title and meta description?

Your web page title and page description are actually meta tags; little bits of HTML code in the top part (header) of a web page.

These meta tags are visible only in your web page’s code, not in the page itself. They describe what a page is about.

Search results showing meta title and meta description

Search engines use this meta title and description to learn what that page is about. It’s these meta tags that are usually displayed in search results.

People searching use this meta title and description to decide whether or not to click through to your website.

How Google uses meta title and meta description

(I’ll talk mainly about Google here since they’ve a 90%+ market search share in the English speaking world.)

Google and other major search engines don’t actually use the page title or page description to rank your site much.

John Mueller of Google explains it in this video (starts playing at the relevant time) https://www.youtube.com/watch?v=gfXGfvKJnPY#t=3450

https://www.youtube.com/watch?v=gfXGfvKJnPY#t=3450
John Mueller: page content is the most important ranking factor

If your website appears in a search results page, the title tag and description may appear in the first line.

I say MAY here because what Google displays is query dependant. Google will use different descriptions for different search queries if it thinks it will help searchers find what they want.

Google actually determines what is most relevant for a particular search.
So what you see isn’t what every searcher sees for every query. As usual the algorithm behind this decision is a big secret.

What gets displayed is also device dependent. Google may also display a different description on desktop and mobile. (Google displays as many characters as it can fit into a block element that’s about 600 pixels wide.)

But, while you don’t absolutely need to use these meta tags, they are very worthwhile to your users.

When they click, Make sure that page loads fast!

The WPStrands WordPress Speed Checklist

FREE DOWNLOAD


BE AMONG THE FASTEST WEBSITES IN YOUR INDUSTRY!

Download our very own speed checklist and join our mailing list

Google sometimes ignores your titles and descriptions

While you can edit the page title and page description, you can’t control how everything about your website is displayed in search results.

You can’t know exactly how relevant your title and meta description are to a specific search query.

“We may try to generate an improved title”

Google, 2017

In 2018 it is not possible to define exactly how Google will display your site meta tags in search results.

But this is not a reason to ignore those meta tags.

Guidelines

There are things you can do to improve the odds that Google will use your page title and meta description. You can edit the page title and description using the following guidelines.

These are guidelines only and can of course change as Google evolves.

Do

  • Title tags should be about 60-70 characters in length
  • You want meta descriptions long enough to be descriptive. The general recommendation is between 50–300 characters. In my experience 100 is better. Google bases this on pixels rather than characters. As such it can be tough to determine exactly how long these elements should be.
  • Use short but descriptive titles. They should accurately describe the page’s content. 
  •  

“Choose a title that reads naturally and effectively communicates the topic of the page’s content.”

Google

  • Create unique titles for each page
  • Use keywords in your copy, but naturally.

“Make sure every page on your site has a title specified in the <title> tag.”

Google

  • Brand your titles. The title of your page should include some useful extra information about that page. E.g. “HealthierLivingBlog.com, how I lost weight and got fit” tells me much more than “Home”.
  • Use a call to action to entice users to click. E.g. “I lost 10 pounds by removing this food from my diet. Learn how right here!” (Actually that example is probably a bit spammy – don’t make it click-baity like I just did.)

Don’t

  • Don’t be misleading or exaggerated compared to the actual content of the page. This results in a poor user experience and Google may also lower your rating because of it.
  • Don’t stuff these tags with keywords you want to rank for. Google will see that as spammy. What you put in your title and meta description should actually be on your page.
  • Don’t be boring. This is the sales copy for your page.
  • Don’t forget rich snippets. They display extra information about a page and look like this:

Rich snippets increase the likelihood of a click to your site

A good plugin for these in WordPress is All In One Schema Rich Snippets.

  • Don’t use the same meta descriptions on different pages. Have a unique one for each page. E.g. your eCommerce store should not have the title “Buy cheap stuff” on every page. That’s no help to potential visitors and Google will notice.
  • Don’t get hung up on the number of characters. Google determines what to display based on relevance to the search query, display size and probably many other factors. Pay more attention to readability and accuracy.
  • Avoid vague titles like “Home” for your home page.
  • Don’t use long titles. They may get truncated in the search results.
  • Don’t be irrelevant. This example doesn’t tell me if the page will answer my question or not:

What? How can I possible know what this page is really about?

Where to edit the page title and description

How hard is it to edit the page title and page description of individual website pages? I remember doing it manually with a text editor:

<title>My Website Page</title>
<meta name=”Description” content=”This is a description of this page for users and search engines.”>

Luckily, it’s much easier nowadays.

There are lots of good SEO plugins for WordPress that can help you easily edit the page title and page description tag.

I’m using my plugin of choice, the Yoast SEO plugin. Other popular SEO plugins will have similar features. Make sure the plugin is installed on your WordPress site and that it’s active.

How to edit the page title and description

Edit your WordPress post.

Scroll down below the post. You’ll notice a Yoast SEO section. Expand it if necessary. Here’s what that section looks like for this post as I’m writing this.

Note that Yoast says “This is a rendering of what this post might look like in Googles’s search results.”

The “snippet” is the site description.

If I look at my site’s source code (Right-click and View source or Ctrl+u) and search for “meta”, I can see the title and description are as follows (I haven’t yet done my usual SEO steps for this post):

<title>How to edit the page title and page description in Google search results | WPStrands</title>
<meta name="description" content="Expert WordPress Maintenance for Smart Business Owners"/>

The title comes directly from your post/page title.

The description is what Yoast call the “snippet” and can be changed by clicking on the “Edit snippet” button.Once you change them here, you aren’t finished. I recommend telling Google to index/reindex that page right away. See the next section below for details on how to do that.

Problems/ troubleshooting

The biggest problem you’ll have with your meta title and meta description is when you make changes and they don’t display as you expect.

Google hasn’t indexed the changes to your page title and description

The usual problem here is that Google hasn’t crawled your website to re-index your pages. i.e. Google has not gone through each page of your site, reread everything on the page and updated it’s database.

On its own, it can take weeks for Google to get round to doing this. But you can tell Google to recrawl your site right away.

  • You can index individual posts or pages by entering the URL in the search bar at the top of any Search Console page.

Enter URL to reindex

  • Search Console will show you whether it has indexed that page or not. You can request a crawl to index or re-index by clicking the button REQUEST INDEXING

Request an individual URL reindex

If you’ve made lots of changes, here’s how to update your sitemap and ask Google to re-crawl your page. 

Resubmit a site sitemap

  • Enter your website’s sitemap URL: 
    https://yoursite.com/sitemap_index.xml

Submit sitemap for indexing

Yoast creates your sitemap at https://yoursite.com/sitemap_index.xml
If you don’t see the sitemap there then configure Yoast by going to your WordPress Dashboard>SEO>General>Features and in the SEO Sitemap section, select On.

Turn XML sitemaps on in Yoast

Yoast SEO can automatically submit your page for re-indexing, although I’m not convinced with the effectiveness of this. I have much better results when I ask Google directly to re-index a page. Changes typically show up in a matter of minutes.

Google changed your page description

Another possibility is that Google made up a description for your page. If Google thinks the meta description you created

  • isn’t a great match for the page
  • is a duplicate
  • isn’t the best for this particular query

they’ll come up with something “more relevant”. And when that happens, you have absolutely no control over what Google decides.

Conclusion

The takeaway is that a meta title and meta description is not essential for your WordPress pages.

But they are very important for showing relevance to searchers. Google will notice click-throughs to your site and rank you higher as a result, so they are indirectly important for SEO.

If you aren’t writing a title and description for your WordPress pages yet, start today. Create these tags on your most visited page today and watch your traffic increase.

Sources

http://allwebco-templates.com/support/S_page_titles.htm
https://www.hobo-web.co.uk/title-tags/
https://www.firstscribe.com/google-change-title-description-search-results/
https://www.seroundtable.com/google-title-tag-critical-21499.html
https://yoast.com/meta-descriptions/
https://support.google.com/webmasters/answer/35624?hl=en

Make sure that page loads fast when they click!

The WPStrands WordPress Speed Checklist

FREE DOWNLOAD


BE AMONG THE FASTEST WEBSITES IN YOUR INDUSTRY!

Download our very own speed checklist and join our mailing list

Avoid Bad Requests

Avoid Bad Requests
Photo by Ben Hershey on Unsplash

You’ve seen the “404 Page not found” error message. Annoying, isn’t it?

When a web page testing tool (like Pingdom or GTMetrix ) suggests you ”Avoid Bad Requests” it means one thing: a 404 error or similar.

A 404 error means a broken link. Broken links can ruin your users’ experience on your site. It causes loss of trust and affects your Google ranking.

Here’s how broken links happen and how you can fix them.

What’s A Bad Request?

On the Yoast blog, they say

“too many errors could send a signal of low quality (bad maintenance) to Google”.

That’s not what you want!

A broken link happens when an image or a file can’t be found where the link said it was. This could be a link to a deleted image or file or to one that no longer exists, for whatever reason. Maybe you changed the name or you moved it.

When this happens your web server usually gives a 404 error, meaning the file can’t be found.

Sometimes this is obvious, e.g. when a requested page doesn’t exist. In this case, you’ll get the familiar “404 page not found” error.

But it’s not always so obvious. It can also happen quietly in the background; these are harder to track down.

Where To See Your Bad Requests

Most page speed testing tool will point out these links.

Pingdom

avoid bad requests pingdom
Pingdom finds broken links a.k.a. Bad Requests


GTMetrix

GTmetrix also lists any broken lists it finds

(On the YSlow speed test, part of GTMetrix, it’s called Avoid HTTP 404 (Not Found) error)

Google Search Console

You can also see these errors in Google Search Console, if you use it (and you should) .

How To Fix Bad Requests

Manually

It’s easy enough to fix these bad requests manually. As you can see in the images above, Pingdom and other tools will give the exact URL of the problem.

You’ll need to track down which page is calling that URL and change it or remove it. E.g. you can replace an image with one that works or just remove it. A missing file on another site or in a plugin can be a bigger problem and you might need some help with getting those errors sorted out.

Actually tracking the source of the bad link is easier said than done and can be a problem if you aren’t extremely familiar with your WordPress website. That’s where a plugin comes in handy.

Use A Plugin

A plugin is useful when you need to clean up these links. I use the Broken Link Checker plugin. It’s particularly useful when cleaning up a new customer site but I don’t typically leave it installed once I’ve cleaned up the links.

Once installed, the plugin scans your pages and compiles a list of all broken links found on your WordPress site. These can be found from your WordPress Admin dashboard under Tools > Broken Links.

The best part about this is that the plugin tells you where the file is linked to, in the Source column. So you can go straight to the problem page to fix it, no guesswork involved.

oken Links Checker shows you the source of the bad request

Conclusion

Lots of broken links around your WordPress website is an indicator of poor housekeeping and can mean a poor experience for your visitors; think how often you’ve backed up from a website that gives you a 404 error or shows blanks where images should be.

But if you fix them

  • your visitors will be happier.
  • Google will be happier.
  • Your page test scores will be better.
  • And as a bonus, your site ranking will be better.

How do you typically deal with broken links on your site?

How to fix minimise redirects

Photo by Paweł Czerwiński on Unsplash

As a conscientious site owner you no doubt work regularly on speeding up your WordPress site. At least, you should!

If you do, you'll be familiar with Pingdom's speed testing tool.

One of the common and trickier insights from that test is the Minimise redirects problem.

minimise redirects

I’ll explain what causes this problem and the steps that will fix it forever ...

What Causes A Minimise Redirects Error?

A redirect happens when a page on your site causes another page to load instead. 

There are some common reasons for redirects on your site, both accidental and deliberate.

SSL certificate

Redirecting http:// to https:// 

Non-WWW (or vice-versa)

Redirecting www.yoursite.com to yoursite.com (without the www subdomain) 

Updated Post

Maybe the URL of the page has changed e.g. if you changed a post title or changed how your permalinks are builtMaybe you have an old post that’s outdated and you rewrite a newer version of that post.

You may want to redirect the old post to the new one. This way you keep the SEO benefits of the old page and give visitors the newer, more relevant information on the new page.

For these redirects, many active sites use a redirect plugin like Redirection. https://wordpress.org/plugins/redirection/With these plugins you intentionally direct a browser from one page on the site to another. 

WordPress' "Smart" redirect

WordPress itself also has some redirection built in. e.g. On my site I have a page at https://wpstrands.com/about/faq. If someone types this URL incorrectly as https:/wpstrands/faq, WordPress is smart enough to cause a redirect to the correct URL.

Site Changes

Another way a redirect can happen is when you make some structural changes to your site. Maybe you've added an SSL certificate or rename the site. Your database can accidentally contain some old URLs, so redirects will be needed for the correct page to load.

Poorly formed links

Another example of an unintentional redirect is if you create links on your page or post (or a custom menu item) to your site using an incorrect URL. E.g. to http:// instead of to https://.

Each of these links need to be redirected to the correct URL version.

Are Redirects good?

Any of these redirects could have been set up by you, your developer or by a plugin you have installed on your site.

These redirects can be a good thing, of course, but it’s important to know that they do have an effect on your page load time.

An example

Lets take a look at the result of a Pingdom test on this site, WPStrands. My site uses SSL and I’ve set it up to be at the address without the leading www, i.e. at https://wpstrands.com

The site can be reached by any of these URLS:

  • https://wpstrands.com
  • https://wpstrands.com
  • https://wpstrands.com
  • https://wpstrands.com

If I run a pingdom test for https://wpstrands.com, this is the result:

pingdom test good url

Not too bad! Further down the test results page we can see the files that are loaded:

pingdom test good url files

Note that it loads the site in one go, no redirects.

Now look what happens if I run the test on my site using the URL https://wpstrands.com

pingdom test bad url
That's a bit slower, and there are even a few extra requests!  What happened?

The answer is revealed further down in the file requests section ...

pingdom test bad url files

This time, you can clearly see that the URL given is redirected twice. First, from the http version to the https version of the site. Secondly, that URL then redirects once more to the non-www version of my site.

These redirects take time and this means a longer load time for the page. It doesn’t look much but in my case above, this is an increase in page loading time of 17%!

Now that won’t have much impact on this fast site.

But on a larger, slower site it can make a huge difference in how your visitors experience your load time. And, of course, in how Google rates your site.

Your loading time can be as much as 60% longer with these additional redirects!

Check your site-level redirects

A good tool to help you see your site redirects is this one. Just enter your URL and hit go. The Goal is to have no more than one redirect, no matter what the inputted URL is.

How to fix it

On the webserver

On most WordPress hosting, Apache is the web server running your site. Adding redirects to your .htaccess file will solve the problem of redirects like http to https and www to non-www. 

E.g. to redirect www to non-www, you need this rule.

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

Consult your host to find out exactly what rule you need to add and where.

(On more advanced hosting, you might be using NGINX as a web server, in which case you won’t have a .htaccess file. Again, you’ll need to contact your host to make the redirects.)

In the database

Just to make sure, you should also check your database for errors.

You can do this directly in your database, but that’s prone to error.

You can run a script on your database but that’s very technical and also prone to error.

The easiest way to solve this is with a plugin like Better search replace. You can run a search and do a dry run (making no changes) to see if there are any incorrect URLs still lurking in the databse.

Creating Links

Finally, get into good habits when creating links on your site. Use the proper prefix HTTP or HTTPS, use the proper subdomain www if your site uses it and include the entire path to any pages in the link.

Conclusion

Now your site should be faster and you should have one less Pingdom problem. 

Redirects are sometimes needed but they do slow down your site.  Use them correctly to minimise their speed impact and you won’t have any problems with Pingdom or other speed testing scores.

Did you have any problems with the above? Let me know in the discussion ...

Introduction to the Pingdom waterfall chart

Pingdom waterfall chart

An understanding of the Pingdom waterfall chart can help speed up your WordPress website. Here's how to use it for yours.

What if you had a way to spot exactly where your WordPress website is loading slowly at a glance.

What if you could see exactly what you could do to speed up your site in just a few minutes?

Reading a Pingdom waterfall chart doesn't sound like the best way to spend your precious timeBut what if you took a little time to understand what that technical chart means for your website?

It would mean a much deeper understanding of what's going on with your site. And most importantly, being able to improve it so that Google and your visitors are happier.

What’s a Pingdom waterfall chart?

A waterfall chart in the context of a website speed test is simply a visual representation of your web page as it is loading from start to finish. It shows what loads, when it loads and how long it takes.

Contrary to popular belief, you need no expertise to understand the Pingdom waterfall chart. And you need no expertise to see where you can use it to speed up your WordPress website.

The best part is that a waterfall chart can show you exactly what is slowing down your site.

Here’s an example waterfall chart for an average WordPress website.

waterfall for average wordpress site

At the top there is a time scale in seconds, beginning at 0 (the start of page load) and continuing to the right when the entire page has finished loading.

There is a row in the chart for every element of the web page that has to be loaded: images, CSS files, script files, fonts from Google etc. A coloured block is shown for each of these resources at the time it starts to load. Obviously longer blocks mean longer loading time.

The ideal site would have fewer rows and smaller blocks for each row, something like this:

a good waterfall chart

Some of these blocks could be better but note that the page has only 12 requests, is only 364 kB in size and loads in less than a second!

I’ll explain what each part of the chart means and how you can use it to improve your WordPress loading time.

Where to see a waterfall chart

Most website speed testing tools will show a waterfall representation of your website page loading time.

I'll use Pingdom's chart as an example because it's free, fast and one of the most widely used speed testing tools..

What The Waterfall Chart Colours Mean

Here’s a description of what each colour means from Pingdom themselves.

  • DNS Web browser is looking up DNS information

  • SSL Web browser is performing a SSL handshake

  • Connect Web browser is connecting to the server

  • Send Web browser is sending data to the server

  • Wait Web browser is waiting for data from the server

  • Receive Web browser is receiving data from the server

How A Waterfall Chart Can Help You Increase Site Speed

Each part of the Pingdom waterfall chart can point you to different areas for optimising your overall WordPress website speed.

Pink: Web browser is looking up DNS information

DNS (Domain Name Service) is the internet equivalent of a telephone book for websites. This portion of the waterfall chart shows how long it takes to look up your internet name and find your IP address.

This shows how long it takes DNS servers to respond the first time a visitor visits your site. 

A lot of people misinterpret this part: Pingdom does a fresh lookup the first time you run a test. If you run the test again, this lookup is cached (saved) so that it doesn’t need to be run every time. Thus, a second and third test on the same site may show a faster time for this DNS lookup. (In the example chart above, the pink clock in a second test would be negligible.)

DNS lookups also include looking up any sites that your site loads scripts from. So if you use Google Analytics on your site, that site must also be looked up before anything can be loaded on your page.

Purple: Web browser is performing a SSL handshake

If your site URL begins with HTTPS, you're using SSL (secure socket layer).

SSL encrypts traffic to and from your website and you should be using it. This negotiation takes a bit of time but these days that time is usually not substantial.

Blue: Web browser is connecting to the server

This is the time it takes to make a connection to your web server.

The main takeaway from the Connect portion of the waterfall chart is that on a slow web server this blue bar will be significant, meaning your web server is probably slow. This is one good reason to use good hosting like Siteground.

Yellow: Wait Web browser is waiting for data from the server

This is the time it takes for data to get from your server to your browser. Generally a wait time of 100ms is good; anything over 400ms is slow.

This could mean that the particular resource is big and takes some time to download. It could also mean that the transfer speed of your web server is slow. If it's the latter, it’s again time to think about upgrading to a better host.

A CDN (Content Delivery Network) will also be of obvious help here since it will deliver the data from a server nearest your visitor. Using a CDN like the one we offer has reduced this wait time for our customers by 70%!

In our example above, we can clearly see that there's a long wait time from the very beginning. A look at the chart further down gives us a huge indicator of what can be improved for this site:

waterfall chart example 2

All those long yellow blocks? You can see from the file names that they are mainly images being downloaded.

Orange/Green: Web browser is sendingreceiving data to/from the server

This is where you can make the easiest changes to your website speed. A large image file will show a longer green bar than a small file. So, optimising your images is a great place to start. This is particularly important as images now make up 70% of the average web page.

Again, using a CDN will help a lot here since the download will be from the server nearest your visitor.

Other important measurements

At the bottom of the pingdom waterfall chart are some important metrics:

important waterfall metrics

Total number of requests

This is the number of times the browser asks the server for some data. Clearly, less requests will be faster.

You can lower the number of requests by using a good caching plugin like WP Rocket to download a bunch of files at once. The plugin can gather all your HTML, CSS or Javascript files into a single file (concatenation).

Total page size

Google recommends an overall web page size of less than 500Mb. The average is 1.8Mb. If yours is bigger, find ways to reduce it. For most sites, dealing with image optimisation is a great place to start.

Total load time

Google's recommended time to fully load your page is under 3 seconds. The average? About 8-9 seconds!

Clearly you can endear Google to your site by getting below this average and closer to the ideal.

Conclusion

Don’t be scared of Pingdom’s waterfall chart: it’s a simple tool anyone can use to make a great start at increasing your WordPress speed.

As always with speed testing tools, it's important not to get obsessed with the overall score.  More important is that you can make improvements over time i.e. the general trend is toward a faster WordPress website.

(Beyond the basics mentioned above, we use the Pingdom waterfall chart regularly to dive deep. With it we can investigate bottlenecks caused by individual resources. Finding a new way to load even a single file can have great benefits to a site's appearance in search results.)

Sources

https://kinsta.com/blog/pingdom-speed-test/
https://tools.pingdom.com/
https://www.keycdn.com/blog/waterfall-analysis/#1-DNS-Lookup-DNS
https://www.machmetrics.com/speed-blog/average-page-load-times-websites-2018/

Setup Cloudflare Free CDN With WordPress

If you need more speed for your site and you just don’t have the budget for a premium CDN service, why not try the Cloudflare free CDN with WordPres? It takes just minutes to set up and you’ll get a speed boost without doing anything else.

Following on from my last article on the benefits of using a CDN with your WordPress website, today we’ll look at how to set up the free Cloudflare CDN.

First, Run A Speed Test

Before making any attempt at speeding up your website, it’s useful to have something to compare it to. Since every site is unique there is no guarantee that what will work for my site will work in the same way for yours.

Running a speed test will give you an idea of what speed changes were made, if any, after you setup the Cloudflare free CDN with WordPress.

Simply go to tools.pingdom.com and enter your site’s URL to run their test.  It’s wise to do this several times as speed is a variable metric.

For more infgormation on measuring your WordPress site speed see 
How to measure the speed of your wordpress website

Could Your Hosting Be Better?

Bear in mind that if your website is running on cheap shared hosting, your speed gains even from a CDN might be minimal.  We always recommend Siteground (#1 in this poll and this poll) for great WordPress hosting and they are a Cloudflare partner which means free CloudFlare is included. They also include a free SSL, as any good host should these days.

Create A Cloudflare Account

First you need an account with Cloudflare.

Go to https://www.cloudflare.com/ and click on Sign Up

Fill in the form and click Create Account.

(I know hardly any one does it but you should really read the Terms of use and make sure you are okay with Cloudflare doing whatever they want with any data you share with them. Just saying … )

Set Up Your Website In Cloudflare

Once you’ve created your account you will be asked to enter your website URL.

Cloudflare will automatically scan your site’s DNS records.  Don’t worry about this technical-sounding step. DNS contains the names and addresses used to reach your website. Cloudflare needs  to know these to divert your traffic to their servers so that they can secure and speed it up.

Select your account – choose FREE and confirm

Now you’ll be presented with the DNS scan results. You need to double-check these results are correct.

The easiest way to do this is to log in to your hosting account and view your DNS settings there – they should match what Cloudflare found.

Finally, Cloudflare will give you the names of the new name servers you need to use to divert traffic through their servers.

Change Your Website’s Name Servers

The final step is to direct all traffic going to your website through Cloudflare.  You do this by changing your website’s Name Servers in your hosting account. I’ll show you where to change it in GoDaddy, Namescheap and any account that uses CPanel.

Change Name Servers In CPanel

For accounts using CPanel, click on Domain Manager

Select the domain you want to change and click Custom Name Servers, then enter the new name servers given by Cloudflare.

Change Name Servers In Namecheap

List your domains, click Manage, select Custom name servers and enter the new name server there.

Change Name Servers In GoDaddy

In GoDaddy accounts without CPanel you go to Domains, click on the domain you are adding the CDN to, then click Name Servers

Wait For DNS Propagation

The changes you’ve just made need to be copied to all name servers all over the internet. This can take up to 24 hours but is usually done in about 6 hours. You can check to see how far the changes are going at Whatsmydns https://www.whatsmydns.net/

Check Your Speed Again

Now you’re done you need to see if anything has actually changed for the better for your WordPRess website.  Did setting up the CLoudflare FRee CDN on your WordPRess site actially do anything?

Run the same speed test you ran above (again, several times to get an average) and hopefully it’s noticeably faster.

Conclusion

So there’s not much to setting up the free Cloudflare CDN on your WordPRess website. The above steps can all be done in a few minutes.

Of course, a CDN won’t fix all your WordPress speed problems. You need to cover all the speed optimisation basics as well, starting with good hosting.  Check out our other articles on website speed on the blog.

And if you really want to go deeper, get the very optimisation checklist we use here at WPStrands to get your site as fast as possible!

A first look at the WordPress Gutenberg Editor

wordpress gutenberg editor first look

What’s it like to use the WordPress Gutenberg editor for the first time? Follow along as I rewrite a blog post to see how it holds up against my favourite drag-and-drop editor.

Changes are often difficult, but they will always come.

Like them or loathe them, the changes that come with the new WordPress Gutenberg editor will change the way you use WordPress forever!

Since I wrote this I’ve used the Gutenberg editor a lot more and realise that it’s probably NOT a great idea to use it on production sites just yet … I’ve just encountered too many errors and problems to recommend it.

What’s Gutenberg?

Gutenberg is the code name for the next phases of development for WordPress.

Why the name Gutenberg? Co-founder of WordPress, Matt Mullenweg, explains on his blog:

When Johannes Gutenberg’s press came out, people mostly used it to print the same religious text monks had been copying. It wasn’t until ten or fifteen years later that people started innovating and trying their hands at new kinds of writing, and the wheels of change started to spin faster. Now it’s WordPress’ turn to do the same.

We’re democratizing publishing — and democratizing work — for everyone, regardless of language, ability, or economic wherewithal.

That’s a lofty goal.

Gutenberg isn’t only this new editor – there’s a whole new plan for WordPress. The changes we’re seeing now are just the first phase of Gutenberg. Coming later are page templates and even complete site customisation.

Mullenweg announced at WordCamp Europe in Belgrade this summer that he wanted 100,000 active installs of Gutenberg before it will be officially merged into WordPress core. This makes perfect sense, as the development team can use the feedback from those 100,000 installs to work out a lot of the bugs and to process new ideas and new feature requests. Currently, Gutenberg has 200,000 installs!

The Gutenberg editor will be included as the default editor in the next release of WordPress, due later this year.

For now, the advice is not to use it on live sites. That’s advice I’m happily ignoring as this post is created with Gutenberg!

Getting Started with the WordPress Gutenberg Editor

This is the old editor you’re used to, called TinyMCE:

the old wordpress tinymce editor

And here’s the new Gutenberg editor:

It does look comparatively sparse, doesn’t it? But don’t let that simple interface fool you; there’s real power and flexibility built in there that you could never have with the current default WordPress editor.

Activate it

You can get Gutenberg in one of two ways:

Once Gutenberg is installed and activated and you’ve logged in to your dashboard, you’ll be given this very obvious call to try out the Gutenberg editor:

wordpress gutenberg editor call to action

Using Gutenberg to Write a Blog Post

There are already enough yawn-inducing posts on the web talking through the theory and features of Gutenberg.

For this walk-through I’m going to take an actual blog post of mine, created with my drag and drop builder from Thrive Themes, and see how easy it is to reproduce that post using the Gutenberg editor.

Here’s the original post: https://wpstrands.com/google-chrome-will-mark-your-wordpress-website-as-insecure/

The Gutenberg menu in your dash will take you to the demo of Gutenberg – I encourage you to try it out at least a few times so you can get used to all the changes that are scaring you right now.

wordpress gutenberg editor menu

From this menu, you can also send feedback to the development team. This will be very appreciated and help to make Gutenberg better for everyone once it goes live.

So, having activated Gutenberg, I clicked on Add New post and I got the new editor.

The new wordpress gutenberg editor

If you’ve used writing apps before it might not look so strange. But if you’ve only ever used the default WordPress editor then this will all be new and you’ll probably feel a bit lost.

Don’t despair, though: Gutenberg will very helpfully display some popups to guide you through your first use.

Flexible Titles

The first thing I want to create for this post is a title with a background image and a small acknowledgement to the owner of the image.

Can this be done easily with the wordpress gutenberg editor?

This was pretty easy with my page builder, Thrive, although it took some tweaking to align things the way I wanted, especially for different device sizes.

How easy is it to do the same using Gutenberg? Let’s see.

I entered the page title and right away I got stuck trying to centre it. I’d probably need CSS to get the title the way I want to.

But, then I clicked on add a block to see if there was something that might help.

I noticed a Cover Image block and that did exactly what I wanted. With it I could even change image opacity and other settings. I hadn’t actually expected that part to work so easily. I did need to edit the HTML of the block to make the text a H1 but that worked fine.

Cutting and Pasting is Amazing

For the rest of the post, pasting paragraphs worked amazingly well. Formatting – even from non-WordPress sources – is preserved with Gutenberg. Images are included and even bullets are preserved. Matt Mullenweg mentioned at Wordcamp Europe that he considered this a hugely important feature. It’s great to see he means what he says.

If, like me, you write your content first in another place before bringing it into WordPress, this is a huge time-saver!  It’s very pleasant to see the smoothness of cutting, pasting and deleting . Wherever I clicked my mouse was where the next block would be inserted.

Columns (still in beta) are a little finicky, to say the least, but it didn’t take long to get my image where I wanted it. If you’re used to drag and drop page builders then you’ll certainly miss that functionality for layouts. Still, usability is probably a lot better than you’d expect at first.

The preview looked great and to be honest, for this uncomplicated post layout, the whole post was easier to create in Gutenberg than in Thrive themes!

Shortcodes are no Problem

One thing I really wanted to know: how easy would it be to add elements like opt-in forms to the post? Say I wanted to add one of my Thrive Leads opt-in forms – how easy is that with Gutenberg?

Well, no problem as it turns out, by using the shortcode block as follows:

wordpress gutenberg editor shortcode

Some Bonuses

There were some pleasant surprise when using Gutenberg for the first time.

  • You can add any block as a custom block to be reused in the future – great for streamlining your post creation if you have a regular format you follow, as I do.
  • It’s smart enough to present the blocks I used most often at the top of the list – a small thing but a very nice touch.
  • Another nice touch – for anything I couldn’t control visually I can add a CSS class to control via CSS.
  • I can also view individual blocks in their HTML equivalent for finer control.
  • Since it’s built by the WordPress development team and will be part of WordPress from the next release onwards, it’s guaranteed to work well with other parts of WordPress.  This is certainly not true of all other page builders out there.

Here’s the new resulting post created with Gutenberg:
https://wpstrands.com/google-is-about-to-mark-your-website-as-insecure/?preview_id=6212&preview_nonce=ddb70b3ac5&preview=true

(It’s password-protected so that it doesn’t affect the SEO score of the original. Password: notsosecure)

Some Quirks

There are, of course, some quirks (a.k.a. bugs) in this version of Gutenberg.

So, do as I say, not as I do – don’t use the editor on a live site just yet. I’m using it live on my new posts, including this one 😉 so feel free to let me know of any bugs that I can pass on to the development team …

  • The longer I use it, the more memory problems I have. Inserting blocks and updating take longer and longer and on a few occasions Chrome has reported “not enough memory”. So a few memory management things to be worked out there. Thankfully these don’t seem to affect the load on my web server.
  • Although I clicked the Try Gutenberg button, every time I return to the dashboard isn’t with that same option. As if WordPress doesn’t know I’ve already tried it. It’s another little hint that this isn’t yet ready for production sites.
  • When I wanted to paste HTTP links as text, Gutenberg tried to embed them rather than pasting them directly. I got around this with my old trick of pasting the content into notepad to remove all formatting. Copying from there and pasting back into Gutenberg gave me no problems.
  • Editing links didn’t work well for me – I wasn’t able to specify Nofollows or open in a new tab every time; behaviour seems a little erratic at the moment.
  • I use the Grammarly plugin when writing and, while it does catch typos and errors, it doesn’t seem to be able to change them within Gutenberg blocks.

Gutenberg should work in any theme. I didn’t notice any problems in the Thrive theme that I use on my site. I can’t guarantee this is the case for all themes, especially for page builders such as Divi, Elementor or Beaver Builder and the like.

Conclusion

So that’s a quick walk-through of my first use of Gutenberg. It was pleasant, quick and easy. I appreciated the responsiveness – it’s fast! Fast to save, preview etc.

The result? I’ll be using the Gutenberg editor for all my posts in the future. Including this one. And the great news is it’s only going to get better.

Sources

My own trial and error
https://kinsta.com/blog/gutenberg-wordpress-editor/
https://yoast.com/what-is-gutenberg/
https://ma.tt/2017/08/we-called-it-gutenberg-for-a-reason/

Wordfence is NOT the best WordPress security plugin for this one simple reason

Wordfence is NOT the best WordPress security plugin

Photo by Roi Dimor on Unsplash

Wordfence is NOT the best WordPress security plugin for this one simple reason.

Amazement! That's the reaction of most people when I tell them I know lots of people who don't lock the front door of their home. It seemed strange to me too until I realised it indicated a sense of certainty in their safety. Put another way, it indicates a lack of fear and it says as much about the person as it does about the environment.

Amazement is also my reaction when people tell me they aren't locking the doors to their websites. In the real world, leaving your door unlocked is quaint; online, it's nothing short of irresponsible.

Of course, the real world does have its thieves, but they are few and far between. The online world, in contrast, is literally teeming with automated bots whose only job is to find a way to get past your defences and creep inside your website.

As a WordPress site owner you're more vulnerable to these attacks than others. Vulnerable to DDos attacks, brute force attacks, cross site scripting, SQL injections, malware.

Using a security plugin should be up there among your priorities right after taking backups and installing updates . Among the best of these security plugins for WordPress are Sucuri and Wordfence. (Free and paid versions of both plugins exist. Here, I am talking about the paid service because that’s what we include for our clients in our maintenance plans.)

But which should you choose? At WPStrands we protect our clients using Sucuri and here I’ll explain why.

Why we focused on a firewall

The  security approach of most WordPress professionals is pretty standard. They look at what traffic they should block and on what actions they should prevent. Then they configure that from within your WordPress admin area.

That is, they are protecting your website from inside your website’s front door. They do this believing it provides sufficient protection. That’s because most of these people have never worked on real-life, enterprise-level security problems.

When I managed operations for the largest cloud provider in Switzerland, security was a real concern of every client; how could they ensure security in an always-on internet?

Of course, basic security fundamentals were a must (e.g. strong passwords, access control). But, apart from that, one of the best ways to achieve a predictable level of protection was via the use of a firewall.

The WPStrands approach to security

If a firewall sounds like overkill to you then it's time to change your perspective. Times have changed. The age of internet innocence is past.

Your website is accessible to all parties at all times and it’s vital to use an appropriate form of protection. For your WordPress website, this means filtering what you don’t want before that traffic even reaches your website.

The best protection is one that is independent of your website. i.e. one that does not run on the same server as your website. And the best way to do this is to use a firewall that is independent of your website.

A Web Application Firewall (WAF) filters all traffic to your website and allows only the traffic you want to get through. (How this is done is beyond the scope of this article but WAFs typically have a built-in list of known attack signatures. If a request contains content that matches any of these signatures it will be blocked. For more on this you can check Sucuri’s knowledge-base article here.) This extra layer of security is a sieve between the flotsam and jetsam of the internet and your website.

Our approach at WPStrands is to focus first on the big picture. First protect the perimeter of your online home. Then have a separate mechanism to secure the site itself.

It’s like having a separate security firm patrolling the borders of your home, while you deal with security inside the house.

How the WPStrands-Sucuri WAF works

At it’s most simple, the Sucuri firewall we install

  • takes ALL your website traffic

  • filters out the bad traffic

  • let’s through only the good traffic

WPStrands Sucuri WAF

So, why is this a superior approach?

Shortcomings of Wordfence and other security plugins

Wordfence is undeniably feature-rich. It includes a basic Firewall, malware scans and brute force protection out of the box. It can protect against backdoors, malware, core file tampering, brute force attacks and much more

But there are some big disadvantages to using a plugin-based firewall:

  • Every time someone visits your website the firewall must check that traffic using your web server resources. As a result, plugin-based firewalls like Wordfence are well-known for causing speed problems.
  • To compensate for this performance drop it’s recommended you use a CDN. This involves extra costs.
  • All plugins are useless against DDoS attacks. A DDoS attack is when a hacker floods a website with too much traffic. This increases the work for the web server and causes the website to slow down or even shut down. It’s an easy way to bring down a website.
    Wordfence admits this failing (see their response to a question on this here) but they claim that DDoS attacks are relatively rare.
    This is in contrast to what I see among our own customers at WPStrands. DDos attacks often make up over 50% of blocked attacks and are always among the most common attacks.
  • There’s a learning curve. Configuration can be difficult for less technical users.
  • Support is less than stellar. It can take days to get an answer to your query and more to get it resolved.
  • Cost. If you need to protect many sites, the cost quickly becomes significant. E.g Wordfence licences for 10 websites costs $792 at the time of writing.

The weakest point of the Wordfence plugin

But here's the main reason we don’t recommend Wordfence and most other security plugins:

Wordfence runs only on your server.

This means the main protection for your website is running on your website. This is bad news for your site’s security and performance if you come under attack! While your site is trying to fend off an attack, it is also using resources to display your website. This can very quickly result in your server being overloaded and shut down by your hosting provider.

We’ve seen this happen so often - especially on shared hosting plans - that we decided to just include the best firewall in our plans at no extra cost to our customers.

Advantages of a cloud-based firewall

When you use a cloud-based firewall, the main protection for your website is NOT running on your website. This is great news for your site’s security and performance if you come under attack! Your web server is using only the resources needed to display your website. The firewall is independently fending off the attack. So, your server will not be overloaded and your site will not be shut down.

Who is Sucuri?

Sucuri is a Delaware-based company that offers complete website security via the cloud. They are veterans in the security world and have an excellent reputation. Their team of security experts monitors and protects 24x7 around the globe.

And, since I work with them regularly, I can tell you first hand that their support is excellent!  Knowledgeable, responsive and professional.

Sucuri is not just a WordPress plugin. They are a full-blown security platform used by businesses both large and small.

Sucuri Products

The company only has 2 main products; Sucuri Firewall and Website Security Platform. With such narrow focus, you can be sure they're serious about what they do.

Features:

The feature list is extensive and includes

  • Website Application Firewall (WAF) / Intrusion Prevention System (IPS),
  • Distributed Denial of Service (DDoS), Brute Force, and automated attack protection
  • continuous malware scanning for common malware, website errors, outdated themes and plugins. and whether your site has been blacklisted on any services that flag malware infected websites.
    They also provide a free SSL certificate to all customers

The free plugin also has a very simple user interface which cuts down the learning curve.

sucuri waf

As a WordPress user searching for solutions you have probably come across WPBeginner. It's the largest WordPress resource site with over 8 million visits each month, founded by Syed Balkhi. Read why he switched to Sucuri here. Said says:

We can honestly say that Sucuri is hands down the best and most cost effective security service in the WordPress industry.

Syed also says:

Whenever we’re asked about WordPress security tips, our top 2 recommendations are get a good WordPress backup solution and start using Sucuri website firewall.

It's not coincidence that these are the same two pillars of sound WordPress maintenance that I’m continuously preaching ...

There is another major advantage to using the Sucuri firewall that they should highlight more. Instead of slowing down your WordPress site, it makes it much, much faster. This is because Sucuri security services operate on top of a CDN. They block attacks and cache your static content at the nearest server, rather than on your web server.

Our choice

If you’ve read this far it’s probably clear to you why we chose Sucuri to protect our customers. Sucuri offers superior threat detection, a greater feature set and a large team of security experts at your disposal. But what I love most is that this is all delivered via the cloud.

I recommend Sucuri Security to any business that is serious about keeping their websites fast and secure.

That should be everyone, including you.

Disadvantages of Sucuri?

The Sucuri firewall costs more than the free version of Wordfence. But it is this paid version that we include in our packages - and it doesn’t cost you anything extra. These costs are borne by WPStrands, not passed on to you. In effect, for WPStrands customers there are no disadvantages to using the Sucuri firewall.

We couple this firewall with the Sucuri plugin on your website itself.  So Sucuri is protecting your website externally (with the firewall) and internally (with the Sucuri plugin).

Conclusion

Of course, there are advantages to using a plugin-based firewall. A free one is better than none at all (usually).  They are made especially for WordPress, so are generally easy to install and use.

But don't be fooled into following the majority. Wordfence is not the best WordPress security plugin simply because it cannot offer the level of protection provided by a real firewall like Sucuri can.

Keep in mind that nothing, firewalls included, can offer perfect protection. No firewall can protect against user issues like weak usernames and password.

Security is a shared measure. A good partner backing you up will relieve you of most of the burden. You must also do your part and take every precaution necessary.

Wordfence is not the best WordPress security plugin

Wordfence is NOT the best WordPress security plugin

Photo by Roi Dimor on Unsplash

Wordfence is NOT the best WordPress security plugin for this one simple reason.

Amazement! That's the reaction of most people when I tell them I know lots of people who don't lock the front door of their home. It seemed strange to me too until I realised it indicated a sense of certainty in their safety. Put another way, it indicates a lack of fear and it says as much about the person as it does about the environment.

Amazement is also my reaction when people tell me they aren't locking the doors to their websites. In the real world, leaving your door unlocked is quaint; online, it's nothing short of irresponsible.

Of course, the real world does have its thieves, but they are few and far between. The online world, in contrast, is literally teeming with automated bots whose only job is to find a way to get past your defences and creep inside your website.

As a WordPress site owner you're more vulnerable to these attacks than others. Vulnerable to DDos attacks, brute force attacks, cross site scripting, SQL injections, malware.

Using a security plugin should be up there among your priorities right after taking backups and installing updates . Among the best of these security plugins for WordPress are Sucuri and Wordfence. (Free and paid versions of both plugins exist. Here, I am talking about the paid service because that’s what we include for our clients in our maintenance plans.)

But which should you choose? At WPStrands we protect our clients using Sucuri and here I’ll explain why.

Why we focused on a firewall

The  security approach of most WordPress professionals is pretty standard. They look at what traffic they should block and on what actions they should prevent. Then they configure that from within your WordPress admin area.

That is, they are protecting your website from inside your website’s front door. They do this believing it provides sufficient protection. That’s because most of these people have never worked on real-life, enterprise-level security problems.

When I managed operations for the largest cloud provider in Switzerland, security was a real concern of every client; how could they ensure security in an always-on internet?

Of course, basic security fundamentals were a must (e.g. strong passwords, access control). But, apart from that, one of the best ways to achieve a predictable level of protection was via the use of a firewall.

The WPStrands approach to security

If a firewall sounds like overkill to you then it's time to change your perspective. Times have changed. The age of internet innocence is past.

Your website is accessible to all parties at all times and it’s vital to use an appropriate form of protection. For your WordPress website, this means filtering what you don’t want before that traffic even reaches your website.

The best protection is one that is independent of your website. i.e. one that does not run on the same server as your website. And the best way to do this is to use a firewall that is independent of your website.

A Web Application Firewall (WAF) filters all traffic to your website and allows only the traffic you want to get through. (How this is done is beyond the scope of this article but WAFs typically have a built-in list of known attack signatures. If a request contains content that matches any of these signatures it will be blocked. For more on this you can check Sucuri’s knowledge-base article here.) This extra layer of security is a sieve between the flotsam and jetsam of the internet and your website.

Our approach at WPStrands is to focus first on the big picture. First protect the perimeter of your online home. Then have a separate mechanism to secure the site itself.

It’s like having a separate security firm patrolling the borders of your home, while you deal with security inside the house.

How the WPStrands-Sucuri WAF works

At it’s most simple, the Sucuri firewall we install

  • takes ALL your website traffic

  • filters out the bad traffic

  • let’s through only the good traffic

WPStrands Sucuri WAF

So, why is this a superior approach?

Shortcomings of Wordfence and other security plugins

Wordfence is undeniably feature-rich. It includes a basic Firewall, malware scans and brute force protection out of the box. It can protect against backdoors, malware, core file tampering, brute force attacks and much more

But there are some big disadvantages to using a plugin-based firewall:

  • Every time someone visits your website the firewall must check that traffic using your web server resources. As a result, plugin-based firewalls like Wordfence are well-known for causing speed problems.
  • To compensate for this performance drop it’s recommended you use a CDN. This involves extra costs.
  • All plugins are useless against DDoS attacks. A DDoS attack is when a hacker floods a website with too much traffic. This increases the work for the web server and causes the website to slow down or even shut down. It’s an easy way to bring down a website.
    Wordfence admits this failing (see their response to a question on this here) but they claim that DDoS attacks are relatively rare.
    This is in contrast to what I see among our own customers at WPStrands. DDos attacks often make up over 50% of blocked attacks and are always among the most common attacks.
  • There’s a learning curve. Configuration can be difficult for less technical users.
  • Support is less than stellar. It can take days to get an answer to your query and more to get it resolved.
  • Cost. If you need to protect many sites, the cost quickly becomes significant. E.g Wordfence licences for 10 websites costs $792 at the time of writing.

The weakest point of the Wordfence plugin

But here's the main reason we don’t recommend Wordfence and most other security plugins:

Wordfence runs only on your server.

This means the main protection for your website is running on your website. This is bad news for your site’s security and performance if you come under attack! While your site is trying to fend off an attack, it is also using resources to display your website. This can very quickly result in your server being overloaded and shut down by your hosting provider.

We’ve seen this happen so often - especially on shared hosting plans - that we decided to just include the best firewall in our plans at no extra cost to our customers.

Advantages of a cloud-based firewall

When you use a cloud-based firewall, the main protection for your website is NOT running on your website. This is great news for your site’s security and performance if you come under attack! Your web server is using only the resources needed to display your website. The firewall is independently fending off the attack. So, your server will not be overloaded and your site will not be shut down.

Who is Sucuri?

Sucuri is a Delaware-based company that offers complete website security via the cloud. They are veterans in the security world and have an excellent reputation. Their team of security experts monitors and protects 24x7 around the globe.

And, since I work with them regularly, I can tell you first hand that their support is excellent!  Knowledgeable, responsive and professional.

Sucuri is not just a WordPress plugin. They are a full-blown security platform used by businesses both large and small.

Sucuri Products

The company only has 2 main products; Sucuri Firewall and Website Security Platform. With such narrow focus, you can be sure they're serious about what they do.

Features:

The feature list is extensive and includes

  • Website Application Firewall (WAF) / Intrusion Prevention System (IPS),
  • Distributed Denial of Service (DDoS), Brute Force, and automated attack protection
  • continuous malware scanning for common malware, website errors, outdated themes and plugins. and whether your site has been blacklisted on any services that flag malware infected websites.
    They also provide a free SSL certificate to all customers

The free plugin also has a very simple user interface which cuts down the learning curve.

sucuri waf

As a WordPress user searching for solutions you have probably come across WPBeginner. It's the largest WordPress resource site with over 8 million visits each month, founded by Syed Balkhi. Read why he switched to Sucuri here. Said says:

We can honestly say that Sucuri is hands down the best and most cost effective security service in the WordPress industry.

Syed also says:

Whenever we’re asked about WordPress security tips, our top 2 recommendations are get a good WordPress backup solution and start using Sucuri website firewall.

It's not coincidence that these are the same two pillars of sound WordPress maintenance that I’m continuously preaching ...

There is another major advantage to using the Sucuri firewall that they should highlight more. Instead of slowing down your WordPress site, it makes it much, much faster. This is because Sucuri security services operate on top of a CDN. They block attacks and cache your static content at the nearest server, rather than on your web server.

Our choice

If you’ve read this far it’s probably clear to you why we chose Sucuri to protect our customers. Sucuri offers superior threat detection, a greater feature set and a large team of security experts at your disposal. But what I love most is that this is all delivered via the cloud.

I recommend Sucuri Security to any business that is serious about keeping their websites fast and secure.

That should be everyone, including you.

Disadvantages of Sucuri?

The Sucuri firewall costs more than the free version of Wordfence. But it is this paid version that we include in our packages - and it doesn’t cost you anything extra. These costs are borne by WPStrands, not passed on to you. In effect, for WPStrands customers there are no disadvantages to using the Sucuri firewall.

We couple this firewall with the Sucuri plugin on your website itself.  So Sucuri is protecting your website externally (with the firewall) and internally (with the Sucuri plugin).

Conclusion

Of course, there are advantages to using a plugin-based firewall. A free one is better than none at all (usually).  They are made especially for WordPress, so are generally easy to install and use.

But don't be fooled into following the majority. Wordfence is not the best WordPress security plugin simply because it cannot offer the level of protection provided by a real firewall like Sucuri can.

Keep in mind that nothing, firewalls included, can offer perfect protection. No firewall can protect against user issues like weak usernames and password.

Security is a shared measure. A good partner backing you up will relieve you of most of the burden. You must also do your part and take every precaution necessary.

1 2 3 5