FAQ output Structured data and HTML

You can measure speed to the following tools:

• Google PageSpeed Insights is a best-practices tool. It checks whether you have implemented a series of best practices around optimizing the speed of your site.
  
  
• WebPageTest can check the speed of your pages from a specific test location and real browser (Brussels and Chrome, for example, with a cable connection). That makes it much more realistic.
  
  
• Lighthouse is an open-source, automated tool for improving the quality of web pages. You can run it against any web page, public or requiring authentication. It has audits for performance, accessibility, progressive web apps, SEO and more.
  
  When To Use Lighthouse:
  
  - When analysing other things alongside performance
  - If you need to run tests programatically
  
  Lighthouse provides more metrics about the overall SEO health of a website like Performance, Accessibility, Best Practices, etc. If you want to get a rounded view then Lighthouse is a better tool to run your analysis with. For example, there is no point having a 90+ score on Pagespeed if it introduces bad code that pushes your Accessibility score below 20. Lighthouse will identify issues like this and display all relevant SEO metrics in a balanced way.
  
  Running a test with Lighthouse is very easy:
  
  1. In Chrome, visit the URL you want to test
  2. Open the developer tools in the same browser tab
  3. Go to the audits tab
  4. Choose the audits you want to run (tick everything)
  5. Click Run Audits
  
  

• Checkbot.io, a paid tool, who have a chrome extension, including a limited free version. A nice bonus of Checkbot is an analysis of SEO, Speed & Security.

• Solarwinds Pingdom is another paid tool. This performance monitoring tool gives you granular insight into many speed aspects (with waterfall reports).
  
  
• GTmetrix is a free tool that analyzes your page's speed performance. Using PageSpeed and YSlow, GTmetrix generates scores for your pages and offers actionable recommendations on how to fix them.
  
  Confuse on what tool to use?
  Here is a summary of the use cases for each tool.
  
  Quick Checks: GTmetrix, Pingdom Tools, and PageSpeed Insights
  Consistency/Historical Tracking: GTmetrix and WebPagetest
  In-depth Analysis: GTmetrix and WebPagetest
  SEO Check: PageSpeed Insights, GTmetrix, and Pingdom Tools
  Mobile Devices: WebPagetest, GTmetrix, and PageSpeed Insights
  Location Dependent: WebPagetest, GTmetrix, and Pingdom Tools
  Advanced Options: WebPagetest and GTmetrix

The speed of your web page depends on many factors;

1. Images 
   Big images can be one of the leading causes of a slower site. Go directly to your image manager and check the size of your images. Aim for images that are as small as possible, for example, 10-40 kb for small images, and max 100-200k for huge images.
    
2. External plug-ins (Google, Facebook, ...)
   Also, the plug-ins - from Google, LinkedIn, or Twitter to Hotjar - that you have on your site need to load. In addition to images, these are often the second source of load time, as these scripts load externally.
   Our advice:
• Think carefully about whether all scripts are still relevant.
• Check if they should load on each page
• Load via a tag manager such as Google Tag Manage.
  
  
3. Redirect chains
   A redirect is used to change an old URL, or to send a HTTP-link to a HTTPS-link. Handy, but you could end up with a whole chain of redirects after a few years, and that slows down your site.
   How to solve it?
   Go to the redirect tool in HubSpot, and redirect all links to the final URL.
   
   
4. HubSpot CTA's
   Multiple HubSpot CTAs (call-to-action) can slow down your page. if your HubSpot-CTA is not smart, and you do little or nothing with the analysis data of CTA's, you might be better off with a regular button and a link.
   
   
5. HubSpot native video / Youtube
   With the HubSpot native Vidyard integration, it's pretty easy to host videos on the HubSpot platform and post videos on your pages. We've noticed that these videos can cause a delay. The delay does not only apply to Vidyard but also to Vimeo, Wistia, and YouTube
   
   
6. CDN
   A Content Distribution Network (CDN) ensures your content is available on a server nearby so users can view your content quickly and smoothly. Images placed in the HubSpot file manager are managed by HubSpot's CDN by default. HubSpot makes use of the services of Cloudflare.
   
   
7. Web Fonts
   On your site, you can use either system fonts (fonts that are on everyone's system, such as Times New Roman, Arial, ...) or web fonts.
   These web fonts are either hosted on your domain or loaded from an external source (e.g., Adobe Typekit or Google Fonts). Again, a new, external source that needs to load on your website.
   
   
8. Activate AMP (on your blogs)
   AMP (Accelerate Mobile Pages) is an open standard for faster loading of web pages on mobile devices, or as Google claims, to enable blazing-fast page rendering and content delivery.
   
   
9. Simulate AMP (for your web pages)
   AMP cannot be enabled on web pages in HubSpot, only on blogs. However, you can apply the underlying logic of AMP to your mobile webpages.
   
   
10. Render Blocking Elements
    When you browse a web page, the DOM (Document Object Model) loads. That DOM tree is built based on the HTML code. The page will start to display, but not all elements are available in the browser yet; they will load one by one.
    
    A solution to this is to load scripts asyncronically, so they can't lead to a blocking page. The page may not look 100% correct at first, but a script error will not stop rendering.
    
    
11. Lazy Load
    Above is a brief explanation of how a page and images load into your browser. To gain extra speed, you can use lazy load. This technique ensures that images are only loaded into your browser when they become visible on your visitor's screen. In other words: images at the middle or end of your page will not be loaded as long as you don't scroll to it.
    
    
12. Adaptive images
    Here, you can go one step further. You don't have to load an image of 1,600 pixels wide for viewing on your smartphone. You can specify in your code that the image should display in a smaller format, but the actual image that your browser loads remains the same, thus, the size/weight remain the same.
    
    
13. Minification
    HTML, CSS, and scripts have become particularly complicated. To keep an overview in code, developers use indenting in order to visualize better what belongs together, or understand where they start a new item.  A technique called minification is used for this. The script or CSS is first parsed to a min.js or min.css before it is forwarded to the browser. 
    
    
14. Do you need all those scripts?
    Scripts are usually managed centrally, across all pages, which is just easy. However, consider whether you need all scripts on all pages or all kinds of devices at all times.
    
    
15. Don't optimize for old browsers.
    You want a modern website, responsive and robust. However, you also want it to work fine with outdated software like Internet Explorer 11. It always requires extra code to visualize a website in old browsers.
    
    
16. Caching
    Caching is a technique in which pages, images, and pieces of code are stored locally on your computer, so they're immediately available on your second visit. At the first visit, access takes a little longer, but during the next sessions, you don't have to wait for the processing anymore. You benefit from the cached results of their predecessors, making everything load faster.
    
    Read our blog to learn tips on how to speed up you site.