Lazy Load Images in Shopify for a Faster Site | Speed Optimization

2018-12-18T13:20:21+00:00December 14th, 2018|Performance Optimization|

What is Lazy Loading?

Lazy Loading is a performance optimization technique that loads images as the user scrolls down the page, instead of during the initial page load.

On the browser side, the page loads faster because it’s not loading all the images right away.

On the tech side, it works by replacing the html image src attribute with a data-src placeholder – this prevents the image from loading in the standard html sequence. Then javascript is used to grab that placeholder url and update the element’s src attribute, loading the image when it comes into view.

The Google effect: (more…)

How to Compress Images on Shopify

2018-11-08T16:25:41+00:00November 8th, 2018|Performance Optimization, Tools|

An easy way to make your site faster is to compress your images.

On Shopify sites, there is a 2 step approach to maximize your compression:

  1. Install an image optimization app like Crush Pics
  2. Manually compress any images that apps can’t reach, using a tool like TinyPNG.com

Due to API restrictions, image optimization apps aren’t able to get all the images on your site.

So even with an optimization app installed, you might still get warnings like this in PageSpeed Insights: (more…)

What is the Best Optimization Package for Your Site?

2018-10-08T15:28:06+00:00August 3rd, 2018|About, Performance Optimization|

All of our Shopify optimization packages include a core analysis and site wide optimizations that will lower your page weight and improve your load speed.

It’s hard to put an exact monetary ROI on each service package (we’re working on this), but we do know from stats like this that page load speed affects your conversion rate and engagement, so theoretically the faster you can get your site loading, the more traffic, customers, and revenue will flow (and more customers equals more referrals which nets more customers).

Speed Boostr Packages

We provide multiple options to fit your budget. The higher the package, the deeper analysis and optimizations we’re able to perform.

(more…)

Shopify Liquid Lesson: Auto Minifying CSS

2018-12-17T23:48:48+00:00July 27th, 2018|Performance Optimization, Tutorials|

CSS and Minification

CSS (Cascade Styling Sheets) are files that control the style of your website by connecting style properties to html elements.

Like this:

In Shopify, you’ll find CSS files in your theme Assets folder.

What is minification?

CSS are text files. Minification compresses the text by removing extra characters like spaces and comments, and combining common styles.

This makes the file size smaller. When your files are lighter they transfer faster, which helps your site load faster.

The Challenge

You want to compress your files, but you also want them to be readable so you can edit and make updates.

No worries, Shopify has a technique that compresses your human readable CSS files into minified files on the server.

How to Minify Your Shopify CSS Files

(more…)

How to Use Vector Graphics to Make Your Site Faster and Cooler

2018-07-09T18:24:29+00:00June 25th, 2018|Performance Optimization, Tutorials|

In this article:

  1. What is a vector graphic
  2. Examples of vector (SVG) vs non-vector (JPG, PNG)
  3. How to make/use an SVG (vector graphic for websites)

What is a vector graphic?

Vectors are lightweight scalable digital art graphics, meaning they can be sized up without losing resolution or pixelating (as opposed to a jpg or png which gets blurry when you make it larger).

The art files are created using lines and math instead of individual pixels or bitmaps.

SVG is a type of vector graphic used for the web. SVG = Scalable Vector Graphic.

Here’s why SVG’s are awesome:

  • The image is sharper
  • They’re usually lighter (faster loading)
  • They can scale to any size without becoming blurry or losing resolution
(more…)