How to Use jQuery without Compromising SEO Performance

Posted on Tuesday, December 10th, 2013 by Print This Post Print This Post

Categories - Featured, SEO

jquery_logo

jQuery is a shorthand JavaScript library that can be used to stylize behavioral elements on a webpage.  While developers should stick with a foundation of crawlable HTML and CSS when creating web content, languages like jQuery can provide additional functionality or enhancements to user experience that are beyond the scope of HTML and CSS.

When implementing jQuery, it is important to do so in a manner that doesn’t compromise user experience, increase page weight, block valuable content from crawlers, or otherwise reduce the potential SEO value of the site. Below is just a sample of SEO-saving tactics from our recent white paper that you can use when implementing jQuery:

  1. Manage page size by moving jQuery elements out of in-line code.
  2. Prioritize essential content (HTML and CSS) to fully render prior to executing jQuery elements.
  3. Implement fallbacks for users who cannot parse it.
  4. Prevent elements from not fully rendering or firing in the proper sequence.
  5. Minimize code and consolidate multiple functions to minify the amount of scripts.
  6. Avoid conflict with other programming languages.

Download our white paper to get the full details on how to use jQuery without damaging SEO.

Tags | , , , , , , , , , , ,

2 Responses to “How to Use jQuery without Compromising SEO Performance”

  1. kamalesh says:

    Thank you so much for all helpful tips on implementing jquery without affecting SEO. However is it a good practice of having jquery code in the header section of the page??

    • Kirby says:

      Thanks kamalesh! I assume your talking about placing the tag for loading the jQuery library in the of the HTML page.

      There’s a few ways you can mitigate this to ensure optimized performance. First, is to reference a jQuery library which is hosted on a CDN, like Google or Microsoft. There’s a good chance that visitors have visited other sites with one of these libraries, which is probably cached on their devices.

      You can also optimize the loading by adding additional parameters to the tag. Adding “async” will load the script asynchronously with the rest of the content. Adding “defer” will wait to load the script until all other content has rendered: http://www.w3schools.com/tags/tag_script.asp

Trackbacks/Pingbacks


Leave a Reply

Follow Us on Twitter

Authors