According to Wikipedia…

“Cloudflare, Inc. is an American web infrastructure and website security company that provides content delivery network services, DDoS mitigation, Internet security, and distributed domain name server services.[2] Cloudflare’s services sit between a website’s visitor and the Cloudflare user’s hosting provider, acting as a reverse proxy for websites.[3][4] Cloudflare’s headquarters are in San Francisco.”

For those who aren’t giant nerds like we are, Cloudflare is an easy-to-set-up tool that turbocharges your website, protects it from the bad guys, and tells you where your audience is coming from. So, let’s talk about what all this really means.

Speed

Faster DNS

Everyone likes a fast website, right? But did you know that there is a lot more to loading times than just a fast web host?

One common issue that causes sites to load slowly is having poor DNS lookup times. Cloudflare helps trim this time down by stepping in as your DNS manager. If you are migrating from a poor DNS manager, you could see your site load speeds reduced by as much as 2,000 milliseconds! For more information see Cloudflare DNS.

Distributed CDN

Ever heard of cache? A cache isn’t money misspelled, but when it’s properly configured, it can make you some.

I’ve covered caching in greater detail in Diagnosing a Slow WordPress Site, but the short answer is it helps your website load faster for all your users. A major factor of website load speeds is distance. In other words, how far away is your server from your audience?

The farther the user is from your host server, the longer it takes for your site to load for your users. Unlike caching solutions that are hosted on just your host server, Cloudflare provides you multiple cache servers distributed across the globe free!* In practice, if you have a global audience, they are served a copy of your website from a server that is closer to them. That means faster load times.

Bonus fact: Since Cloudflare can save a cached copy of your website, in the event your web server goes down, Cloudflare is able to continue to serve your users from its saved copy until your web services are restored. For more information see Cloudflare CDN.

Analytics

Another major benefit that Cloudflare provides is in-depth analytics of all your site’s traffic out of the box. Knowing where your audience is coming from is helpful for your marketing strategy. Perhaps you didn’t know you were popular in Germany. These types of insights aid you in making more informed business decisions, such as opening up a version of your site in German or load balancing your website to be closer to your real customers.

If you are a fan of Google Analytics, you can still use it in conjunction with Cloudflare. For more information see Cloudflare Analytics.

Security

While speed and analytics certainly are important, as a backend engineer, the biggest reason I love Cloudflare is for the security resources it provides. Better than a mall cop, Cloudflare provides free denial-of-service (DDOS) protection to all of its users.

A DDOS attack is when a bad actor wishes to make a website (or any network resource) unavailable to other users. One way this can be accomplished is when a pool of thousands of infected computers are instructed to load a particular website in the hopes of overwhelming that server’s capacity, and thus bring down the website.

The reasons why someone nefarious would do this are plenty; sufficed to say, it’s not a good thing to happen when your its next target. Being a leading provider of DDOS protection Cloudflare has a database of most bad actors and can block their requests from ever reaching your website, thus keeping it online. For more information see Cloudflare DDOS.

Conclusion

If you like your website to go faster, become more secure, and ultimately know where your customers are coming from I hope you give Cloudflare a consideration.

To address the asterisk after free earlier, all the services I mentioned in this article are provided free for all the sites you own and should be all smallest to mid-sized websites should need. Who doesn’t like free stuff? If, however, you are a larger enterprise client, Cloudflare provides an extended range of paid services to help you even more.

So, whether you’re leveling up your current website or launching a new web project, consider my advice. If you’re seeking a team of pros to help you with that, contact us!

The post Why You Should Use Cloudflare for All Your Websites appeared first on WebDevStudios.

When a script or stylesheet’s source URL changes with a cache busting query string, the browser sees it as a new and unique URL. So customstyle.css?ver=1.0.1 is considered distinct from customstyle.css?ver=1.0.0. If the browser had already cached ?ver=1.0.0, and it encounters ?ver=1.0.1, it will download a fresh copy of customstyle.css?ver=1.0.1 and use that.

And of course, for a developer working on a custom theme, WordPress already provides a way to supply a cache busting query string when registering or enqueueing scripts and stylesheets.

The wp_register_script(), wp_register_style(), wp_enqueue_script(), and wp_enqueue_style() functions all accept a version string argument for their $ver parameter. The documentation for these functions state that the $ver parameter is a string specifying the script or style’s version number, “…which is added to the URL as a query string for cache busting purposes.”

To leverage this cache busting mechanism, when we enqueue a stylesheet for example, we simply add a version number as the fourth argument to our wp_enqueue_style() call:

View the code on Gist.

For the above example, our stylesheet will be injected into the document head markup as something like:

View the code on Gist.

Now, when we make changes to our customstyle.css stylesheet in the future, we increment the version number in our call to wp_enqueue_style(). That will change the asset’s cache busting query string, prompting browsers to download the ‘1.0.1’ version of the stylesheet, even it if had the older ‘1.0.0’ version already cached.

This query string technique is solid, and has been used for many years, and not only in WordPress. But there is also a potential drawback. This requires that we manually maintain/update version numbers in a PHP file whenever we make changes to our CSS file. If we forget to increment the version number in PHP (hey, we’re only human), our visitors’ browsers will continue using the older version until the browser’s cache expires or is manually flushed.

But there is another technique we can leverage to help alleviate that potential for human error. PHP’s filemtime() function takes the full path to a file and returns the time that file was last modified as a UNIX timestamp. Knowing this, we could leverage the file’s modification timestamp as our version number. Make a change in the CSS file, save it, and our version string changes automagically, without manual curation in a PHP file.

Here is how we might update our earlier example to take advantage of that:

View the code on Gist.

Now our stylesheet markup might look something like this:

View the code on Gist.

And the next time we modify that CSS file, our cache busting version query string will automagically update, and visitors’ browsers will get the latest style changes.

When not to use the filemtime() technique? There is a small performance hit when you read from the filesystem. The magnitude of that hit depends on many factors, some of which might be beyond your control, such as disk read speed. Therefore, control what you can, limit the number of files that you use this technique with. For a few custom scripts and styles in a custom theme, this is an imperceptible performance hit. However, filemtime() is not a great solution to use with dozens or hundreds of assets in one request. Keep it reasonable, so both you and your visitors can benefit from this technique.

The post Cache Busting Scripts and Styles appeared first on WebDevStudios.