{"id":17324,"date":"2021-11-08T22:00:33","date_gmt":"2021-11-09T04:00:33","guid":{"rendered":"https:\/\/www.dotcom-tools.com\/web-performance\/?page_id=17324"},"modified":"2021-11-10T20:25:37","modified_gmt":"2021-11-11T02:25:37","slug":"make-javascript-and-css-external","status":"publish","type":"page","link":"https:\/\/www.dotcom-tools.com\/web-performance\/yslow\/make-javascript-and-css-external\/","title":{"rendered":"YSlow Optimizations &#8211; Make JavaScript and CSS External"},"content":{"rendered":"<p>[vc_row full_width=&#8221;stretch_row&#8221; gap=&#8221;25&#8243; equal_height=&#8221;yes&#8221; content_placement=&#8221;middle&#8221; css=&#8221;.vc_custom_1636408663624{padding-top: 100px !important;padding-bottom: 100px !important;background-image: url(https:\/\/www.dotcom-tools.com\/blog\/wp-content\/uploads\/2015\/09\/hero-section-with-description-3320.jpg?id=15799) !important;background-position: center !important;background-repeat: no-repeat !important;background-size: cover !important;}&#8221;][vc_column css=&#8221;.vc_custom_1636409653940{padding-top: 30px !important;padding-bottom: 30px !important;background-color: #e6eaef !important;}&#8221;][vc_custom_heading text=&#8221;<b>Make JavaScript and CSS External<\/b>&#8221; font_container=&#8221;tag:h1|font_size:40|text_align:center|color:%232b2b2b|line_height:1.5&#8243; use_theme_fonts=&#8221;yes&#8221; css=&#8221;.vc_custom_1636430347230{padding-top: 30px !important;padding-bottom: 30px !important;}&#8221;][\/vc_column][\/vc_row][vc_row margin_top=&#8221;40&#8243; margin_bottom=&#8221;30px&#8221; css=&#8221;.vc_custom_1636409410012{margin-bottom: 30px !important;}&#8221;][vc_column][vc_custom_heading text=&#8221;The Benefits of External CSS and JavaScript&#8221; font_container=&#8221;tag:h2|font_size:35|text_align:center|color:%232b2b2b|line_height:1.5&#8243; use_theme_fonts=&#8221;yes&#8221;][vc_column_text]<\/p>\n<p style=\"text-align: left;\">When a website is being created, web developers are posed with many different options and considerations that can affect how pages are displayed, and how fast they load. One of those considerations is deciding whether they want to write the CSS code, along with the JavaScript, into the HTML of the page itself. This helps to maintain continuity across pages and reduce the number of HTTP requests, but also increases the size of the page.<\/p>\n<p>[\/vc_column_text][vc_custom_heading text=&#8221;Additional Considerations for External JavaScript and CSS Files&#8221; font_container=&#8221;tag:h3|font_size:35|text_align:center|color:%232b2b2b|line_height:1.5&#8243; use_theme_fonts=&#8221;yes&#8221;][vc_column_text]<\/p>\n<p style=\"text-align: left;\">Another option for improving web page performance is making JavaScript and CSS external. What this means is that of instead of downloading all the CSS and JavaScript documents each time a visitor hits your web page, you set the JavaScript and CSS as external documents, and make use of caching through the browser. This helps to reduce the number of HTTP requests and size of the HTML documents. Situations where you would want to implement external JavaScript and CSS include situations where you reuse the same scripts and stylesheets in documents, or cases where users view multiple pages per user session, and you can cache those for faster page load times. Examples of where you would not want to make JavaScript and CSS external would be in situations where specific pages have only few visits per session, like a home page.<\/p>\n<p>[\/vc_column_text][\/vc_column][\/vc_row][vc_row margin_top=&#8221;60&#8243; margin_bottom=&#8221;0&#8243; css=&#8221;.vc_custom_1636429004633{margin-bottom: 15px !important;}&#8221;][vc_column width=&#8221;1\/3&#8243; css=&#8221;.vc_custom_1636429020721{padding-top: 60px !important;padding-bottom: 60px !important;background-color: #f6f6f6 !important;}&#8221;][vc_single_image image=&#8221;17233&#8243; alignment=&#8221;center&#8221; style=&#8221;vc_box_rounded&#8221;][vc_custom_heading text=&#8221;<b>Lighthouse<\/b>&#8221; font_container=&#8221;tag:p|font_size:20|text_align:center|color:%232b2b2b|line_height:1&#8243; use_theme_fonts=&#8221;yes&#8221;][vc_column_text]<\/p>\n<p style=\"text-align: center;\">Lighthouse is an open-source tool that is used to run an audit against your web pages and provides scores and suggestions for improving page performance, accessibility, SEO, and more.<\/p>\n<p>[\/vc_column_text][vc_btn title=&#8221;Learn More&#8221; style=&#8221;flat&#8221; color=&#8221;primary&#8221; align=&#8221;center&#8221; i_icon_fontawesome=&#8221;fas fa-location-arrow&#8221; add_icon=&#8221;true&#8221; link=&#8221;url:https%3A%2F%2Fwww.dotcom-tools.com%2Fweb-performance%2Flighthouse%2F&#8221;][\/vc_column][vc_column width=&#8221;1\/3&#8243; css=&#8221;.vc_custom_1636429033782{padding-top: 60px !important;padding-bottom: 60px !important;background-color: #f6f6f6 !important;}&#8221;][vc_single_image image=&#8221;17284&#8243; alignment=&#8221;center&#8221; style=&#8221;vc_box_rounded&#8221;][vc_custom_heading text=&#8221;<b>PageSpeed Terms<\/b>&#8221; font_container=&#8221;tag:p|font_size:20|text_align:center|color:%232b2b2b|line_height:1&#8243; use_theme_fonts=&#8221;yes&#8221;][vc_column_text]<\/p>\n<p style=\"text-align: center;\">PageSpeed Insights is a tool created by Google that reports on the performance of a page on both mobile and desktop devices, and provides suggestions on how that page may be improved.<\/p>\n<p>[\/vc_column_text][vc_btn title=&#8221;Learn More&#8221; style=&#8221;flat&#8221; color=&#8221;primary&#8221; align=&#8221;center&#8221; i_icon_fontawesome=&#8221;fas fa-location-arrow&#8221; add_icon=&#8221;true&#8221; link=&#8221;url:https%3A%2F%2Fwww.dotcom-tools.com%2Fweb-performance%2Fpagespeed%2F&#8221;][\/vc_column][vc_column width=&#8221;1\/3&#8243; css=&#8221;.vc_custom_1636429044787{padding-top: 60px !important;padding-bottom: 60px !important;background-color: #f6f6f6 !important;}&#8221;][vc_single_image image=&#8221;17281&#8243; alignment=&#8221;center&#8221; style=&#8221;vc_box_rounded&#8221;][vc_custom_heading text=&#8221;<b>YSlow<\/b>&#8221; font_container=&#8221;tag:p|font_size:20|text_align:center|color:%232b2b2b|line_height:1&#8243; use_theme_fonts=&#8221;yes&#8221;][vc_column_text]<\/p>\n<p style=\"text-align: center;\">YSlow is an open-source website analysis tool that can be used to identify web page performance issues. Learn more about the YSlow to enhance your web pages and the user experience.<\/p>\n<p>[\/vc_column_text][vc_btn title=&#8221;Learn More&#8221; style=&#8221;flat&#8221; color=&#8221;primary&#8221; align=&#8221;center&#8221; i_icon_fontawesome=&#8221;fas fa-location-arrow&#8221; add_icon=&#8221;true&#8221; link=&#8221;url:https%3A%2F%2Fwww.dotcom-tools.com%2Fweb-performance%2Fyslow%2F&#8221;][\/vc_column][\/vc_row]<\/p>\n","protected":false},"excerpt":{"rendered":"<p>[vc_row full_width=&#8221;stretch_row&#8221; gap=&#8221;25&#8243; equal_height=&#8221;yes&#8221; content_placement=&#8221;middle&#8221; css=&#8221;.vc_custom_1636408663624{padding-top: 100px !important;padding-bottom: 100px !important;background-image: url(https:\/\/www.dotcom-tools.com\/blog\/wp-content\/uploads\/2015\/09\/hero-section-with-description-3320.jpg?id=15799) !important;background-position: center !important;background-repeat: no-repeat !important;background-size: cover !important;}&#8221;][vc_column css=&#8221;.vc_custom_1636409653940{padding-top: 30px !important;padding-bottom: 30px !important;background-color: #e6eaef !important;}&#8221;][vc_custom_heading text=&#8221;Make JavaScript and CSS External&#8221; font_container=&#8221;tag:h1|font_size:40|text_align:center|color:%232b2b2b|line_height:1.5&#8243; use_theme_fonts=&#8221;yes&#8221; css=&#8221;.vc_custom_1636430347230{padding-top: 30px !important;padding-bottom: 30px !important;}&#8221;][\/vc_column][\/vc_row][vc_row margin_top=&#8221;40&#8243; margin_bottom=&#8221;30px&#8221; css=&#8221;.vc_custom_1636409410012{margin-bottom: 30px !important;}&#8221;][vc_column][vc_custom_heading text=&#8221;The Benefits of External CSS and JavaScript&#8221; font_container=&#8221;tag:h2|font_size:35|text_align:center|color:%232b2b2b|line_height:1.5&#8243; use_theme_fonts=&#8221;yes&#8221;][vc_column_text] When a website is&hellip;<\/p>\n","protected":false},"author":7,"featured_media":0,"parent":17257,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v17.6 (Yoast SEO v19.1) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\r\n<title>YSlow Optimizations - Make JavaScript and CSS External | Dotcom-Monitor Tools Blog<\/title>\r\n<meta name=\"description\" content=\"Dealing with JavaScript and CSS issues? Learn more about the benefits of making JavaScript and CSS external and other considerations. See how Dotcom-Tools can help!\" \/>\r\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\r\n<link rel=\"canonical\" href=\"https:\/\/www.dotcom-tools.com\/web-performance\/yslow\/make-javascript-and-css-external\/\" \/>\r\n<meta property=\"og:locale\" content=\"en_US\" \/>\r\n<meta property=\"og:type\" content=\"article\" \/>\r\n<meta property=\"og:title\" content=\"YSlow Optimizations - Make JavaScript and CSS External\" \/>\r\n<meta property=\"og:description\" content=\"Dealing with JavaScript and CSS issues? Learn more about the benefits of making JavaScript and CSS external and other considerations. See how Dotcom-Tools can help!\" \/>\r\n<meta property=\"og:url\" content=\"https:\/\/www.dotcom-tools.com\/web-performance\/yslow\/make-javascript-and-css-external\/\" \/>\r\n<meta property=\"og:site_name\" content=\"Dotcom-Monitor Tools Blog\" \/>\r\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/dotcommonitor\" \/>\r\n<meta property=\"article:modified_time\" content=\"2021-11-11T02:25:37+00:00\" \/>\r\n<meta name=\"twitter:card\" content=\"summary\" \/>\r\n<meta name=\"twitter:site\" content=\"@dotcom_monitor\" \/>\r\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"4 minutes\" \/>\r\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.dotcom-tools.com\/web-performance\/#website\",\"url\":\"https:\/\/www.dotcom-tools.com\/web-performance\/\",\"name\":\"Dotcom-Monitor Tools Blog\",\"description\":\"Let&#039;s Make the Web a Faster Place.\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.dotcom-tools.com\/web-performance\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.dotcom-tools.com\/web-performance\/yslow\/make-javascript-and-css-external\/#webpage\",\"url\":\"https:\/\/www.dotcom-tools.com\/web-performance\/yslow\/make-javascript-and-css-external\/\",\"name\":\"YSlow Optimizations - Make JavaScript and CSS External | Dotcom-Monitor Tools Blog\",\"isPartOf\":{\"@id\":\"https:\/\/www.dotcom-tools.com\/web-performance\/#website\"},\"datePublished\":\"2021-11-09T04:00:33+00:00\",\"dateModified\":\"2021-11-11T02:25:37+00:00\",\"description\":\"Dealing with JavaScript and CSS issues? Learn more about the benefits of making JavaScript and CSS external and other considerations. See how Dotcom-Tools can help!\",\"breadcrumb\":{\"@id\":\"https:\/\/www.dotcom-tools.com\/web-performance\/yslow\/make-javascript-and-css-external\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.dotcom-tools.com\/web-performance\/yslow\/make-javascript-and-css-external\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.dotcom-tools.com\/web-performance\/yslow\/make-javascript-and-css-external\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.dotcom-tools.com\/web-performance\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"YSlow Optimizations\",\"item\":\"https:\/\/www.dotcom-tools.com\/web-performance\/yslow\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"YSlow Optimizations &#8211; Make JavaScript and CSS External\"}]}]}<\/script>\r\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"YSlow Optimizations - Make JavaScript and CSS External | Dotcom-Monitor Tools Blog","description":"Dealing with JavaScript and CSS issues? Learn more about the benefits of making JavaScript and CSS external and other considerations. See how Dotcom-Tools can help!","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.dotcom-tools.com\/web-performance\/yslow\/make-javascript-and-css-external\/","og_locale":"en_US","og_type":"article","og_title":"YSlow Optimizations - Make JavaScript and CSS External","og_description":"Dealing with JavaScript and CSS issues? Learn more about the benefits of making JavaScript and CSS external and other considerations. See how Dotcom-Tools can help!","og_url":"https:\/\/www.dotcom-tools.com\/web-performance\/yslow\/make-javascript-and-css-external\/","og_site_name":"Dotcom-Monitor Tools Blog","article_publisher":"https:\/\/www.facebook.com\/dotcommonitor","article_modified_time":"2021-11-11T02:25:37+00:00","twitter_card":"summary","twitter_site":"@dotcom_monitor","twitter_misc":{"Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebSite","@id":"https:\/\/www.dotcom-tools.com\/web-performance\/#website","url":"https:\/\/www.dotcom-tools.com\/web-performance\/","name":"Dotcom-Monitor Tools Blog","description":"Let&#039;s Make the Web a Faster Place.","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.dotcom-tools.com\/web-performance\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.dotcom-tools.com\/web-performance\/yslow\/make-javascript-and-css-external\/#webpage","url":"https:\/\/www.dotcom-tools.com\/web-performance\/yslow\/make-javascript-and-css-external\/","name":"YSlow Optimizations - Make JavaScript and CSS External | Dotcom-Monitor Tools Blog","isPartOf":{"@id":"https:\/\/www.dotcom-tools.com\/web-performance\/#website"},"datePublished":"2021-11-09T04:00:33+00:00","dateModified":"2021-11-11T02:25:37+00:00","description":"Dealing with JavaScript and CSS issues? Learn more about the benefits of making JavaScript and CSS external and other considerations. See how Dotcom-Tools can help!","breadcrumb":{"@id":"https:\/\/www.dotcom-tools.com\/web-performance\/yslow\/make-javascript-and-css-external\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.dotcom-tools.com\/web-performance\/yslow\/make-javascript-and-css-external\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.dotcom-tools.com\/web-performance\/yslow\/make-javascript-and-css-external\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.dotcom-tools.com\/web-performance\/"},{"@type":"ListItem","position":2,"name":"YSlow Optimizations","item":"https:\/\/www.dotcom-tools.com\/web-performance\/yslow\/"},{"@type":"ListItem","position":3,"name":"YSlow Optimizations &#8211; Make JavaScript and CSS External"}]}]}},"_links":{"self":[{"href":"https:\/\/www.dotcom-tools.com\/web-performance\/wp-json\/wp\/v2\/pages\/17324"}],"collection":[{"href":"https:\/\/www.dotcom-tools.com\/web-performance\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.dotcom-tools.com\/web-performance\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.dotcom-tools.com\/web-performance\/wp-json\/wp\/v2\/users\/7"}],"replies":[{"embeddable":true,"href":"https:\/\/www.dotcom-tools.com\/web-performance\/wp-json\/wp\/v2\/comments?post=17324"}],"version-history":[{"count":2,"href":"https:\/\/www.dotcom-tools.com\/web-performance\/wp-json\/wp\/v2\/pages\/17324\/revisions"}],"predecessor-version":[{"id":17326,"href":"https:\/\/www.dotcom-tools.com\/web-performance\/wp-json\/wp\/v2\/pages\/17324\/revisions\/17326"}],"up":[{"embeddable":true,"href":"https:\/\/www.dotcom-tools.com\/web-performance\/wp-json\/wp\/v2\/pages\/17257"}],"wp:attachment":[{"href":"https:\/\/www.dotcom-tools.com\/web-performance\/wp-json\/wp\/v2\/media?parent=17324"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}