How to Host any (.js)-File Locally (and keep it updated using Crontab)

I’ve received many requests on the WordPress support forums to create plugins to host certain files locally.

Besides CAOS and OMGF I recently created a plugin which enables you to easily save a local copy of any external script or style, called HELL or: Host Everything LocaL. But since there are still plenty of scenario’s that aren’t covered by CAOS, OMGF or HELL I figured I’d show you how to host any file locally and keep it updated using cronjobs.

Hosting a File Locally and keeping it updated using Crontab

If you came here looking for a way to host Google’s Analytics, Google Fonts or other Scripts/Styles locally, I’ve got a way better way for you. I built three plugins for WordPress to take care of that for you. CAOS takes care of hosting analytics.js locally and keeping it updated. OMGF allows you to easily download Google Fonts and generate a stylesheet for it. HELL allows you to easily fetch any enqueued JavaScript and/or CSS Stylesheet and serve it from a local source.

What we’re going to learn in this How-to, is essentially two things:

• Modify a PHP-script, which will download and update our file;
• Schedule a cronjob, which will trigger the PHP-script at a set time.

To host locally, or not to host locally

If you found this tutorial through Google, you’ve most likely have searched for terms like: host file locally, local host webfont, local host javascript, minimize external requests or minimize DNS requests.

Whatever it was, you’ve probably visited Pagespeed Insights, Pingdom, GT Metrix, or any website performance tool. It suggested you should host files locally, instead of making requests to external hosts and you want to know how to get rid of it.

That’s why I assume you already have an idea of which file you want to host on your own server, which is awesome!

Although I already created a plugin for WordPress which enables you to host Google Analytics locally, I’ll use analytics.js as an example throughout this post. Because I know it’ll work.

Theoretically it is possible to host any javascript file locally. The only thing I want to say is, and I can’t stress this enough, TEST!

A script can be (poorly) built in a way that it won’t work when it’s hosted from a source other than its origin. That’s why it is very important to test whether your script still produces it’s results as expected after copying it to your server.

Creating the PHP-script

The following script is basically ready to go, the only values for you to adjust are:

• $remoteFile: the source of the scriptfile you want to download,
• $localFile: the path to where you want to save the file — including filename,
• $uploadDir: the path to where you want to save the file, without the filename.

Edit and upload the script to your server in a convenient location, to keep your crontab readable later on.

After you’re done, you can trigger a testrun to see if the script is properly executed. SSH into your server and type the following command: php -f /path/to/your/script.php

After running the script, the javascript file should appear within the directory you specified within the $uploadDir variable. If that’s not the case, make sure PHP has the right permissions and can write files to the directory you specified.

Scheduling a Cronjob

Businesses advise you to load their javascript from their own resources for a very important reason. They want to control its contents:

• As a security measure,
• It allows them to roll out updates at once, whenever this is required.

The downside to this is that it will lower your score on Google Pagespeed, Pingdom, etc., because making external DNS requests is bad for your site’s performance and raises your loading time.

To achieve the best of both worlds, we combine the script you created earlier with a Cronjob, so it is triggered regularly and kept up-to-date.

The command you used earlier to test your script, will be extended into a syntax that Crontab understands. For this we need the following prerequisites:

• An interval for the script to be triggered (e.g. daily),
• The full path to the PHP executable, which can be found by entering which php into a terminal.

This would result in a command looking like this:

10 0 * * * /usr/bin/php -f /path/to/your/script.php >/dev/null 2>&1

This command triggers the script on a daily basis at 10 minutes past Midnight. You can use a crontab generator to generate your own cronjob.

After generating your cronjob, copy it and enter crontab -e into a terminal. Crontab will open in editor mode (sometimes you first need to choose your favourite text editor. I suggest nano) and all you have to do is paste the command on a new line. Save it, and you’re done!

All you need to do now is change the URLs within the provided javascript snippets. E.g. for Google Analytics, this would mean I’d change this:

To this:

After this, make sure your changes are not influencing the results the script should generate. This differs per script, but e.g. for Google Analytics you could open up a private browser window, and visit your site, while you’re monitoring the Real Time traffic within your Analytics Dashboard.

If all is well, tap yourself on the shoulder! Perhaps you could even demand a standing ovation from your pets! After that, run your site through Pingdom and Pagespeed Insights and you’ll see your score is higher than before!

You’re done! You can repeat this tutorial for as many files as you’d like. Just make sure to test your changes afterwards! Because the fact that your tools work as they should, is more important than a high score in pingdom or pagespeed insights.

Nonetheless, hosting as many files as possible locally and minimizing DNS requests is better for your sites’ performance. So, do it when possible!