Optimizing Performance
Sprocket Rocket is developed to have optimal performance out of the box, typically scoring as Pass on Google Page Speed. However, there are certain factors that can impact these scores.
Image Optimization
1. Resizing Images:
Why: Large images can significantly slow down your page load times.
How: Ensure to set the images to the dimensions they will be displayed at on your website. This prevents browsers from having to load unnecessarily large files.
2. Compression:
Why: High-resolution images can be large in file size.
How: Use tools like TinyPNG or JPEGmini to compress images without losing quality. This reduces file size and improves loading speed.
3. Lazy Loading:
Why: Loading all images at once can delay the initial page load.
How: Implement lazy loading to ensure that images load only as they come into view. This can be done inside the HubSpot Page Editor.
GIFs & Video
1. Use Alternatives:
Why: GIFs and large video files can be resource-heavy.
How: Consider using CSS animations or short video loops instead of GIFs. For videos, use formats like MP4 that offer better compression.
2. Embedding:
Why: Third-party video embeds can add extra loading time.
How: Consider hosting videos directly on your site, as it'll provide better speed than third-party hosting.
Marketing Scripts
1. Audit Your Scripts:
Why: Many marketing scripts are heavy and slow down your site.
How: Review all scripts to determine their necessity. Remove any that do not directly contribute to your site's goals.
2. Removal Scripts Completely:
Why: Achieving high scores without removing non-essential scripts is nearly impossible.
How: Focus on eliminating scripts that aren't critical to your operations to significantly boost site speed and performance. Achieving high performance scores without removing these scripts is nearly impossible, and it's often not worth trying if you can't remove them.
Advanced Optimizations
If you're not a developer but still want to continue, please have your technical team handle these updates. Making incorrect changes can break parts of your site.
Remove all images/ media in the hero section.
When performing advanced performance optimizations, one of the simplest and most effective ways to achieve immediate gains especially on mobile is to remove all media from the above-the-fold area.
For background images, this typically means replacing the image with a solid background color on mobile.
For media elements (images, videos, animations), the recommended approach is to hide them entirely on mobile viewports.
This is a proven technique that significantly improves mobile performance scores by reducing render-blocking assets and initial load cost, with minimal impact on usability when applied correctly.
Stripping all CSS files and critically loading all CSS in the header.html
Any CSS files wrapped inside the {% if request.path not in custom_paths %} condition will not be loaded on pages defined in the {% set path_to_css = {} %} array.
This approach allows you to selectively exclude unused template CSS on a per-page basis, which helps reduce server processing and overall load time.
To optimize a page, add its path to the path_to_css array. It’s critical to watch the video above and follow the setup exactly. This method requires that necessary styles are reintroduced manually. If implemented incorrectly, the page will break.
Use this technique only for pages you are intentionally optimizing and have fully validated.
{% set path_to_css = {
"URL_SLUG_TO_PATH": "../css/pages/CSS_FILE_PATH.css",
}
%}
{% set custom_paths = path_to_css.keys() | list %}
{% if request.path in custom_paths %}
{% set path = path_to_css[request.path] %}
<style>{% include path %}</style>
{% endif %}
{% if request.path not in custom_paths %}
{{ require_css(get_asset_url("../css/base.css")) }}
{{ require_css(get_asset_url("../css/base-overrides.css")) }}
{% endif %}
{{ standard_header_includes }}