The HubSpot Community Developer Show - Episode 4 - Site Speed with John Fuller of Ascend

dennisedson
by: Community Manager
Community Manager

Zip zoom zoom. Let's talk about site speed.
In episode 4, I have the pleasure of speaking with @John  of Ascend, Nhori Lopchan-Edmonds, Michele (Zog) Herzog and Jon McLaren of HubSpot about what it takes to make your site have a lil pep in its step.

 

1 Comment
shamaleyte
Participant | Diamond Partner
Participant | Diamond Partner

just as a kind of summary;

 

Site Speed and Optimization

  1. Keep it simple, optimize images and JS.  You will cover 80% of the rules.
  2. Collaborate with the designer when it comes to defining the assets of the page ( video + form + images + effects )
  3. Be aware of the trade-offs when using elements on the page. E.g Using a background video on the hero section will cost additional time in terms of page load. The first thing to do is to compress the video file without losing the quality ( there are some tools for that ). Plus, do some tricks like using a placeholder image first and then loading the video after the page load is complete, and turn it off on mobile ( or use light-weight animations ).
  4. Define a standard for everyone in the team ( devs + editors + designers etc. )
  5. As a dev., use tooltips for marketers' sake, use explicit default content, explain what they can do in a module, share instructions. Tell them to optimize the video by compressing it and explain why & how.
  6.  To improve the page performance ( such as optimizing an image - by using tinypng or a similar tool - for uploading it ) try not to let marketers be responsible for such actions ( instead of making them optimize the images, use CLI ( imageoptim ) for optimization of assets and upload them to File Manager, or resize the image by using HubL's "resize image URL" function )
  7.  Yes, Do not forget to benefit from {{ resize_image_url }}, define the height and width of the img element ( HS will automatically append srcset for it ), or use the resize_image_url method to generate custom source sets for the image. Here is an example of srcset.  Keep in mind that this method will not work for images > 4mb. [ It would be nice if HS automatically warns content editors about that ]
  8.  Image elements: Use the lazy-load feature for images that are rendered below the fold.
  9.  style=background-image ->   use image with object-fit whenever it is possible. Then use the lazy-load property here as well. 
  10.  Image format: HS automatically converts resized images to webp if the browser supports it. Otherwise, it will display the image in the format you provided it in. ( JPEG and PNG are the mostly used ones.  Just a side note: new image formats are coming out )
  11. Use HubSpot SEO recommendations



Initial server response time:  It is "Time to first byte".   Factors that will play into; 
- The network that you are on.
- The ISP that you use
-  Your country's infrastructure
- Your proximity to a HubSpot CDN node
- The way your page is implemented.

There are some HubL methods that generate dynamic content (such as printing time) and prevent HubSpot's ability to do server-side caching of the pages.  Try to avoid using them, and use JS for that.  Smart content? The answer is not clear in the conversation. To be checked.

Tracking and analytics codes in the header

- Evaluate what tools do you need to use, eliminate the unnecessary ones. Each script costs.

- Defer/Async them if possible.

- Google Tag Manager:  [ Not sure what can be done in this regard. Please share if it is clear and if there is a development guideline on this. ]


Best practice for writing CSS and JS
- Inside custom modules? or Inside the CSS files?
If it is just one big CSS file that you are loading on every page, we cannot consider this as the best practice since you are loading the rules that you do not need on different pages.
On the other hand, having CSS rules at the module level means additional separate HTTP calls for each CSS block.

Both of the options have pros and cons. The advice here is to put the CSS rules of a commonly used module into the main CSS file, and keep the 
rest in the module's CSS file. 


Required CSS:  
The CSS that is needed above the fold. Load such styles inside the head tag.  This way when you load the page, you get the styles that you need right away without waiting for the style sheet to load. 

Using Frameworks in HS
Recommendation: Do not start with optimizing the CSS part, work on the images and JS first, then take care of CSS. Get and use what you really need. Ignore the rest if possible. 
E.g:  A framework that you want to use in order to generate widgets might be calling the entire Bootstrap 3 library. Be careful when using frameworks. It might be doing more than needed, which means too much payload.  If you need 1% of the whole framework, try to use that 1% of the framework instead of loading the rest 99% of it.


Loading fonts from an external CDN or from HubSpot CDN?

The CDN option: You need to trust that CDN for security reasons. 
HS CDN: One advantage is that you are not making a new domain request.
Note: Consider the case FOIT "flash of invisible text" when it comes to fonts.  Check this out for more.

 

 

Perfect Boilerplate practices?
One perfect boilerplate for everyone is not possible. 

- HS Documentations helps t show and establish best practices. Check the community, fork the available boilerplates and make them available for the community. 

 

Using SCSS?

- It is not clear to me what HS can handle in this regard. Somebody, please share opinions in this regard. Any examples, etc. 

- CSS Nesting is on the way? wow.  Might be helpful to check this out.

- Side note/comment :  CSS seems to be promising in covering the features provided by SCSS 

 

HubSpot's native page performance tool?

- Would be interesting to increase marketers' awareness by seeing the page load score of a page at the page edit level.

 

Recommendations Build tools

Node

- Webpack

 

Additional notes:
- Google plans to change its algorithm to reward sites built not mobile-friendly but mobile-first. 

- Google evaluates your page performance considering the top 10 000 best performing websites, and the list gets updated on a regular basis. It means the website that you built last year is likely to perform worse in the next year.