Updated February 6, 2019

The key is keeping high resolution images like this ^^^ optimized.

Our Speed Boostr services optimize your website and make it faster. Here are some tips to keep it that way.

1. Optimize your images

Product, Collection Featured, Blog Featured, and Asset Images: If you have an app like Crush Pics these images will always be compressed automatically. Theme Options, Files Section: Images you upload into your theme options (Customize Theme) or Files (Settings > Files) will usually need to be manually compressed. This also includes extra images you add inside your blog posts or collections.. To manually compress images before uploading, you can use a free tool like tinypng.com.

Use the correct size images

Generally your page width will be maxed out at around 1000px – and most mobile devices are less than 500px. Check your image size before you upload. You don’t want to upload an original 2000px+ image into an area where the largest it shows is maybe 800px.

Pro Tip: You can use a Chrome plugin like Page Ruler to measure sizes on your screen, or if you’re on Mac just use CMD + Shift + 4 and drag a box.

JPG vs PNG vs SVG

Using the wrong image format can make a huge difference in file size. I saw a recent example where someone was using a PNG file that should have been a JPG file, and just by resaving as JPG the file size was decreased by 80%. Niiiiiiice.
  • Use JPG for photographic images.
  • Use PNG for graphics that don’t use many colors, or images with transparency.
  • Use SVG whenever possible. SVG (vector graphics) are usually lighter in weight and can be scaled to any size without losing resolution.

JPG – Use for photographs and images like this:

sunset at the beach

PNG – Use for graphics:

SVG – Use for graphics (when possible):

The PNG and SVG images are the same right? Look closer and you’ll see the SVG is more crisp. Also the PNG is 8kb (compressed) while the SVG is less than half that at 3kb. SVG graphics are created in a program like Adobe Illustrator, where a PNG might be created in Photoshop. If you have the option, use an SVG.

2. Load fewer elements

It looks nice to have a long home page with banner images, collections, carousels, product highlights, review carousel, Instagram widget, blog snippets, videos, etc… but each element adds more load time. The goal is to find a good balance of providing rich information for your users while keeping things minimal to provide faster load times and a better experience for people on a slow connection.

Pro Tip: Think of what action you want the user to take on a specific page, then arrange the elements to best cater to that action, then remove the rest.

You can use software like Hot Jar to see how users interact with your page and what they click and engage with.

3. Apps are awesome! But try not to go crazy on them

Shopify has some awesome apps, but most apps that interact with your website contribute to page weight and load speed. The key is to try and limit apps to the ones that generate the best ROI. If you want some ideas, check out our list of the best apps for marketing and automation here.

Pro Tip: Try to keep app usage to what’s needed and what’s effective. For example, a Wishlist app sounds like a good idea because Amazon uses it right? Well, if you find out people aren’t using on your site, or aren’t converting sales from it, then you’re just loading an extra app that might not be helping your cause.

4. Remove stranded app code

When apps require code changes to your theme files, there’s a chance that if you just delete the app, it won’t be fully uninstalled (and might still be calling the app scripts and resources in your code). We take care of this for you in some of our Shopify optimization services, but you can also use a tool like Pingdom to see all of your loaded resources on the page. If you recognize a script from an old app being loaded, find that in your code (usually in theme.liquid) and remove it. You can also use Chrome Dev Tools to find and fix server errors and old app code that’s causing problems on your site.

5. Keep above the fold content to a minimum

Above the fold content is the viewable area people see on their screen when they first load your page. The speed that this loads significantly affects the perceived load speed to the user. How to optimize:
  • Don’t use banner sliders that load multiple images. This is a double effect because you’re loading large images plus the plugin to control the slider and animations.
  • Compress your images and make sure the size is reasonable (don’t upload a 4000px image when a 1200px image will do just fine).
  • Try to keep your above the fold area light in images and apps.

6. Use custom code solutions instead of apps whenever possible

If you hard code an element into your theme it loads inline and quickly. Apps generally rely on outside resources and may have to wait for the page to load. An example I recently saw: a store was using an app to load secure badges on the product page. In this case, we just swapped in an image right in the code and then deleted the app. It’s unnecessary to have an app just to load a small image like this.

7. Monitor and test

You can use Google PageSpeed Insights to check for any new warnings. It’s also a good idea to test which elements and apps work well on your site. This will help you find what converts and what’s just dead weight. Those are some tips to keep your website humming along at optimal performance (assuming you’ve already had your site professionally optimized). If you’re new here, check out our optimization services where we analyze and optimize your site to squeeze out more performance and improve your page load speed.