CDN, Security, Performance
HubSpot's CMS is one of the most advanced and optimized content management systems on the market. Because the HubSpot CMS is a Software as a Service (SaaS) solution, we handle security, reliability, maintenance and more, so your team can focus on writing code and creating delightful user experiences.
HubSpot does a lot of performance enhancements for you, but there is still more you can do. How to optimize performance on HubSpot CMS.
The HubSpot CMS's globally distributed Content Delivery Network will ensure lightning-fast page load times regardless of where your visitors are. No configuration, setup, or additional accounts are required to take advantage of the CDN for hosting media or pages. The system takes care of distribution and cache invalidation for you so you can focus on building a great site while a web application firewall and built-in security measures provide peace of mind against online attacks.
SSL is included and automatically provisioned for free on all connected domains in HubSpot CMS or Marketing Hub accounts. Each domain is provisioned its own SAN certificate, with configurable options such as disabling support for select versions of TLS, redirecting requests made over HTTP to HTTPS, and serving the HSTS header so future requests are made over https. Per request, custom SSL certificates can be hosted for an additional monthly fee.
All SSL traffic on HubSpot hosted websites is served using HTTP/2. HTTP/2 is a replacement for how HTTP is expressed “on the wire.” It is not a ground-up rewrite of the protocol; HTTP methods, status codes, and semantics are the same, and it should be possible to use the same APIs as HTTP/1.x (possibly with some small additions) to represent the protocol.
The focus of the protocol is on performance; specifically, end-user perceived latency, network and server resource usage. One major goal is to allow the use of a single connection from browsers to a website.
Note: We are currently working on providing IPv6 for CMS sites
All HubSpot hosted websites include IPv6 addresses so they can be natively accessed over IPv6. IPv6 is the most recent version of the Internet Protocol and expands the number of available addresses to a virtually limitless amount–340 trillion trillion trillion addresses. The Internet is running out of IPv4 addresses. Transitioning to IPv6 enables the Internet to continue to grow and enables new, innovative services to be developed because more devices can connect to the Internet.
HubSpot automatically minifies (removes unnecessary spaces and line breaks). You can use HubL includes to combine multiple CSS files into one file. This results in minimal HTTP requests and the speediest delivery and parsing of CSS on your website. Note that CSS files uploaded to File Manager are not automatically minified, so they should be minified before upload if you plan to include them on your website.
NOTE: Every time you update your CSS files, we need to re-minify CSS files on a page, so there will be a short period before you see the updated version of your CSS files being served on live pages. Syntax errors can prevent us from being able to minify your CSS files. Updates to external CSS files will not update combined-CSS files.
HubSpot automatically caches pages and files on both the server and browser level to ensure the quickest delivery of all page assets to your website visitors. When your page or any dependency of your page (such as a template or module) changes, we automatically expire the server caches for that page.
Each additional domain used on your website incurs an additional DNS lookup and connection. The fewer domains you use, the faster your website will load. HTTP/2 supports loading multiple files simultaneously over the same connection, so the old guidelines for “sharding” your assets amongst multiple domains no longer apply.
The URLs of assets referenced in CMS pages such as developer file system files, CSS, JS, and images are automatically rewritten to match the domain of the current page when possible. So if you reference an image at http://cdn2.hubspot.net/hubfs/53/HubSpot_Logos/HSLogo_gray.svg on a page served on www.hubspot.com, the URL will automatically update to https://www.hubspot.com/hubfs/HubSpot_Logos/HSLogo_gray.svg.
Text-based files such as HTML, CSS, and JS are all compressed using brotli before they are served to browsers. Compression with brotli is even more significant than GZIP. If the client does not indicate that Brotli compression is supported, then gzip compression will be applied.
While minification speeds up the parse time of CSS and JS files in the browser, compression gets those files to the browser faster.
When you upload an image to the file manager, images are automatically optimized. Specifically, JPEGs and PNGs are stripped of their metadata (EXIF and other stuff that make images bigger). All images(except GIF files) are also recompressed to be visually lossless. Additionally, we may serve images in a different encoding if it can be represented as a smaller PNG than a JPEG.
Images are re-saved at 72dpi regardless of their original resolution. If you upload a file at 300dpi, originally created for print, it will be converted to 72dpi, which is the standard for the web.
We progressively enhance images to use the WebP format for browsers that support it. Images will be served WebP format images if the file size of that version of the image is smaller. This conversion happens server-side and does not change the file extension in the URL. An image uploaded as a
.jpg, will still show as a
.jpg in the URL but will be served as a WebP. This ensures links to this image will work for everyone regardless of WebP support.
HubSpot hosted images placed on CMS content will be automatically resized by HubSpot, preventing the browser from expending resources to do so. To accomplish this, HubSpot appends height and/or width query parameters to the
src URL of any images which have a width or height attribute. Note: Image resizing takes less than a minute, if a page is requested before the image is resized, the non-resized image will be served for that request. Browsers are given multiple options for the image resolution to load, so your images will look crisp on standard and high-resolution displays.
Image optimization/compression and automatic image resizing are both enabled by default for all HubSpot hosted pages/files.
For individual jpg files if the image url has the
quality=high query parameter, the image will not be compressed.
Developers building on the HubSpot CMS can also provide HubSpot additional context to images to further control image resizing. This is done through the
resize_image_url() function. This enables developers to build guardrails into modules to prevent content creators from displaying oversized images on pages and emails. The function can also be good for situations where an image's size is not dictated by height and width attributes within the HTML, such as a background image.
AMP, or Accelerated Mobile Pages, is a mobile-specific page format that loads content nearly instantaneously. AMP can be enabled on your HubSpot hosted blog posts with the flip of a switch. See How to use Accelerated Mobile Pages (AMP) in HubSpot for more details.