{"id":17649,"date":"2021-11-15T13:05:20","date_gmt":"2021-11-15T19:05:20","guid":{"rendered":"https:\/\/www.dotcom-tools.com\/web-performance\/?page_id=17649"},"modified":"2021-11-15T13:05:20","modified_gmt":"2021-11-15T19:05:20","slug":"replace-large-javascript-libraries-with-smaller-alternatives","status":"publish","type":"page","link":"https:\/\/www.dotcom-tools.com\/web-performance\/lighthouse\/replace-large-javascript-libraries-with-smaller-alternatives\/","title":{"rendered":"Lighthouse Optimizations – Replace Large JavaScript Libraries with Smaller Alternatives"},"content":{"rendered":"

[vc_row full_width=”stretch_row” gap=”25″ equal_height=”yes” content_placement=”middle” css=”.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;}”][vc_column css=”.vc_custom_1636409653940{padding-top: 30px !important;padding-bottom: 30px !important;background-color: #e6eaef !important;}”][vc_custom_heading text=”Replace Large JavaScript Libraries with Smaller Alternatives<\/b>” font_container=”tag:h1|font_size:40|text_align:center|color:%232b2b2b|line_height:1.5″ use_theme_fonts=”yes” css=”.vc_custom_1637003058716{padding-top: 30px !important;padding-bottom: 30px !important;}”][\/vc_column][\/vc_row][vc_row margin_top=”40″ margin_bottom=”30px” css=”.vc_custom_1636409410012{margin-bottom: 30px !important;}”][vc_column][vc_custom_heading text=”How JavaScript Bundles Affect Website Performance” font_container=”tag:h2|font_size:33|text_align:center|color:%232b2b2b|line_height:1.5″ use_theme_fonts=”yes”][vc_column_text]<\/p>\n

Another Lighthouse warning may appear if your JavaScript bundles are unnecessarily too large. Large JavaScript bundles will increase the time the browser needs to download, parse, and process JavaScript files. Instead, developers should try to reduce the size of JavaScript files but try to maintain the core functionality. Many older JavaScript packages and frameworks contain pre-defined dependencies and files that are not necessarily needed. While it may provide developers with an easier and quicker way to develop applications, it can cause your JavaScript libraries to be bloated and decrease performance. One method to avoid this from happening is to select libraries that are better suited for your applications. Additionally, reviewing the required dependencies and using only the ones required. This may be a time-consuming task, but it will load better and provide users with better overall experience. <\/p>\n

[\/vc_column_text][\/vc_column][\/vc_row][vc_row margin_top=”60″ margin_bottom=”0″ css=”.vc_custom_1636595147911{margin-bottom: 15px !important;}”][vc_column width=”1\/3″ css=”.vc_custom_1636595227743{padding-top: 60px !important;padding-bottom: 60px !important;padding-left: 10px !important;background-color: #f6f6f6 !important;}”][vc_single_image image=”17233″ alignment=”center” style=”vc_box_rounded”][vc_custom_heading text=”Lighthouse<\/b>” font_container=”tag:p|font_size:20|text_align:center|color:%232b2b2b|line_height:1″ use_theme_fonts=”yes”][vc_column_text]<\/p>\n

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

[\/vc_column_text][vc_btn title=”Learn More” style=”flat” color=”primary” align=”center” i_icon_fontawesome=”fas fa-location-arrow” add_icon=”true” link=”url:https%3A%2F%2Fwww.dotcom-tools.com%2Fweb-performance%2Flighthouse%2F”][\/vc_column][vc_column width=”1\/3″ css=”.vc_custom_1636595173585{padding-top: 60px !important;padding-bottom: 60px !important;background-color: #f6f6f6 !important;}”][vc_single_image image=”17284″ alignment=”center” style=”vc_box_rounded”][vc_custom_heading text=”PageSpeed Terms<\/b>” font_container=”tag:p|font_size:20|text_align:center|color:%232b2b2b|line_height:1″ use_theme_fonts=”yes”][vc_column_text]<\/p>\n

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

[\/vc_column_text][vc_btn title=”Learn More” style=”flat” color=”primary” align=”center” i_icon_fontawesome=”fas fa-location-arrow” add_icon=”true” link=”url:https%3A%2F%2Fwww.dotcom-tools.com%2Fweb-performance%2Fpagespeed%2F”][\/vc_column][vc_column width=”1\/3″ css=”.vc_custom_1636595196399{padding-top: 60px !important;padding-right: 10px !important;padding-bottom: 60px !important;background-color: #f6f6f6 !important;}”][vc_single_image image=”17281″ alignment=”center” style=”vc_box_rounded”][vc_custom_heading text=”YSlow<\/b>” font_container=”tag:p|font_size:20|text_align:center|color:%232b2b2b|line_height:1″ use_theme_fonts=”yes”][vc_column_text]<\/p>\n

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

[\/vc_column_text][vc_btn title=”Learn More” style=”flat” color=”primary” align=”center” i_icon_fontawesome=”fas fa-location-arrow” add_icon=”true” link=”url:https%3A%2F%2Fwww.dotcom-tools.com%2Fweb-performance%2Fyslow%2F”][\/vc_column][\/vc_row]<\/p>\n","protected":false},"excerpt":{"rendered":"

[vc_row full_width=”stretch_row” gap=”25″ equal_height=”yes” content_placement=”middle” css=”.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;}”][vc_column css=”.vc_custom_1636409653940{padding-top: 30px !important;padding-bottom: 30px !important;background-color: #e6eaef !important;}”][vc_custom_heading text=”Replace Large JavaScript Libraries with Smaller Alternatives” font_container=”tag:h1|font_size:40|text_align:center|color:%232b2b2b|line_height:1.5″ use_theme_fonts=”yes” css=”.vc_custom_1637003058716{padding-top: 30px !important;padding-bottom: 30px !important;}”][\/vc_column][\/vc_row][vc_row margin_top=”40″ margin_bottom=”30px” css=”.vc_custom_1636409410012{margin-bottom: 30px !important;}”][vc_column][vc_custom_heading text=”How JavaScript Bundles Affect Website Performance” font_container=”tag:h2|font_size:33|text_align:center|color:%232b2b2b|line_height:1.5″ use_theme_fonts=”yes”][vc_column_text] Another Lighthouse warning…<\/p>\n","protected":false},"author":7,"featured_media":0,"parent":17260,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":[],"yoast_head":"\r\nLighthouse Optimizations - Replace Large JavaScript Libraries with Smaller Alternatives | Dotcom-Monitor Tools Blog<\/title>\r\n<meta name=\"description\" content=\"A Lighthouse recommendation will appear if your JavaScript bundles are too large. Learn more about how to fix this Lighthouse optimization!\" \/>\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\/lighthouse\/replace-large-javascript-libraries-with-smaller-alternatives\/\" \/>\r\n<meta property=\"og:locale\" content=\"en_US\" \/>\r\n<meta property=\"og:type\" content=\"article\" \/>\r\n<meta property=\"og:title\" content=\"Lighthouse Optimizations - Replace Large JavaScript Libraries with Smaller Alternatives\" \/>\r\n<meta property=\"og:description\" content=\"A Lighthouse recommendation will appear if your JavaScript bundles are too large. Learn more about how to fix this Lighthouse optimization!\" \/>\r\n<meta property=\"og:url\" content=\"https:\/\/www.dotcom-tools.com\/web-performance\/lighthouse\/replace-large-javascript-libraries-with-smaller-alternatives\/\" \/>\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 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=\"3 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'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\/lighthouse\/replace-large-javascript-libraries-with-smaller-alternatives\/#webpage\",\"url\":\"https:\/\/www.dotcom-tools.com\/web-performance\/lighthouse\/replace-large-javascript-libraries-with-smaller-alternatives\/\",\"name\":\"Lighthouse Optimizations - Replace Large JavaScript Libraries with Smaller Alternatives | Dotcom-Monitor Tools Blog\",\"isPartOf\":{\"@id\":\"https:\/\/www.dotcom-tools.com\/web-performance\/#website\"},\"datePublished\":\"2021-11-15T19:05:20+00:00\",\"dateModified\":\"2021-11-15T19:05:20+00:00\",\"description\":\"A Lighthouse recommendation will appear if your JavaScript bundles are too large. Learn more about how to fix this Lighthouse optimization!\",\"breadcrumb\":{\"@id\":\"https:\/\/www.dotcom-tools.com\/web-performance\/lighthouse\/replace-large-javascript-libraries-with-smaller-alternatives\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.dotcom-tools.com\/web-performance\/lighthouse\/replace-large-javascript-libraries-with-smaller-alternatives\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.dotcom-tools.com\/web-performance\/lighthouse\/replace-large-javascript-libraries-with-smaller-alternatives\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.dotcom-tools.com\/web-performance\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Lighthouse Optimizations\",\"item\":\"https:\/\/www.dotcom-tools.com\/web-performance\/lighthouse\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Lighthouse Optimizations – Replace Large JavaScript Libraries with Smaller Alternatives\"}]}]}<\/script>\r\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Lighthouse Optimizations - Replace Large JavaScript Libraries with Smaller Alternatives | Dotcom-Monitor Tools Blog","description":"A Lighthouse recommendation will appear if your JavaScript bundles are too large. Learn more about how to fix this Lighthouse optimization!","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\/lighthouse\/replace-large-javascript-libraries-with-smaller-alternatives\/","og_locale":"en_US","og_type":"article","og_title":"Lighthouse Optimizations - Replace Large JavaScript Libraries with Smaller Alternatives","og_description":"A Lighthouse recommendation will appear if your JavaScript bundles are too large. Learn more about how to fix this Lighthouse optimization!","og_url":"https:\/\/www.dotcom-tools.com\/web-performance\/lighthouse\/replace-large-javascript-libraries-with-smaller-alternatives\/","og_site_name":"Dotcom-Monitor Tools Blog","article_publisher":"https:\/\/www.facebook.com\/dotcommonitor","twitter_card":"summary","twitter_site":"@dotcom_monitor","twitter_misc":{"Est. reading time":"3 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'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\/lighthouse\/replace-large-javascript-libraries-with-smaller-alternatives\/#webpage","url":"https:\/\/www.dotcom-tools.com\/web-performance\/lighthouse\/replace-large-javascript-libraries-with-smaller-alternatives\/","name":"Lighthouse Optimizations - Replace Large JavaScript Libraries with Smaller Alternatives | Dotcom-Monitor Tools Blog","isPartOf":{"@id":"https:\/\/www.dotcom-tools.com\/web-performance\/#website"},"datePublished":"2021-11-15T19:05:20+00:00","dateModified":"2021-11-15T19:05:20+00:00","description":"A Lighthouse recommendation will appear if your JavaScript bundles are too large. Learn more about how to fix this Lighthouse optimization!","breadcrumb":{"@id":"https:\/\/www.dotcom-tools.com\/web-performance\/lighthouse\/replace-large-javascript-libraries-with-smaller-alternatives\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.dotcom-tools.com\/web-performance\/lighthouse\/replace-large-javascript-libraries-with-smaller-alternatives\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.dotcom-tools.com\/web-performance\/lighthouse\/replace-large-javascript-libraries-with-smaller-alternatives\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.dotcom-tools.com\/web-performance\/"},{"@type":"ListItem","position":2,"name":"Lighthouse Optimizations","item":"https:\/\/www.dotcom-tools.com\/web-performance\/lighthouse\/"},{"@type":"ListItem","position":3,"name":"Lighthouse Optimizations – Replace Large JavaScript Libraries with Smaller Alternatives"}]}]}},"_links":{"self":[{"href":"https:\/\/www.dotcom-tools.com\/web-performance\/wp-json\/wp\/v2\/pages\/17649"}],"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=17649"}],"version-history":[{"count":2,"href":"https:\/\/www.dotcom-tools.com\/web-performance\/wp-json\/wp\/v2\/pages\/17649\/revisions"}],"predecessor-version":[{"id":17651,"href":"https:\/\/www.dotcom-tools.com\/web-performance\/wp-json\/wp\/v2\/pages\/17649\/revisions\/17651"}],"up":[{"embeddable":true,"href":"https:\/\/www.dotcom-tools.com\/web-performance\/wp-json\/wp\/v2\/pages\/17260"}],"wp:attachment":[{"href":"https:\/\/www.dotcom-tools.com\/web-performance\/wp-json\/wp\/v2\/media?parent=17649"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}