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


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