Devia Blogs

Ecommerce

September 21, 2022

How to Make Your Print eCommerce Website Load Faster

By Xan Poulsen, Marketing, and Greg Doyle, Developer

September 21, 2022

How to Make Your Print eCommerce Website Load Faster

By Xan Poulsen, Marketing, and Greg Doyle, Developer

Having a fast loading time for your website should be your biggest priority for creating a good user experience. You never want your users to stare at a blank screen as they’re waiting for your website to load. It could cause them to think your website is broken and leave your site before ordering any products.

Optimizing your Print eCommerce platform’s speed is the most important step you can take to improve your website’s usability and make it a simple and painless ordering experience. There is one very common mistake that you could be making which would result in a slower loading speed. Luckily, there is an easy solution that is guaranteed to improve your website’s speed and user experience.

Testing Your Site’s Speed

You can see exactly how fast your website loads by using the very handy online tool Pagespeed.web.dev. Paste your website’s url into the input field and hit “Analyze”. You can switch between mobile and desktop mode to see your site’s performance score on different devices. PageSpeed also shows you what specifically might be causing your site to be slow.

The Most Common Issue

Oftentimes the issue that causes a Print eCommerce Website to load slowly is using images that aren’t optimized for the web. Using large scale pngs is a common mistake because most people think, “the higher resolution, the better!” Of course, for printing images, this is totally true. Printing the highest quality PNGs and vector images gives your printed product the clearest image. However, this is not a good practice for websites.

To optimize your website’s speed, you want to use the smallest possible file size. To reduce an image file’s size, you want to make sure you are using a decently small aspect ratio. You also want to use jpg's whenever possible. For images that require transparency, convert your pngs into webp’s.

How to Optimize Images

For non-transparent images, open the image file in Photoshop. Go to File > Export. Change PNG to JPG. Change the file aspect ratio to match the optimal ratio (listed in the section below, Optimal Ratios.) Then you can upload this jpg to your Website.

For images with transparency, export the image in photoshop following these same steps, but do not change the file from png to jpg. Instead, keep the file as a png when you export. Next, go to CloudConvert, create a login, and convert your file from png to webp. Download the wepb file from CloudConvert. Then, you can upload your webp to your Website.

We’ve found that jpg's typically give you the smallest possible file size, rather than webp's. So if your image doesn’t absolutely need transparency, make it a jpg.

Optimal Ratios

Product and Category Images: 800 x 800 jpg

Banner Images: 1920 width jpg

Logo Image: svg file



Tips for other various images

  • Make sure your image is a jpg (or webp if necessary).
  • For images that span the full width of the screen, keep your width at around 2000 px.
  • For any other various image that doesn’t span the full width of your screen, you can upload the image without modifying it, and then follow these steps below to figure out the best aspect ratio you can use:

  • In Google Chrome, open the webpage displaying this image.
  • Right click and hold on the image. Select inspect (at the bottom of the menu)
  • On the right you will see code with one section grayed out. In that section is a blue link. Hover your mouse over that link.
  • There you will see “Rendered Size”. Take note of that size.
  • Then resize your window and continue to try hovering over the blue link to see the Rendered Size. The largest value that shows as the Rendered Size, out of all the screen sizes, is an aspect ratio you can use for your image.
  • For important images, modify this number slightly and add 100-200 more pixels to each number in the aspect ratio. That way you can ensure that the image will not be blurry.


The One Drawback of JPGS

One thing to note about JPGs is that they are not good at displaying sharp images or sharp edged curves. This won’t noticeably affect photographs, but it will negatively affect the edges of some graphic elements like a simple arrow icon or anything else that is more “shape” and less “photograph”, such as a logo. For these, you should ditch the JPG format and try using an SVG, especially if the graphic is very “simple” looking.

Final Results

After you’ve optimized your images, you’ll want to know if your hard work paid off! Pop your url back into Pagespeed.web.dev and watch your website’s score go up and your site’s loading time go down.

If you’re looking to have Devia handle the image optimization process for you, contact us using the schedule a meeting button below. Devia can even use a cdn to store your images outside of your Website, which can improve the server’s response time for fetching your site’s images and further improve your site’s speed (especially if you have many images on your site!)

About Devia's Web to Print Solutions

Your printing service needs an online platform that will connect your clients to the products they need to order. Printing clients need a simple, easy to navigate webpage that lets them upload a PDF or a photo and order marketing materials and custom products, including business cards, stationery, letterhead, envelopes, flyers, pocket folders, brochures, signage, calendars, sell sheets, buckslips, note pads, and more.

Devia provides support to your team of printing professionals by helping manage and create individual eCommerce stores for each of your clients, tailored specifically to their brand. Using Infigo's software, Devia will develop and manage these branded storefronts for you, so that you can get back to what's truly important: running a fantastic printing service.

Devia's partnership with Infigo lets us provide unmatched support for Infigo users. Our direct collaboration with Infigo's team gives us insider information on new updates and features of their software. Devia also specializes in the management and development of online stores hosted by other various eCommerce platforms, such as Shopify, Pageflex, Squarespace, and Magento.

Devia's years of experience building customized storefront solutions allows us to create the best solutions for connecting commercial printers and their clients. Schedule a meeting with our team using the button below to start a conversation with Devia. Our team is always happy to give your business a free demo of our software and provide consultation as to the best possible solution for your printing business.

© Copyright Devia 2022