Clicking on the “Show how to fix” link will expand the view and show you the list of script resources that should be evaluated.
2. Choose Best Method
Once you’ve identified which scripts need to be moved it is time to decide “how” to fix them. There are two main methods to choose from. The first is to make the scripts inlined; in this method the contents of the script are added directly into the HTML of the page and are only loaded once they are needed. This is the best option if the script is small and applies to a single page.
3. Decide Where to Move It
It is important note that you should NOT make changes in the header.php file unless you are an advanced user, otherwise you risk creating unnecessary errors to your site!
In HubSpot we can find the head HTML in both the template view and in the page editing “options” tab.
From the template view you can find the “Edit Head” option in the Edit dropdown:
We will go from something like the example below to moving the entire script into your body html, relevant php file (WordPress,) a Custom HTML module (HubSpot) or into the footer to delay the rendering.
The body HTML is where you have all of the content for your pages. The best way to find it is to find where you have all of the copy for your content. If you are using WordPress, the script can be added directly to the page by typing it alongside your content via the "Text" view.
Custom HTML Module
To add the script to a page in HubSpot, we need to use a Custom HTML module. The Custom HTML module is accessed via the template view.
Meanwhile, finding the footer of your site should be very similar to finding the script in the head tag. This could be in the overall website/page settings; if you are using WordPress, look for a "Footer" tab in the "Theme Options" or for the footer.php file in the Editor (same note applies here, do not make changes unless you are an advanced user!)
In HubSpot, it is found in the edit page view “Options” tab
Where you move the script will depend on if the script needs to occur at a certain point of the page or if it can wait until the end of the page rendering. The first should go in the body HTML or Custom HTML module while the latter can go into the Footer section.
4. Move the Script
This next step is pretty simple; add the script to your desired location.
This is one of the most important steps in this process.
After making all the changes check the previews to make sure that the site still works. Does the page load correctly? Are all elements showing properly? If there is something broken, or not loading properly, then you should troubleshoot the problem. This can be done with the help of many different developer tools; try a few out and then choose your favorites. Once you find the errors, double check your code and verify that you are not missing any important components such as semicolons or curly braces.
Once you have confirmed there are no issues with the page after the changes are applied, you are then ready to publish.
To take this premise even further, regularly testing the speed of client websites is something which should be a common occurrence in any web development schedule. With the ever evolving world of online marketing staying ahead of any potential issues is critical to success.
Originally published Nov 18, 2015 1:00:00 PM, updated February 13 2018