How I boosted B2C Black Friday sales

The main image used for this post can be found here this image is free to use under the Creative Commons 2.0 license.

What this project was

The customer flagged that their SEO rankings were low. This came to our attention close to Black Friday. Improving this was high priority.

I was the only developer tasked to fix this. I worked closely with an SEO expert in order to focus on the right aspects.

I learned a lot during these intense couple of months leading up to Black week.

Google Search Console

Google Search Console (GSC) a free tool from Google that lets website owners and developers see how Google is treating their site in search results. It shows you if there are any issues like pages Google can't find or problems with how it's ranking. You also get information on which search terms people are using to find your site. It's handy for boosting your website's search results, getting more visitors.

GSC Long term crawling was already set up on this site. We saw a downward trend. 100+ pages on their site were identified as "not mobile friendly", and basically all pages failed on PageSpeed.

Imgix

This website already had Imgix set up for responsive images. Image are pulled from A CMS that the customer uploads their own content to.

Cropping

One problem that we identified was that cropping was done using CSS, essentially what that means is we zoom in on the image in order to cut out the parts that are not visible. Often times an image was uploaded in portrait but displayed in landscape or vice versa.

Example

If a 16:9 image was specified to be used in portrait taking up 1080x1920, the image used would need to be at least 1920px tall. The full 3840x2160 image would be loaded and cropped to fit the area needed.

Solution

I rewrote our image component so that it passed the correct aspect-ratio, I also wrote a function in JavaScript that converted the object-fit CSS to imgix parameters so we could get the exact correct portion of the image. This meant we would load one quarter of the pixels in the example above, but keep the same sharpness for the end user.

Background images

Performance

With CSS you can specify a background, this is limiting. You cannot specify a srcset for true responsive images. You can write your own logic with media queries and load different images, but often this is omitted.

Accessibility

Since CSS Background images cannot be read by screen readers and they lack any support or alt texts these images should not be used for important images.

SEO

Search engines do not crawl background images since they are not meant to be important.

My solution

I rewrote a large portion of images on the site to using our regular image component. This improved all of the points listed above.