5 Steps to Clean Up the Code on Your Squarespace Website
At the beginning of each year, I like to review and update my website. I ensure that my pages reflect my current offers and align with any changes I have made in my business. Additionally, I check if I am following best practices and perform an SEO check based on the latest ranking factors.
Furthermore, I clean up the code on my site. It is crucial to adhere to best practices when it comes to code on your site. Not only does this save you time when analyzing or debugging your code, but it also ensures that your site runs smoothly and your site speed is not impacted by your code.
So, grab your coffee (or your preferred "get to work" beverage) and follow these five steps to ensure clean, organized, and optimized code for your website.
Step 1: Make sure all your code is in the right spot
There are several areas that code can be placed on your site. The two main areas are the Site’s Code Injection and the Custom CSS. These can be found by going to Website and choosing Website Tools under the Utility Menu. You can also find these areas by clicking the forward slash on your keyboard (/) and then typing “Code” or “CSS” into the search. You can also add code to a single page by clicking on the gear icon next to the page and choosing Advanced. Finally, you can add code directly to a page using a Code Block.
However, the location of your code is crucial. If code is scattered throughout your site, it becomes difficult to analyze for duplicates or ensure that it is up to date. Let's discuss the optimal placement for your code.
CSS
CSS adds style to elements on your site. For the most part, all your CSS should be in the Custom CSS Editor. There is never a reason to have it in the Code Injection portion of your site.
In some cases, you may have CSS in an individual page’s code injection. If you do, it will be in between <style></style> tags. The main reason I have done this is to hide the header and footer of a page or if I have added a plugin to a specific page and don’t want to load the CSS on every page by putting it into the Custom CSS Editor. However, CSS loads quickly so don’t worry about having CSS in the Custom CSS Editor that is specific to one page or element.
Occasionally, I may have CSS in a code block on a page as inline CSS. This is usually done if I have also used HTML in the code block and I want to change something small about the element such as the color.
Javascript
Javascript adds functionality to your site. It is written between <script></script> tags. You may have been given some Javascript when you purchased a plugin or if you are trying to embed something on your site from a third party.
Javascript is the biggest culprit when it comes to code breaking or code slowing down your site. So it can be very helpful if you have it all in one place. Most Javascript should be placed in the Footer part of the Code Injection.
If you are embedding something from a third party such as a Newsletter Form, you may also have it in a code block on a page. If the Javascript is for a plugin that you are only applying to one page, you may have it in the Page’s Code Injection.
There is never a reason to have Javascript in the Custom CSS Editor.
HTML
HTML adds elements to your site such as text and images. If you have added HTML to your site it is because you want to be able to have full control over the style of the element or the element is not available as a Squarespace Block. If the element needs to be shown on all pages of the website such as a custom header or chat box, it will need to be in the Code Injection. If you want to add an element to a specific page, this is normally done using a code block on the page. In some cases, you may need to put the HTML in the page’s code injection.
There is never a reason to have HTML in the Custom CSS Editor.
Make It Happen
Go through all the areas of your site where the code is placed and make sure it is in the right spot. Ideally, you want all the CSS in the Custom CSS Editor, and all the Javascript and HTML in the Code Injection or a Code Block. If you choose to move any of the code, I suggest moving one piece of code at a time and then double-checking that the code is still working in its new place. If the code is no longer working, it may follow one of the exceptions I made above and needs to be where it was originally located.
Step 2: Add Comments to your Code
Now that you have your code all in the right spot, you need to go through and make some notes for yourself to ensure you know what each bit of code is for. It is best practice to do this every time you add or edit code on your site.
However, if you are new to code you may not have learned this trick before. You can add notes to your code using Comments. Will Meyers has a great article on this if you are not sure how. The main idea is that you use a special syntax to add lines to your code that the computer knows is just for you and not to be read as code for the website. Your future self will love this as it will help you remember what each bit of code is for. This is especially helpful if you have used Collection IDs, Section IDs, or Block IDs because it is nearly impossible to figure out where those IDs came from later on.
For example, in this image, you can see I have some CSS for my Blog Page. I have added the comment /* BLOG PAGE */ in capital letters to remind myself that the next few lines of code are all for the Blog Page. I then added more comments throughout the code (you can see them in grey) to remind myself what the different lines of code are for.
Now, the next time I need to adjust my blog page or check to see if my code is still needed, I will know what each bit of code is for and I don’t have to do any searching or head-scratching to figure it out.
Step 3: Group Code Together
Now that your code is all in the right place and you know what each line of code does, you need to organize your code into groups. This is most important with your CSS, as it reads top to bottom. If I have CSS written to change the color of a button and then further down my code I change the color again, the code underneath will override the code above. As you can imagine, this can cause unnecessary, messy code. So you must choose an organizational structure for your CSS and stick to it.
Your organization might differ from mine. The important thing is that you group codes together based on some common feature and then stick to that organizational structure so that it is easier for you to find and edit later on. I like to have code that applies across my whole site first, followed by code for my header. Then I group the codes by page and end with the code for my footer and the code for mobile at the bottom.
This makes my CSS Editor predictable when it comes to finding the code I am looking for or analyzing whether I have duplicate or unnecessary code. Don’t forget to add some comments to each grouping to remind yourself what each group is for.
Step 4: Clean Up the Structure
Once you have all the code organized, you can clean up the structure of the code to make it easier to read. In the Custom CSS Editor, select all the code and then press Shift and Tab to reformat it. Alternatively, I like to use CodePen to format my HTML, Javascript, and CSS and analyze it for any errors.
Finally, you can minify your Javascript to help speed up the processing of your code. This is really only necessary if you have over 200 lines of Javascript as it won’t make much of a difference otherwise. Check out this blog post by Launch Hub Studio on how to minify your Javascript. Just make sure to save a copy of all your code first as once it is minified it is really hard to read or edit.
Step 5: Remove Unused Code and Plugins
Now that your code is nicely organized and formatted it will be much easier for you to go through this last step. Your final task is to go through each of the areas that have code on your site and delete any code that is no longer needed or that is a duplicate of other code on your site.
One of the biggest culprits is duplicate jQuery Libraries which can slow down your site and cause glitches in your code. jQuery is a library that uses Javascript. It can help minimize the amount of code that needs to be written for the code to work but it requires a library of code to be installed on your website. If you have purchased a plugin that uses jQuery, it will include the script needed to load the jQuery Library. However, since the jQuery Library is constantly updated you may have plugins that use different variations of the library, which means you may have accidentally loaded multiple variations of the jQuery Library onto your site. This can cause glitches or slow down your site.
The jQuery Script will look something like…
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
If you have multiple lines of code like this you will want to keep the most updated version. However, be very careful when deleting this code as the plugin you purchased may not have been updated to use the latest version and it may cause the plugin to stop working. If this happens, I suggest talking to the developer you purchased the plugin from to see if they have an update for you.
In Conclusion…
Having clean and organized code on your site will help keep your site running smoothly. So, set aside some time each year and after any major website updates to make sure your code is in the right place, that it is packed full of comments for you to reference later on, that it is grouped and organized, has a clean structure, and is free of any unnecessary or duplicate code.
