Improve Your Website Performance in Two Simple Steps

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.

That said, there are two simple SEO best practices that can help with both of those requirements, and those are:

1. Externalizing CSS (cascading style sheets)
2. Externalizing JavaScript

In this article, I’ll explain why and give some simple steps to get started.

• What is CSS? 
• What is Javascript? 
• Why externalize Javascript and CSS? 
• Is your JavaScript and CSS externalized already? 
• How to externalize Javascript
• How to externalize CSS
• Small steps, big impact 
• FAQ: How can I enhance my website’s performance using two simple steps involving CSS and JavaScript?

What Is CSS?

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.

What Is JavaScript?

JavaScript is a programming language that enables interactivity on webpages, for example, a search box, audio and video, or maps.

Why Externalize JavaScript and CSS?

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.

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.

You also want your website to be fast. Search engines like Google care about webpage performance for user experience — so much so that they released their page experience algorithm update with ranking signals devoted to it.

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.

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.

Benefits of Externalizing CSS

Creating an external CSS file gives you one place to control the look of the website, so it’s much more efficient than editing every single page of a website when you want to make a change.

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.

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.

Less code means smaller file sizes. Smaller file sizes mean web pages load faster.

Benefits of Externalizing JavaScript

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.

JavaScript tends to be long and cumbersome, so doing this one simple thing could cut the size of a webpage in half.

Is Your JavaScript and CSS Externalized Already?

It’s 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: “view page source.”

Here is an example of a sample of code from non-externalized JavaScript on a webpage:

<script language=”javascript”>

var _pn=”Your+No-Fault+Rights”; //page name(s)

var _mlc=”No+Fault+Advice”; //multi-level content category

var _cp=”null”; //campaign

var _acct=”WE531126G4MC09EN3”; //account number(s)

var _pndef=”title”; //default page name

var _ctdef=”full”; //default content category

var _prc=””; //commerce price

var _oid=””; //commerce order

var _dlf=””; //download filter

var _elf=””; //exit link filter

var _epg=””; //event page identifier

</script>

This is just a sample of how JavaScript can take up valuable space with the page code. It’s normal that websites will have many lines (30+) of JavaScript that should be externalized.

Alternatively, here is what it would look like with an external JavaScript file:

<script type=”text/javascript” src=”/sample.js”></script>

Here is an example of a non-externalized style sheet:

.content { clear: left;

background-color: #ffffff;

background-image: URL(“/images/movie_reel2.jpg”); /* small reel */

/* background-image: URL(“/images/movie_reel.JPG”); large reel */

background-position: 100% 100%; /* lower right corner */

background-repeat: no-repeat;

border: 2px solid #666666;

border-style: solid solid none solid;

padding: .5em 1em 1em 1em;

margin-bottom: 0em;

margin-top: 0em;

text-align: left;

}

h1 {

font-family: Georgia, Times New Roman, Times, sans-serif;

font-size: 18px;

font-style: italic;

font-weight: bold;

color: #003399;

text-align: center;

}

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.

Here is what it would look like with an external CSS file:

<link rel=”stylesheet” href=”styles.css”>

How to Externalize JavaScript

The first thing to mention is that sometimes it’s necessary to have JavaScript code on a webpage, for example, for accurate tracking or page functionality.

Aside from tracking and functionality, not all JavaScript code is detrimental to page speed and should be externalized.

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.

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.

So, here’s how to externalize JavaScript:

1. Identify the JavaScript code that you want to externalize by locating the opening and closing <script> tag with the HTML source code of the webpage.
2. Cut the javascript code, which is between <script> and </script>.
3. Using a text editor like Notepad, create a new document and paste the JS code into the new blank document.
4. Save the file with the file extension “.js”.
5. Upload the file to your server and make a note of its path.
6. Go back to your original html file and insert the following, where “path/filesource.js” is the URL of the newly created .js file:
   <script language=”JavaScript” src=”path/filesource.js”></script>
7. Now, the embedded JavaScript code is replaced with just one line.

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.

Subsequently, this can help with Google’s page experience algorithm update, specifically, First Input Delay. (Note that FID will be replaced by Interaction to Next Paint (INP) in March 2024.)

How to Externalize CSS

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’ll replace all the CSS coding with the following:

<link href=”cssfilename” rel=”stylesheet” type=”text/css”>

Once again you are left with one line of code on your original page, allowing for simpler site indexing for the spiders.

Small Steps, Big Impact

Externalizing JavaScript and CSS won’t fix your website performance problems, but it’s a great start.

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.

So, yes, it is effective and a good place to start as you are improving the performance of your web pages.

Need help boosting your website’s speed and search ranking? Contact us for a free consultation.

FAQ: How can I enhance my website’s performance using two simple steps involving CSS and JavaScript?

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.

Minify and Concatenate CSS and JavaScript Files

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.

Insightful Tip: Employ build tools like Grunt or Gulp for automated minification and concatenation processes. Consider using Content Delivery Networks (CDNs) for quicker file delivery.

Implement Lazy Loading for Non-Critical Resources

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.

Insightful Tip: 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.

Buyer Intent Search Terms and Their Role

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.

The Impact of Performance on User Experience and SEO

Optimized website performance directly influences user experience, increasing engagement and reducing bounce rates. Moreover, search engines prioritize faster-loading sites, positively impacting SEO rankings.

Balancing Aesthetics with Performance

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.

The Role of Continuous Monitoring and Testing

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.

Future Trends: Evolving Strategies for Optimal Performance

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.

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.

Step-by-Step Procedure: Enhancing Website Performance

1. Assess Current Performance Metrics: Use tools like Google PageSpeed Insights to identify areas for improvement.
2. Implement CSS and JavaScript Minification: Utilize build tools or online services to compress and combine files.
3. Consider Content Delivery Networks (CDNs): Opt for CDNs for faster file delivery.
4. Evaluate Lazy Loading Opportunities: Identify non-critical resources suitable for lazy loading.
5. Implement Lazy Loading: Integrate the `loading=”lazy”` attribute for images or asynchronous loading of secondary scripts.
6. Research Buyer Intent Search Terms: Understand user queries related to website performance.
7. Integrate Buyer Intent Keywords: Incorporate relevant terms in your content for improved visibility.
8. Monitor Performance Metrics: Regularly analyze metrics and adjust strategies accordingly.
9. Balance Aesthetics and Functionality: Ensure visual appeal without compromising speed.
10. Stay Updated on Emerging Trends: Follow developments in web optimization for future-proofing strategies.

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.