Increasing Your Website Page Speed – JavaScript Part 1


Are you using any “drag and drop” functionality on your website? Does your website depend your plugins, add-ons, apps, in order to display its content? If so, you may be losing money.

One of the most powerful languages in the web today is JavaScript. There are currently hundreds of JavaScript libraries that help websites perform the functionality needed. For example, one of the most popular languages is JQuery.

The power of JavaScript can be addicting to some web developers and website owners. It is exciting to insert HTML, create animations, or have eye catching pop-ups, however these come at a cost. Sometimes when using JavaScript, you can overcomplicate your website, taking away a website’s natural ability to display information to a user. Here are some tips to keep in mind when using JavaScript on a website.

Do not use JavaScript to input HTML

I have found this tip to be very important. To begin, Google says, “Avoid the use of plugins on a website. Most content that once required plugins can now be created using web technologies.” There are many reasons why Google says this, one of which is page load time.

Content Management Systems are famous for the use of free and paid plugins to increase functionality on websites. A good amount of plugins work off of short-codes. These plugins take the content you have placed in their user interface and with the use of JavaScript and PHP insert the HTML onto the page. Plugins provide state of the art functionality to websites, that are sometimes too complicated to code by hand. The downfall? These plugins are inserting DOM elements using JavaScript.

This functionality will lag your site because there are sometimes thousands of bytes of information that have to be processed in order for it to appear on the website. The plugin’s scripts will need to perform many tasks such as parsing the information, calling other files, compiling the information, and inserting the HTML. Now if you use 5-6 plugins for different elements on each page…. You can cause a serious lag.

When Your Website Lags, You Lag

I have noticed that slow page loading messes with how Google renders a website. I have seen this mainly in complex plugins that perform many different functionalities.

To give you an example, you use a plugin that is inserting HTML and CSS onto a page. It accomplishes this all through the content entered into the plugin interface and with the use of extensive JavaScript functions. When the page is loaded, you notice that the content loaded with the plugin takes a half second longer to display than the other content. This might not seem like a big deal to you, but it can actually really hurt your website rankings. I have noticed that Google might actually not index the plugin’s inserted HTML because of that half second delay. Not good I know.

Why does this happen? Well Google obviously works at a very high pace in order to constantly crawl thousands and thousands of websites. When the page loads, whatever is currently on the page is indexed. So in that half second it takes for your plugin content to load, the Google bots have already left.

Drag and drop functionality and other plugins that provide nice easy interfaces are data heavy. Not only do these plugins provide potential issues with other plugins, odds are at least one JavaScript and CSS file are added to your <head> of your website. I have seen in some cases there are up to 4-5 files added to each page per plugin. With every file that has to be fetched and downloaded, more time has passed. In fact, go to the source code of your website right now and look at how many JS and CSS files are being called by your plugins.

So What’s the Solution?

Well the easiest answer might be to just bite the bullet and pay the professional to do it. To clarify, I am not against using plugins overall, in fact some plugins are very useful and necessary for websites. I am simply saying that for any functionality needed on a website, professionally code as much as possible into your back-end files.

  1. Server-side HTML will always load faster than client-side.

Most to all the functionality you want from your website can be hand coded into your website. The parallax, animations, and pop-ups can all be reduced and placed server side on your website with clean code. To explain further, plugins mainly use client side execution to provide the HTML. The free drag and drop interface that you see is client-side, which runs scripts to input the HTML onto the page. Coding server side means, hand coding on your server through FTP. This solution takes more time and money to perform, but this might be the most cost effective option in the long run. Especially if after months and months have gone by and pages on your site were not being indexed for others to see.

  1. When it comes to websites, less is more.

With this, the ultimate goal is to limit the amount of requests per website page. Each CSS and JavaScript file has to be called and downloaded. If you end up using a JavaScript library, try to work with a library that will perform all you need it to do. This way you are not weighting down your website with 4-5 different library calls. If you really are trying to have the best SEO ranking and user experience, focus on having the least amount of requests possible.


Have you ever wondered why the big name companies don’t run off of WordPress? Everything is hand customized to have the least amount of code and functionality as possible. Providing the best experience and fastest loading times for Google and potential customers.

JavaScript is a powerful tool that helps bring functionality and life to your website. However, it is important to find the balance between user experience, page load time, and functionality.




Increasing Your Website Page Speed – JavaScript Part 2 Coming Soon


About samuelmecham

Foxtail Marketing is a digital marketing firm that provides content marketing, digital marketing, and lead generation services for small and mid-market companies.

Follow us, we are social

CALL or TEXT 1-800-273-2113

© Foxtail Marketing.

Digital Marketing Made Easy.