CMS Development

wlyu9248
Member

Increase image loading speed

The issue is the website loads slowly. 

 

I checked developer tools and see the website spends majority of time loading the pictures from HubSpot File Manager, it also spends time loading some .css and .js such as the followings, but not a major issue.

.

Is there any way to optimize the overall website loading speed such as referencing images using relative url instead of absolute url (webp). Or what other methods can increase the loading speed or reduce the loading pressure?

 

Here are two screenshots for the details.

imageloading.PNGimageloading2.PNG

Any suggestions are greatly appreciated!

0 Upvotes
2 Replies 2
PJanakiraman6
Contributor | Diamond Partner
Contributor | Diamond Partner

Increase image loading speed

Hi wlyu9248, I'm not a developer, but I can tell you that instead of resizing images, I upload them in the dimension that is closest to HubSpot, and for optimization, I use a certified HubSpot app called LitePics - it uses the lossless compression method and compresses about 30% without any loss of quality. 

 

I started with a free plan and was pleased with the image load speed and visual consistency. After two weeks, I opted out of the personalized plan, and the image speed is admirably fast. Although it’s not something you're looking for just sharing an idea, give it a shot; it might help you with the image load speed issue.

grantfoster
Contributor

Increase image loading speed

Hi there! 

You may have taken this step already (your image filesizes look pretty small) but I'll detail it anyways for those who may not have. 

 

You can use image compression tools like ImageOptim (on mac) to compress images that are already on the website. There are many alternatives and most use generally the same methods of compression. Software like this will attempt to lower the filesize of images without degrading the visual presentation of the image itself. Filesize is the most important aspect in terms of D/L speed for web pages. 

 

You can batch optimize many image files at once using FTP to connect to your Hubspot file manager.

 

Another thing you could do would be to try and convert any images that are simple enough to be .svg like your icons and such. SVG's are generally smaller than PNG in cases where the image is simple and could be a vector.

 

To address your question about using relative vs. absolute links I found a great stack exchange article detailing the differences in speed using these methods. It doesn't seem like this effort will have a noticeable effect on your pageload time.

 

https://webmasters.stackexchange.com/questions/96955/speed-comparison-absolute-vs-relative-path-link...

0 Upvotes