The purpose of this post is to help improve your pages’ performance for both visitors and search engines. The HTML, CSS, JavaScript are those parts of your website, which are the most accessible and you can tweak them easily to see your site perform better. If these are flawed, then you can lose out on your SEO efforts.
The main coding issues that have a direct but unwanted impact on your optimization processes are-
- An extremely high code to content ratio
- Search engines unable to index your pages properly due to errors ( invalid code can cause problems with the search engines )
- Placement of content within the code structure
- Heavy code creating slow downloads
It is a known fact and practice that rankings of a page go up if the page content is moved up close to the start of your HTML code. This is because the search engines take the words near the start of your HTML code to be more important. So, your primary content must be placed close to the HTML code for the engines to index it, but usually most websites are unable to do this. Why? Because the pages use elaborate HTML tables in creating the page’s left navigation and masthead. This leads to the content and the keywords pushed down and away from the HTML code. Cluttering the head of the website with bloated JavaScript code or embedded Cascading Style Sheets (CSS), leads to the keywords being pushed further down in the HTML file.
To deal with bloated CSS and JavaScript, here is what you can do-
External CSS
External CSS refers to the placement of the styles that affect the whole site in an external file on the server and referenced from each individual page. Every page on the site will be affected by the changes made here.
Unloading a Cascading Style Sheet can be done by cutting and pasting your style sheet into a separate file (not the one with JavaScript). Make a note here that the external file must have just the body of the style sheet, and not the STYLE tags surrounding the CSS code.
Here is how you will modify the web page to reference the external CSS file-
<LINK REL=”stylesheet” HREF=”mystylesheet.css” TYPE=”text/css”>
Remember that the link tag must be in the head section of the page, and must come before any referenced to the set CSS styles. This is necessary to follow proper HTML coding.
External JavaScript
For lighter webpages, it is advised that the instead of placing your JavaScript code on the page, you can place it in an external file. The thing to keep in mind here is that while placing JavaScript in an external file, do not surround the JavaScript code with SCRIPT tags. Once done with the shifting, then you have to modify your main HTML page to reference the external JavaScript. Do it in the manner given below:
<SCRIPT SRC=”myscript.js”></SCRIPT>
This can be understood in a very simple manner- go through your page for the appearances of the <SCRIPT> tag. Then get rid of anything between that tag and the closing script tag. Then place it in a separate file before saving it. Then reference the file with a Script SRC tag.
Benefits of Offloading CSS And JavaScript
There are some clear benefits to using external CSS and JavaScript files for your on-page formatting.
Site Loads Faster
By default, when your external CSS and JavaScript files (css or .js files) are downloaded, they remain in the browsers cache. So, even if a visitor navigates away from the landing page, then their browser will have your stylesheets and JavaScript files- hence,there will be no need to download them again. The result- Each subsequent page will be loaded much faster.
Make Multiple Changes At Once
The other benefit of external CSS and JavaScript is that you just have to make changes to your script in one location and they will be show up in all the pages that reference the script. This makes editing your site-wide styles much easier. For example with a couple of edits in CSS, you can change all your links to blue or change all your font!
The Takeaway-
When we talk of slimming our web pages, you must remember that by removing your CSS and JavaScripts off the page, code is streamlined. The pages load faster and the code-to-content ratio is reduced leading to better search engine rankings.
