I spent quite a lot of time optimising the website and spent over $70 in ads so far, but only managed to get 80 content views and 1 ATC so far. Wanted to check if this is normal.
Separately, I did a lot of speed checks with different websites, but one of the few that shocked me was Google's:
They told me that my site took 9 seconds to load on a 3G connection, which was extremely shocking. All the other sites I tried ranged from 1.2s to 5s tops. The question is - which site should I trust and how do I go about further optimising it? I've already done the simple part on optimizing images.
Please refer to my web link on the left, and refrain from referencing the URL in your reply, thanks!
Lisa here from the Social Care team at Shopify.
Google page speed tests are a good resource for gauging how fast or slow your site is loading, however, it's important to take this info with a grain of salt, especially the mobile test you shared above that is done on the desktop! Learn the truth about Google page speed tests here.
We put a large priority on page speed optimization for our merchants. There are two main aspects of improving page speed: server side and client side optimizations. Shopify already does the heavy lifting server side. These are optimizations you can make in your content and code. Many of these changes relate to the quality of your Shopify theme, so it is important to choose a well-built theme (whether it is custom or purchased from our Theme store) that follows our theme best practices. From the look of your site, you are using a Shopify built theme, so that's a step in the right direction!
Below there's a lot of information to take in, however, I want to ensure you have trusted information right from the source! Here's a list of additional actions you can take to increase the speed of your site. These are ranked from 1-11 as impactful for speed, then followed up by what Shopify is doing to help with speed on your site:
1. Optimize your images
How did you optimize the images, did you use an app, or manually resize them? Images are often the largest size assets on your page. Ensure they are optimized to reduce page size.
Choose the correct file format
Use JPGs for most images, including photographs and complex images, for a compressed but visually appealing image. Shopify automatically compresses your JPG images for you through our compression algorithm. Use PNGs sparingly as it is a lossless format (which causes a larger file size), but can be useful for images that require transparencies or highly graphical images (such as an app screenshot). For small graphics such as buttons or icons, GIFs or SVGs (a scalable vector-graphic) can be useful.
Upload correct image sizes
Oversized images take longer to load, so it’s important that you keep your images as small as possible. Be sure to crop your images to the correct size. For instance, if the space for an image is 300px wide, resize the image to that width.
Specify image size using our URL filters
Your browser begins to render a page before images are loaded. If no dimensions are specified, your browser will download the original size and will reflow once the images are downloaded. In order to skip this extra step, use Shopify’s URL size parameters to specify image size in the code. This way an image is never downloaded larger than it’s needed.
Use CSS sprites or Base64 encoded images
Both of these methods save load time by reducing server requests, and are commonly used for smaller images that are loaded often, such as buttons or icons. CSS sprites combine your images into one large image that loads all at once (which means fewer HTTP requests) and then display only the sections that you want to show. Commonly used for images under 10kb, Base64 encoded images become a part of the HTML and display without actually downloading the image.
This is a quick win that allows for fewer HTTP round trips (one isn’t needed for every file) and has a much higher potential for our gzip compression to work.
Each CSS file you are using for your website adds time to your page load speed. Sometimes this is unavoidable, however in most cases you can combine two or more CSS files together using nothing more than “copy and paste”. Check how many CSS files you have with this CSS Delivery Tool so you can combine them. Here are instructions on how to combine external CSS files.
3. Minify HTML, CSS, and JS files
Removing HTML comments, CDATA sections, whitespace and empty elements will decrease your pagesize, reduce network latency and speed up load time. For the non-external files you have access to, you can minify these resources with a tool like Refresh-SF.
Most Shopify theme developers minify their CSS and JS theme files already. If you’re using a custom-built theme, have your developer check if the theme’s CSS and JS files are minified.
4. Be conscious of render-blocking elements
Render means loading, so if something is render-blocking, it means that it is keeping the page from loading as quickly as it could.
CSS loads first before any visible content. Be sure to properly call your CSS files, lessen the amount of CSS files in your critical rendering path, and use less CSS overall. Here are instructions on how you can do all three.
5. Minimize DNS lookups
For any external resource to be downloaded for your page, the browser must “look it up”. The browser must do this at least once for each domain your webpage is receiving resources from. As a webpage becomes more feature-rich it often uses more DNS lookups which makes it render much slower. You can use this Page Requests Tool to see how many external resources you’re page is referring and see where you can cut them down. The good news is any Shopify-hosted assets won’t have this issue as they are all under our CDN domain, reducing the calls from different hostnames drastically.
6. Reduce the number of apps, plug-ins, and scripts
These slow your site, create a larger security footprint, and often cause crashes and other technical difficulties. Deactivate, delete, or remove any unnecessary apps, plug-ins or tracking scripts. Try selectively uninstalling problem apps, then measuring page load time. This way you can identify any that harm your site speed.
I have noticed on your site that you have the 'recently purchased' pop up on the left-hand side, as well as the 'spin to win' app on the right-hand side. Along with some other functions like the add to cart overlay. Both of these will affect the load and function time of your website.
7. Minimize redirects and fix mixed content errors
Sometimes to indicate the new location of a URL you need to redirect the browser from one URL to another. Redirects trigger an extra HTTP request and add latency. Only keep redirects which are technically necessary and you can’t find any other solution for it. Moving your old store to a new platform and SEO migration tactics are the right reasons to use short-term redirects. Long-term permanent redirects are okay, but they shouldn’t be used on the entry point for visitors (usually your homepage). You can use this redirect mapper tool to see what redirects are present on a specific page.
If you’ve activated your SSL certificate, there may be some content that is still linking to HTTP resources, causing a redirect to the equivalent HTTPS link. It’s important to fix your mixed content errors as according to Google, mixed content degrades the security and user experience of your HTTPS site.
8. Avoid bad requests and broken links
Broken links result in 404/410 errors. These cause wasteful requests. Fix your broken URLs (pay special attention to images). Use this Broken Link Checker for free to see your broken links so you can fix them.
9. Defer videos, images, or other assets to load as you need them
A video or image can be deferred until after your initial page load. This will allow your page to load quickly without having to gather all the files and resources that aren’t in view yet. For example: loading product images in a “quick view” pop-up only after the customer requests them, or loading videos as they are scrolled into view. Here are instructions on how to defer videos and how to defer images.
You can even defer Social Share buttons (Facebook, Twitter) and just about anything else. Here are the instructions on how to defer almost anything.
10. Specify a character set
Most theme developers already include a character set at the top of the theme.liquid file. Specifying a character set in HTTP headers speed up browser rendering. Double check this code is added in your theme.liquid file:
11. Avoid repeat inline CSS
CSS holds the style requirements for your page. Generally, your website accesses this information in one of two ways: in an external file, which loads before your page renders, and inline, which is inserted in the HTML document itself.You can use this CSS Delivery Tool to see how many external stylesheets you have, and how many times you have inline CSS referenced.
Here at Shopify, our server-side performance is paramount. Here are the tactics we employ to make sure we hold up our end of the bargain.
1. We leverage browser caching
When you visit a website, the elements on the page you visit are stored on your hard drive in a cache, or temporary storage, so the next time you visit the site, your browser can load the page without having to send another HTTP request to the server.
We set our browser caching for cacheable resources hosted on your store (JS and CSS files, image files, media files, PDFs, etc.) to one year for each file, the maximum possible.
2. We use a content delivery network (CDN)
Shopify provides all its customers with a world class CDN run at no additional charge. A CDN is a
collection of web servers distributed across multiple locations to deliver content more efficiently to users. This means that your Shop will be fast around the globe, even in remote areas like New Zealand and South Africa despite the Shopify servers being in North America.
Our CDN serves all assets up using HTTP/2. This reduces overhead by using a single TCP connection with multiplexed streams instead of opening up several connections simultaneously.
3. We've enabled gzip compression
As webpages become more complex, they also become bulky and slow to download. The best way to speed their load time is to zip them with a technique called gzip compression. Gzipping reduces the bandwidth of your pages, thereby reducing HTTP response.
4. We constantly work to reduce server response time
You can view our current mean response time at status.shopify.com. We also fall within Google's recommended server response time.
5. We compress your JPG images to save space
Shopify automatically compresses your JPG images for you through our compression algorithm. Images can contain extra comments and use useless colours. Keeping image sizes to a minimum is a big help for users on slow connections. Saving images in JPG format is your best bet for a compressed, but visually appealing image. Learn more about our compression rates best practices to ensure your image quality.
I hope the above helps and gives you an insight into what Shopify is doing to help with your speed, and gives you some actionable changes to make.
I had a look over your site as well, and I did notice on your homepage under "Most popular in this collection" there's a product " A Bold Test", with no image, and its link is broken. This can come across as unprofessional and does not help with site credibility. I also looked into your social channels, specifically Facebook, and I see the brand only have 5 followers there. This does affect your ability to use retargeted marketing, and make look-a-like audiences which can be very powerful in your marketing efforts. Have you thought about ways you can grow your social following? Learn How to Get More Followers on Instagram: 13 Reliable Ways to Grow Your Audience. Also, what other strategies are you planning on using for your marketing? Here are 17 Social Media Marketing Strategies to Grow Your Online Sales. It can take some time to perfect your marketing strategy so keep up the good work and persistence!
the "Bold Test" was left behind by BOLD Quantity Breaks and that was terrible of the developer. I have already told them to remove it from my shop.
I am driving traffic via FB ads - hence they should land directly on my product page instead of having to browse through my FB page itself.
Nevertheless, are there any other website specific comments that you can offer to help me please? Quite demoralising to have 0 sales despite having optimised the site in general.
To remove any unwanted apps from your store, click into 'Apps', next to the app you'd like to remove there is a trash can icon, press this. Depending on how the developer has set up the app, this should also remove any stored data. Removing the app is step 1, if you believe there is code left over after removing the app we recommend you reach out to the developer. Ask for specific files that the app used, so you can ensure the code is fully removed. Please check this article here for best practices when working with apps. Also, if you're ever concerned with an app and how it is affecting the function of your site, you can let the Shopify support team know and we can temporarily, or permanently disable API access for a particular app.
While Facebook ads are great for driving traffic, it is equally important your store has brand credibility. Customers need to know that they're going to get what they paid for. As the store owner, it is your job to ensure customers feel secure in checking out via your site, and trust they're going to receive the item they paid for. Here are 9 Ways to Earn Customer Trust When You Have Zero Sales.
If you are dropshipping, it is important to set your offering apart from others. Even if you are selling the same or similar products, you can make bundles, offer flash sales and add value beyond the product itself. This can be shown in the advice you give, a flexible refund policy, faster or lower-priced shipping. Find what you can do which sets yourself apart from the crowd and market this alongside your products. Building a reputation beyond the immediate products you sell, will allow you to be able to pivot and stock new items when opportunities arise for on brand hot products. The goal is to develop a loyal customer base that is excited for what you have to offer. Work out what you can do to stand out - whether that's lowest prices, the best customer service or a specialized area. Learn How to Stand Out in a Crowded Marketplace.
From a technical perspective, your website works great and has all the important information it needs i.e contact page, policies, clear navigation and good product descriptions. From a branding perspective, your store could refine it's 'edge'. Persistence is key in finding what works, and what does not! If you need some additional help with marketing, perhaps try using an app like Kit that automates a lot of your day to day marketing tasks. The app knows how to optimize audiences and use remarketing pixels using the data from your store to make calculated next moves.
I understand it can be frustrating when sales do not come as easily as expected. It can take a lot of tweaking to get to where you need to be! I find it helps to find what motivates me and keep that close in mind when dealing with the challenges of starting a business.
The support team is always here if you have any questions along the way! ?