Quick wins on improving mobile speed?

Marketing & Content Hub Blog, Website & Page Publishing
,
1

Hey group!
What is the low hanging fruit for improving the mobile speed of https://www.nederlandslank.nl ?
According to pagespeed the performance hovers between 19 en 39, which obviously needs improvment. :slightly_smiling_face:
According to Semrush the website has 1,466 issues with unminified JavaScript and CSS files. How can i solve this and are there any other best practices order to improve mobile performance?
Thanks in advance,
René

2

Some of this is going to be related to hubspot and unavoidable. Or it could be from your template in which case contacting the developer will be your best course of action.

When I run a page speed test in Google, you are getting a much better score on desktop vs. mobile (88 v 45), but when I look at mobile the first thing coming up is Google Tag Manager. After that all of the scripts from Hubspot show up. While page speed is an important factor, it is not the only important factor. In comparison, a site like CNN has a mobile speed score of 25 which you are easily beating, but having better page speed will not equate to your site outranking CNN.

3

Thanks @Ben_M i was told indeed about Google tag manager coming up. There is a lot of data of Google tag manager seen in Google page speed (see screenshot and link). Are there any actions here to take to optimize? And if so which ones and how should i take them? :slightly_smiling_face:
https://pagespeed.web.dev/analysis/https-www-nederlandslank-nl/a5yq1j1wj2?form_factor=mobile

Schermafbeelding 2023-07-27 om 19.51.58.png
Schermafbeelding 2023-07-27 om 19.51.58.png697Ă—276 46.5 KB

4

It’s difficult to say based on that data as it doesn’t share exactly what the GTM is firing. What is your GTM firing besides Hubspot/Google Analytics? And can you limit any of that firing so it doesn’t occur on all pages? That’s where I would start.

5

I can’t answer these questions, because as you said the best course of action is to contact the a developer. Is there a developer from Hubspot that can help with this, or should i try to find someone on upwork?

6

@RvandenHeuvel in addition to what @Ben_M offered (and I’m in agreement, FWIW), here are a couple tips we help our clients with for optimizing page load speed for mobile.

Optimize Images: Compress and resize images to reduce their file size without compromising quality. Use the appropriate image formats (JPEG for photographs, PNG for graphics) and consider using responsive images to serve different sizes based on the user’s device.

Minimize HTTP Requests: Reduce the number of elements (images, scripts, CSS files) on each page. Combine CSS and JavaScript files, and use CSS sprites to help minimize HTTP requests and speed up loading times.

Optimize JavaScript Execution: Place JavaScript at the end of your HTML body or use the “async” and “defer” attributes to ensure it doesn’t block rendering. Consider lazy loading images and scripts that are not immediately visible on the user’s screen.

Responsive Design: If you’re using a HubSpot based theme, this should be happening already. But make sure your website is mobile-responsive.

Optimize Fonts: Limit the number of fonts and font weights/styles used on your website. Use web-safe fonts whenever possible, and consider using system fonts for faster rendering.

Hopefully something in that list helpsup the speed a bit for you.

7

Hi @danmoyle, thanks for your additional tip! I think the first thing to go for would be to optimize the images. I know how to do this on wordpress, but how can i easily compress and resize all the images at once? Is this possible in Hubspot?

8

@RvandenHeuvel HubSpot does have automatic image resizing. You can also manually resize them:

To manually resize your images:

  • Navigate to the files tool:

    • In your HubSpot account, navigate to Marketing > Files and Templates > Files.
    • If you have a Marketing Hub Starter account, navigate to Marketing > Files.
    • If you have a Marketing Hub Starter account, navigate to Marketing > Email, click the More tools dropdown menu in the left sidebar menu, and select File Manager.

  • Click the name of your file.

  • In the right panel, click Clone and edit.

  • Click Resize and enter the width and height in pixels.

  • Click Save clone.

You could also look into the Develepor documents for lazy loading capabilities. That may also help.

9

This should be the solution :raising_hands: