{
    "version" : "https://jsonfeed.org/version/1",
    "content" : "guides",
    "type" : "single",
    "title" : "JavaScript is really cool, when used with care |Digital.gov",
    "description": "JavaScript is really cool, when used with care",
    "home_page_url" : "/preview/gsa/digitalgov.gov/bc-archive-content-3/","feed_url" : "/preview/gsa/digitalgov.gov/bc-archive-content-3/guides/mobile-principles/javascript/index.json","item" : [
    {"title" :"JavaScript is really cool, when used with care","summary" : "Week one of our series covers the benefits of using JavaScript.","date" : "2018-10-09T12:30:00-05:00","date_modified" : "2025-01-27T19:42:55-05:00","primary_image" : { "uid" : "guide-mobile-principles", "alt" :
  "Vector illustration of a mobile phone", "width" :
  "1200", "height" :
  "630", "credit" :
  "Irina_Strelnikova/iStock via Getty Images", "caption" :
  "", "format" :
  "png" },"branch" : "bc-archive-content-3",
      "filename" :"principles-javascript.md",
      
      "filepath" :"guides/mobile-principles/principles-javascript.md",
      "filepathURL" :"https://github.com/GSA/digitalgov.gov/blob/bc-archive-content-3/content/guides/mobile-principles/principles-javascript.md",
      "editpathURL" :"https://github.com/GSA/digitalgov.gov/edit/bc-archive-content-3/content/guides/mobile-principles/principles-javascript.md","slug" : "javascript","url" : "/preview/gsa/digitalgov.gov/bc-archive-content-3/guides/mobile-principles/javascript/","aliases" : {"0" : "/resources/mobile/principles/javascript"},"content" :"\u003cp\u003eJavaScript seems to have it all. It is readily available and widely used by mainstream programmers with great documentation and support. JavaScript is complemented by many other technologies and libraries such as JSON, and especially useful for graphical user interfaces (GUI). JavaScript benefits from being part of HTML5. Finally, JavaScript \u003cem\u003ewill probably\u003c/em\u003e be with us for a long time as there is much JavaScript-related innovation being worked on, the JavaScript web platform is maturing rapidly, and, most importantly, JavaScript is supported by a broad coalition of companies.\u003c/p\u003e\n\u003cp\u003eWith all these benefits to using JavaScript, like any great functionality—if not used correctly—it can make your site unfriendly and detract from its benefits. The following are three preventable issues caused by the incorrect implementation of JavaScript that may lead to mobile unfriendliness.\u003c/p\u003e\n\u003col\u003e\n\u003cli\u003eJavaScript Minify\u003c/li\u003e\n\u003cli\u003eJavaScript Placement\u003c/li\u003e\n\u003cli\u003eInline JavaScript\u003c/li\u003e\n\u003c/ol\u003e\n\u003cp\u003eAll three of these may negatively impact your site’s performance and can be detected using Google\u0026rsquo;s \u003ca href=\"https://search.google.com/test/mobile-friendly\"\u003eMobile-Friendly Test\u003c/a\u003e tool, \u003ca href=\"https://www.digitaldashboard.gov/\"\u003eDigitalDashboard.gov\u003c/a\u003e, or the \u003ca href=\"https://itif.org/publications/2017/03/08/benchmarking-us-government-websites\"\u003eInformation Technology \u0026amp; Innovation Foundation (ITIF) Benchmarking Report\u003c/a\u003e.\u003c/p\u003e\n\u003ch2 id=\"1-javascript-minify\"\u003e1. JavaScript Minify\u003c/h2\u003e\n\u003cp\u003e\u003cstrong\u003eIssue: JavaScript, as written, included dead space that slows download and execution time\u003c/strong\u003e\u003c/p\u003e\n\u003cp\u003eJavaScript files should always be minimized to reduce transit time and help speed up page load.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSolution: Use tools to minify all JavaScript!\u003c/strong\u003e\u003c/p\u003e\n\u003cp\u003eMinification removes unnecessary or redundant data without affecting how the resource is processed by the browser. The Integrated Developer Environment (IDE) tool used to develop the site may include features that will minify the JavaScript during the build process.\u003c/p\u003e\n\u003cp\u003eYou can also do this with Google Closure tools, including the Closure Compiler, an optimizer that rewrites your code and minimizes the dead space to make it download faster. It is typical to minify only in the production environment, as troubleshooting and debugging in the development environments will be easier with\nnon-minified JavaScript.\u003c/p\u003e\n\u003ch3 id=\"references\"\u003eReferences\u003c/h3\u003e\n\u003cul\u003e\n\u003cli\u003e\u003ca href=\"https://developers.google.com/speed/docs/insights/MinifyResources\"\u003eMinify Resources (HTML, CSS, and JavaScript)\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://www.elegantthemes.com/blog/tips-tricks/how-to-minify-your-websites-css-html-javascript\"\u003eHow to Minify Your Websites CSS, HTML \u0026amp; JavaScript\u003c/a\u003e\u003c/li\u003e\n\u003c/ul\u003e\n\u003ch2 id=\"2-javascript-placement\"\u003e2. JavaScript Placement\u003c/h2\u003e\n\u003cp\u003e\u003cstrong\u003eIssue: Where you place your JavaScript affects the site’s performance\u003c/strong\u003e\u003c/p\u003e\n\u003cp\u003eGrouping JavaScript at the end of the page markup is optimal for page load. When the HTTP specification puts JavaScript elsewhere on the page (e.g. at the top), this may result in loading blocking while the JavaScript files are downloaded. Additionally, before the browser can render a page it has to build the DOM tree by parsing the HTML markup. Whenever the parser encounters a script, it stops and executes the script before it continues parsing. This slows the performance of the page load.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSolution: Place JavaScripts so they don’t block browser loading\u003c/strong\u003e\u003c/p\u003e\n\u003cp\u003ePut scripts in the \u003ccode\u003e\u0026lt;head\u0026gt;\u003c/code\u003e tag and use the \u003ccode\u003easync\u003c/code\u003e or \u003ccode\u003edefer\u003c/code\u003e attributes, which allows the scripts to be downloaded ASAP without blocking your browser.\u003c/p\u003e\n\u003cp\u003eScripts with the \u003ccode\u003easync\u003c/code\u003e attribute are executed asynchronously. This means the script is executed as soon as it is downloaded —without blocking the browser in the meantime—and that script 2 can be downloaded and executed before script 1.\u003c/p\u003e\n\u003cp\u003eScripts with the \u003ccode\u003edefer\u003c/code\u003e attribute are executed in order (i.e. first script 1, then script 2). This also does not block the browser. Unlike \u003cem\u003easync\u003c/em\u003e scripts, \u003cem\u003edefer\u003c/em\u003e scripts are only executed after the entire document has been loaded.\u003c/p\u003e\n\u003ch3 id=\"references-1\"\u003eReferences\u003c/h3\u003e\n\u003cul\u003e\n\u003cli\u003e\u003ca href=\"https://mobiforge.com/design-development/fixit-javascript-placement\"\u003eFixit – JavaScript Placement\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://developers.google.com/speed/docs/insights/BlockingJS\"\u003eRemove Render Blocking JavaScript\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://developers.google.com/speed/docs/insights/PrioritizeVisibleContent\"\u003eReduce the size of the above the fold content\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"http://stackoverflow.com/questions/436411/where-should-i-put-script-tags-in-html-markup\"\u003eWhere should I put \u003ccode\u003e\u0026lt;script\u0026gt;\u003c/code\u003e tags in HTML markup?\u003c/a\u003e\u003c/li\u003e\n\u003c/ul\u003e\n\u003ch2 id=\"3-inline-javascript\"\u003e3. Inline JavaScript\u003c/h2\u003e\n\u003cp\u003e\u003cstrong\u003eIssue: Inline JavaScript prevents browser from processing, thus slowing page rendering\u003c/strong\u003e\u003c/p\u003e\n\u003cp\u003eInline JavaScript code should not be used because it requires that the browser pass JavaScript code markup that slows processing.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSolution: Separate JavaScript code from the HTML\u003c/strong\u003e\u003c/p\u003e\n\u003cp\u003eMove all JavaScript code to a single minified file, which provides a clean separation of markup, style and code. This can also be accomplished by enabling the “Inline JavaScript” filter in Apache and Nginx web servers.\u003c/p\u003e\n\u003ch3 id=\"references-2\"\u003eReferences\u003c/h3\u003e\n\u003cul\u003e\n\u003cli\u003e\u003ca href=\"https://mobiforge.com/design-development/fixit-inline-javascript\"\u003eFixit – Inline JavaScript\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://modpagespeed.com/doc/filter-js-inline\"\u003eInline JavaScript\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://dzone.com/articles/why-inline-css-and-javascript-\"\u003eWhy Inline CSS and JavaScript Code is Such a Bad Thing\u003c/a\u003e\u003c/li\u003e\n\u003c/ul\u003e\n\u003cp\u003e\u003cstrong\u003eJavaScript Resources\u003c/strong\u003e\u003c/p\u003e\n\u003cp\u003e\u003ca href=\"http://www.jscripters.com/javascript-advantages-and-disadvantages/\"\u003eJavaScript: Advantages and Disadvantages\u003c/a\u003e\n\u003ca href=\"http://speakingjs.com/es5/ch02.html\"\u003eWhy JavaScript?\u003c/a\u003e\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eTesting Resources\u003c/strong\u003e\u003c/p\u003e\n\u003cul\u003e\n\u003cli\u003e\u003ca href=\"https://search.google.com/test/mobile-friendly\"\u003eGoogle Mobile Friendly Test Tool\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://www.digitaldashboard.gov/\"\u003eDigitalDashboard.gov\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"http://www2.itif.org/2017-benchmarking-us-government-websites.pdf\"\u003eInformation Technology \u0026amp; Innovation Foundation (ITIF) Benchmarking U.S. Government Websites Report\u003c/a\u003e (2.7 MB PDF, 90 pages)\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://digital.gov/2017/03/24/new-itif-report-inspires-a-closer-look-at-website-performance-and-security-here-is-where-to-begin/\"\u003eNew ITIF Report Inspires a Closer Look at Website Performance and Security—Here Is Where to Begin\u003c/a\u003e\u003c/li\u003e\n\u003c/ul\u003e\n"}
  ]
}