![\"Man](\"https:\/\/www.bruceclay.com\/wp-content\/uploads\/2023\/12\/updating-website-800.jpg\")
<\/p>\n<\/p>\n
So you want a better-performing website. At the most basic level, you need to make sure that search engines can access the body content on a webpage as quickly as possible and that the page loads fast.<\/p>\n
That said, there are two simple SEO best practices that can help with both of those requirements, and those are:<\/p>\n
In this article, I\u2019ll explain why and give some simple steps to get started.<\/p>\n
Cascading Style Sheets (CSS) describe how HTML code should be displayed on a webpage to create the look and feel of a website, for example, fonts and colors.<\/p>\n
JavaScript is a programming language that enables interactivity on webpages, for example, a search box, audio and video, or maps.<\/p>\n
You want your website code to be search engine friendly. So, you need to be sure that the underlying code makes it easy for search engine spiders to crawl and understand what the webpages are about.<\/p>\n
This needs to happen so search engines can determine the relevance of a search query. One of the first things search engines should crawl is the body content on a webpage, not unnecessary lines of code.<\/p>\n
You also want your website to be fast. Search engines like Google care about webpage performance for user experience \u2014 so much so that they released their page experience algorithm update<\/a> with ranking signals devoted to it.<\/p>\n Both CSS and JavaScript can clutter up a webpage, make it slower to load and harder for search engines to crawl. You want the actual body content on a webpage to be accessible in the first hundred lines of code.<\/p>\n Externalizing these files is an easy way to remedy the problems I just mentioned. Doing this can speed up page load time, significantly help rankings and save crawl budget.<\/p>\n Creating an external CSS file gives you one place to control the look of the website, so it\u2019s much more efficient than editing every single page of a website when you want to make a change.<\/p>\n When you have a CSS file, you only need to make changes to the external file and those changes are applied to the entire site.<\/p>\n Having an external CSS file has other benefits, too. It allows you to remove inline formatting, such as font tags, and replace them with CSS tags that instruct what style to apply. This results in less code cluttering the webpage.<\/p>\n Less code means smaller file sizes. Smaller file sizes mean web pages load faster.<\/p>\n Creating an external file for JavaScript has similar benefits. When you move the JavaScript off individual webpages and into an external file, your webpages only need a single line of code that calls the JavaScript file for information.<\/p>\n JavaScript tends to be long and cumbersome, so doing this one simple thing could cut the size of a webpage in half.<\/p>\n It\u2019s easy to check if your CSS and JavaScript is externalized. Go to your website homepage and look at the source code. To view the source, right-click on the page and select: \u201cview page source.\u201d<\/p>\n Here is an example of a sample of code from non-externalized JavaScript on a webpage:<\/p>\n <script language=\u201djavascript\u201d><\/p>\n var _pn=\u201dYour+No-Fault+Rights\u201d; \/\/page name(s)<\/p>\n var _mlc=\u201dNo+Fault+Advice\u201d; \/\/multi-level content category<\/p>\n var _cp=\u201dnull\u201d; \/\/campaign<\/p>\n var _acct=\u201dWE531126G4MC09EN3\u201d; \/\/account number(s)<\/p>\n var _pndef=\u201dtitle\u201d; \/\/default page name<\/p>\n var _ctdef=\u201dfull\u201d; \/\/default content category<\/p>\n var _prc=\u201d\u201d; \/\/commerce price<\/p>\n var _oid=\u201d\u201d; \/\/commerce order<\/p>\n var _dlf=\u201d\u201d; \/\/download filter<\/p>\n var _elf=\u201d\u201d; \/\/exit link filter<\/p>\n var _epg=\u201d\u201d; \/\/event page identifier<\/p>\n <\/script><\/p>\n This is just a sample of how JavaScript can take up valuable space with the page code. It\u2019s normal that websites will have many lines (30+) of JavaScript that should be externalized.<\/p>\n Alternatively, here is what it would look like with an external JavaScript file:<\/p>\n <script type=”text\/javascript” src=”\/sample.js”><\/script><\/p>\n Here is an example of a non-externalized style sheet:<\/p>\n .content { clear: left;<\/p>\n background-color: #ffffff;<\/p>\n background-image: URL(\u201c\/images\/movie_reel2.jpg\u201d); \/* small reel *\/<\/p>\n \/* background-image: URL(\u201c\/images\/movie_reel.JPG\u201d); large reel *\/<\/p>\n background-position: 100% 100%; \/* lower right corner *\/<\/p>\n background-repeat: no-repeat;<\/p>\n border: 2px solid #666666;<\/p>\n border-style: solid solid none solid;<\/p>\n padding: .5em 1em 1em 1em;<\/p>\n margin-bottom: 0em;<\/p>\n margin-top: 0em;<\/p>\n text-align: left;<\/p>\n }<\/p>\n h1 {<\/p>\n font-family: Georgia, Times New Roman, Times, sans-serif;<\/p>\n font-size: 18px;<\/p>\n font-style: italic;<\/p>\n font-weight: bold;<\/p>\n color: #003399;<\/p>\n text-align: center;<\/p>\n }<\/p>\n It is common for websites to have CSS hardcoded into a webpage rather than including it in a single file to be called from numerous pages within a website.<\/p>\n Here is what it would look like with an external CSS file:<\/p>\n <link rel=”stylesheet” href=”styles.css”><\/p>\n The first thing to mention is that sometimes it\u2019s necessary to have JavaScript code on a webpage, for example, for accurate tracking or page functionality.<\/p>\n Aside from tracking and functionality, not all JavaScript code is detrimental to page speed and should be externalized.<\/p>\n In fact, in some cases using in-line JavaScript can speed up the page load time and performance, for instance, in cases where JavaScript blocks the rendering of the page.<\/p>\n Using in-line JavaScript at the top of the page may enable content at the top of the page to become visible to users without having to wait for large JavaScript files to load.<\/p>\n So, here\u2019s how to externalize JavaScript:<\/p>\n When search engines crawl the webpage, they will only have one line of code to read before they go on to the rest of the page.<\/p>\n Subsequently, this can help with Google\u2019s page experience algorithm update, specifically, First Input Delay.<\/a> (Note that FID will be replaced by Interaction to Next Paint (INP)<\/a> in March 2024.)<\/p>\n To externalize style sheets, simply follow the same instructions as for the JavaScript file, except save the file with a .css file extension. In the original webpage code you\u2019ll replace all the CSS coding with the following:<\/p>\n <link href=\u201dcssfilename\u201d rel=\u201dstylesheet\u201d type=\u201dtext\/css\u201d><\/p>\n Once again you are left with one line of code on your original page, allowing for simpler site indexing for the spiders.<\/p>\n Externalizing JavaScript and CSS won’t fix your website performance problems, but it\u2019s a great start.<\/p>\n One client we worked with implemented these two best practices and reduced 20,000 lines of code to 1,500. The website subsequently saw a significant improvement in rankings and moved to the top of organic search results for many keywords.<\/p>\n So, yes, it is effective and a good place to start as you are improving the performance of your web pages.<\/p>\n Need help boosting your website’s speed and search ranking? Contact us for a free consultation<\/a>.<\/strong><\/em><\/p>\n Optimizing your website’s performance is crucial for user satisfaction and search engine ranking in the dynamic landscape of web development. Leveraging CSS and JavaScript effectively can significantly elevate your site’s speed and functionality. Let’s delve into two simple yet powerful techniques to boost your website’s performance.<\/p>\n Minify and Concatenate CSS and JavaScript Files<\/strong><\/p>\n When it comes to optimizing website speed, reducing file sizes is paramount. Combining multiple CSS or JavaScript files into one minimizes HTTP requests, enhancing load times. Minification removes unnecessary characters (whitespace, comments) without altering code functionality.<\/p>\n Insightful Tip:<\/strong> <\/em>Employ build tools like Grunt or Gulp for automated minification and concatenation processes. Consider using Content Delivery Networks (CDNs) for quicker file delivery.<\/p>\n Implement Lazy Loading for Non-Critical Resources<\/strong><\/p>\n Lazy loading postpones the loading of non-essential resources until they’re needed. For instance, images below the fold or secondary JavaScript can be loaded asynchronously, boosting initial page load speed.<\/p>\n Insightful Tip:<\/strong><\/em> Utilize the `loading=”lazy”` attribute for images to instruct browsers to load them only when they come into the viewport, optimizing user experience and load times.<\/p>\n Buyer Intent Search Terms and Their Role<\/strong><\/p>\n Understanding buyer intent search terms is pivotal for effective optimization. Terms like “website speed improvement techniques,” “CSS and JavaScript optimization,” or “lazy loading implementation” showcase a user’s intent to enhance website performance. Integrating these terms into your content aligns with user queries, improving visibility.<\/p>\n The Impact of Performance on User Experience and SEO<\/strong><\/p>\n Optimized website performance directly influences user experience, increasing engagement and reducing bounce rates. Moreover, search engines prioritize faster-loading sites, positively impacting SEO rankings.<\/p>\n Balancing Aesthetics with Performance<\/strong><\/p>\n While optimizing performance is crucial, maintaining a visually appealing website is equally vital. Finding the balance between aesthetics and functionality ensures an engaging user experience without compromising speed.<\/p>\n The Role of Continuous Monitoring and Testing<\/strong><\/p>\n Regularly monitoring website performance metrics and conducting tests is key to sustaining optimal functionality. Tools like Google PageSpeed Insights and Lighthouse assist in identifying performance bottlenecks, enabling timely adjustments.<\/p>\n Future Trends: Evolving Strategies for Optimal Performance<\/strong><\/p>\n As technology advances, emerging trends like HTTP\/3 and enhanced JavaScript frameworks continue to reshape performance optimization strategies. Staying updated on these trends ensures your website remains competitive and well-optimized.<\/p>\n Enhancing your website’s performance through CSS and JavaScript optimizations is a cornerstone of successful web development. By employing techniques like file minification, lazy loading and staying attuned to evolving trends, you’re enriching user experience and bolstering your site’s visibility in the digital realm.<\/p>\n Step-by-Step Procedure: Enhancing Website Performance<\/strong><\/p>\n This comprehensive step-by-step guide provides a detailed roadmap to effectively enhance your website’s performance using CSS and JavaScript optimization techniques. Following these steps ensures a streamlined, high-performing website that resonates with user expectations and search engine algorithms.<\/p>\n","protected":false},"excerpt":{"rendered":" Learn how to boost your website’s performance with simple steps: externalize CSS and JavaScript. Speed up your site and improve search rankings effortlessly.<\/p>\n","protected":false},"author":35,"featured_media":207447,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"content-type":"","footnotes":""},"categories":[4],"tags":[2082,2083,2084,1618,1609],"acf":[],"yoast_head":"Benefits of Externalizing CSS<\/h3>\n
Benefits of Externalizing JavaScript<\/h3>\n
<\/a>Is Your JavaScript and CSS Externalized Already?<\/h2>\n
![\"Screenshot](\"https:\/\/www.bruceclay.com\/wp-content\/uploads\/2023\/12\/bci-search-marketing-google-user-content.png\")
<\/a>How to Externalize JavaScript<\/h2>\n
\n
\n<script language=\u201dJavaScript\u201d src=\u201dpath\/filesource.js\u201d><\/script><\/li>\n<\/a>How to Externalize CSS<\/h2>\n
<\/a>Small Steps, Big Impact<\/h2>\n
<\/a>FAQ: How can I enhance my website’s performance using two simple steps involving CSS and JavaScript?<\/h3>\n
\n