How to get your website to load quicker
As a Squarespace designer, the number one issue I see on client’s websites is slow loading web pages because full resolution images have been used on the website.
Why is this is a problem? Well there are a couple of reasons:
01/ For every extra second your website takes to load, you are using readers and customers. According to Neil Patel:
47% of consumers expect a web page to load in 2 seconds or less.
40% of people abandon a website that takes more than 3 seconds to load.
02/ If you have slow loading times on your website you will be penalized by Google and will appear lower down in search results.
If you want to test your website speed you can run it through a free tools such as Pingdom or Google Page Speed to receive a report of your website and any large loading images.
On Squarespace since the code is not open source we are not able to make any changes regarding issues for the code, but we can do our best to optimize our images for our website.
Squarespace has a very helpful video tutorial which walks you through proper image management on your website.
According to this post on the best way to format your images for your website, Squarespace recommends the following:
Save images as .jpg, .gif or .png only. If there is no transparency in the image or movement, always choose .jpg as it is the most efficient storage option.
Save your images at 1500 px wide for most images on your website. If you have a large banner image and the resolution is not tack sharp enough for you then for these images you can go up to 2500px
Compress your images so that they are under 500KB (I cover how to do this below)
Don’t worry about image height - your aspect ratio will be preserved on Squarespace
Save in RGB color mode if using a photo editor
Tools for Compressing Photos
There are numerous tools you can use to both compress and resize your photos for your website. I will be covering both free and paid options here.
Photoshop and Lightroom
Since so many photographers and entrepreneurs have subscriptions to Adobe Creative Cloud I wanted to cover this option. I don’t use Lightroom so I will be focusing on Photoshop here, but I believe there are similar settings in Lightroom.
When you are exporting photos from Photoshop select File -> Export -> Export As. Change the Image Size width to 1500px. Select a format of .jpg (unless it is an image with transparency or movement) and reduce the quality. I start at 70% to see what the file size will be. We want to make sure we get that image size below 1500px. If it is still isn’t, you can either try cropping the image to make it smaller or still reducing the width of the image further. You can also try 60% for the quality and see how that looks.
If you are finding that the image quality is getting comprimised, then export the image at a higher file size and then use one of the compression tools below to reduce the files size.
Watch the video below to see how to export images from Photoshop and reduce their size:
Looking for even more resources for Stock Photography, photo tools, plugins and more????
Check out my list of Recommended Resources
Using web browser tools for compressing photos
Squoosh
This has become my favorite tool to use for resizing and compressing photos. It is so easy to use and great for any tech level of user.
Open up https://squoosh.app/ in any browser window and drag or drop an image to compress into the window. Check the resize option and change the width to 1500px. You can change the quality slider as needed to get the sharpness your desire. Just keep an eye on the image size and make sure it is less than 500KB.
It’s so easy to use! Check out the video tutorial below on how to use Squoosh:
This is a new tool to me that was recommended. What I love about it is you can drag multiple photos (up to 40 jpeg or png files), compress them and then download directly to Google Drive or Dropbox! This is a real timesaver!!!
This web app lets you resize images, convert images to different formats, crop images, compress, rotate and even flip images.
It is a great free all in one web app to use for your photo needs.
Other tools for compressing your images
If you have reduced your image size, but still have a large image you may need to compress it further. Here are some tools you can use:
If you have a Mac computer:
On any computer:
https://shortpixel.com/online-image-compression
Other free photo editors such as Canva and Pixlr can also be used to format your images properly for web.
In conclusion
Although it takes extra time and effort to properly prepare your images for your website, you will be rewarded with a faster loading site which will eliminate the number of people that leave your site due to slow loading times. Also, google be more likely to show your website in search results because not only will your bounce rate be lower, but it rewards faster loading websites.
