When should you use a JavaScript plugin on your website?

My main point in writing this post is to have you think twice before using a pre-built JavaScript plugin. Thousands and thousands of plugins have been written and uploaded to the web for you to download for free and achieve just about any functionality that you may need. It’s tempting to keep using pre-built plugins, but will it always save you time? I’ll dive into the pros and cons of both options.

As I’ve built multiple websites I have questioned the use of pre-built plugins. Many of these come with extra utilities that are built in and that I don’t necessarily use or need when I implement it into my website. These extra utilities mean more lines of code and an increased site size! Plugins may cause your website to become bloated and less optimized, but at the same time can be life savers that allow you to implement features that you may not have been able to in the time frame that is required of you.

Pros of Pre-Built JS Plugins

  • Those without an in-depth knowledge of JavaScript are able to achieve the benefits of JavaScript.
  • Feature rich sections of your site can be achieved within minutes.
  • Updates and security patches are taken care of for you with supported plugins.
  • Allows you to avoid “re-inventing the wheel”. Why code something that someone has already perfected?

Cons of Pre-Built JS Plugins

  • Plugins often come with features and functionality that you do not need, causing the total size of your site to increase. (You can often write the JS you need in much less code than a plugin you would like. See my example later in this post…)
  • If you need to add functionality to the plugin at a later date it can be complicated and difficult to extend the current plugin code.
  • Pre-built plugins will not be as tailored to your site and needs as your own custom code.

When considering whether to use a plugin, always review the size of the JS file and determine whether or not it could be feasible for you to achieve the functionality you need with less lines. In a recent project I worked on I was asked to built a site component with tabbed content. All I needed was something with links(tabs) that when clicked would switch the display of the anchored tab content. We had used a plugin called Responsive Tabs on previous projects. I looked at the code and decided I could achieve what I needed in far less code. The Responsive Tabs JS file 705 lines long and 26.3 KB large:


I was able to build a simple custom tab plugin for my needs in 60 lines and 1.43 KB. That’s over 18 times smaller! Here is the link to the plugin I wrote:


When you’re dealing with multiple plugins on a site you’ll start decreasing the size of your site very quickly, which will be a huge improvement for anyone loading the site on a slow network. Since this I’ve gone ahead and built a few other custom plugins for a few projects. Here is a simple plugin for a rotating banner image:


To finish, I want to reiterate that using a pre-built or custom plugin can both be a good idea depending on your situation. Before you decide make sure to weigh the pros and cons of each option!

Front End Website Optimization Checklist

Website optimization is a essential skill for all front end developers and a feather to put in the cap for other types of developers. There is nothing more beneficial to site conversion rates and encouraging user engagement than a quick loading web page. Most users expect a site to load in two seconds or less, and may leave if it does not. Check off the following front end website optimization list as you work to cut website lag:

  • Reduce HTTP Requests (file concatenation, sprites)
  • Enable GZIP Compression (GZIP)
  • Enable Leverage Browser Caching
  • Optimize Images (with task managers, online Tools, image editors)
  • Load Important Content First (defer JavaScript, lazy load images)
  • Minify Assets (js & css)
  • Load Assets From a Content Delivery Network (CDN)
  • Test Site With Online Tools

I’ll now layout instructions on the implementation of each of the list items.

Reduce HTTP Requests

WHY? Each HTTP request adds load time to your page while the browser waits for the server to serve up the asset.


  • Concatenate CSS and JavaScript files (this can be done manually or with a task runner like GRUNT).
  • Combine images into image sprites. This can be done easily with online tools such as http://wearekiss.com/spritepad.
  • Only load content that will be used on the page.

Enable GZIP Compression

WHY? Enabling GZIP compression allows the server to compress the files that are sent to the browser making them smaller and thus faster to load for users.

HOW? Can be enabled via the .htaccess file by adding the code snippet below:

<IfModule mod_deflate.c>
  # Compress HTML, CSS, JavaScript, Text, XML and fonts
  AddOutputFilterByType DEFLATE application/javascript
  AddOutputFilterByType DEFLATE application/rss+xml
  AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
  AddOutputFilterByType DEFLATE application/x-font
  AddOutputFilterByType DEFLATE application/x-font-opentype
  AddOutputFilterByType DEFLATE application/x-font-otf
  AddOutputFilterByType DEFLATE application/x-font-truetype
  AddOutputFilterByType DEFLATE application/x-font-ttf
  AddOutputFilterByType DEFLATE application/x-javascript
  AddOutputFilterByType DEFLATE application/xhtml+xml
  AddOutputFilterByType DEFLATE application/xml
  AddOutputFilterByType DEFLATE font/opentype
  AddOutputFilterByType DEFLATE font/otf
  AddOutputFilterByType DEFLATE font/ttf
  AddOutputFilterByType DEFLATE image/svg+xml
  AddOutputFilterByType DEFLATE image/x-icon
  AddOutputFilterByType DEFLATE text/css
  AddOutputFilterByType DEFLATE text/html
  AddOutputFilterByType DEFLATE text/javascript
  AddOutputFilterByType DEFLATE text/plain
  AddOutputFilterByType DEFLATE text/xml

  # Remove browser bugs (only needed for really old browsers)
  BrowserMatch ^Mozilla/4 gzip-only-text/html
  BrowserMatch ^Mozilla/4\.0[678] no-gzip
  BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
  Header append Vary User-Agent

Enable Leverage Browser Caching

WHY? We are able to specify parameters to tell our server to which files to cache and for how long.

HOW? Enabling leverage browser caching can be achieved by adding the code below to your .htaccess file. You can adjust the time parameters for each file type.

<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "access plus 1 year"
ExpiresByType image/jpeg "access plus 1 year"
ExpiresByType image/gif "access plus 1 year"
ExpiresByType image/png "access plus 1 year"
ExpiresByType text/css "access plus 1 month"
ExpiresByType application/pdf "access plus 1 month"
ExpiresByType text/x-javascript "access plus 1 month"
ExpiresByType application/x-shockwave-flash "access plus 1 month"
ExpiresByType image/x-icon "access plus 1 year"
ExpiresDefault "access plus 2 days"

Optimize Images

WHY? Images can be large in file size and are quite often the cause of slow websites. Shrinking the file size of images displayed on the website will dramatically decrease load time.


NOTE: Images should rarely by over 200KB in size and typically smaller than 50KB.

Load Important Content First

WHY? User’s perception of how fast website loads depends on what they see on their screen. HTML and CSS should be loaded before JavaScript.


  • Defer parsing of JavaScript (typically should be placed in footer of website)
  • Lazy load images (can be done with JavaScript plugins or CMS plugins, example: https://www.midphase.com/website-hosting/)
  • AJAX loading dynamic content

Minify Assets

WHY? Minifying your assets will cut out extra white spaces and shorten code to decrease the size of your CSS and Javascript.


Load Assets From a Content Delivery Network

WHY? It takes users longer to download website files when they live far from the website’s server. A CDN distributes the website assets around the globe to allow the user to download the assets from the closest CDN location.


Test Site With Online Tools

WHY? Testing the site with these tools will give you a good idea of things you may need to do in order to speed your site up.