Performance and accessibility

A fast store sells more, and a store that everyone can use sells to more people. Rawnaq is built for both. This page explains what the theme already does for you, and what you can do on your side to keep the store quick and welcoming.

What the theme does

Speed

• Rawnaq uses no frameworks and no third party code libraries. A demo homepage loads about 30 KB of compressed styling and about 30 KB of JavaScript, and the JavaScript is deferred so it does not block the page from appearing. Content already on screen shows at once, and films on the first screen start only after the page has loaded, at a size that suits the screen.
• Images are served by Shopify in several sizes, and each shopper's device receives the size it needs. Images below the first screen load only when the shopper scrolls to them.
• YouTube and Vimeo videos load only when a visitor presses play.
• Fonts come from Shopify's own font library, so no extra font service is called.
• Animations are light and can be switched off. See Theme settings > Animations.

Accessibility

• The whole store works with a keyboard. Menus, drawers, popups, filters and the gallery can be opened and closed without a mouse, and the place you are in is always clearly outlined.
• Buttons, icons and form fields have labels that screen readers read out.
• Colors, focus outlines and tap targets are designed for easy reading and easy tapping. Your own color choices still matter, see below.
• Visitors who have asked their device to reduce motion see less animation. Scrolling text is shown still.
• Headings follow a clear order. In the Heading block you choose the visual size and the HTML tag separately, so a big heading does not have to break the page outline.
• Right-to-left languages are handled in the layout itself, not by a workaround.

What you can do

Image sizes

1. Upload photos that are sharp but not huge. For a full width banner or slideshow, 2000 to 2400 px wide is plenty. For product photos, 2000 px on the longest side is enough. Anything larger only slows your own uploads.
2. Compress photos before you upload them. A free tool such as Squoosh or TinyPNG can usually shrink a file by half without any visible loss.
3. Use the same shape for all product photos, for example 4:5 portrait. Then choose a matching Image shape in Theme settings > Product cards so nothing gets cropped.
4. Add a Mobile image to your slideshow slides and Image banner. A portrait image for phones is smaller and looks better than a wide image cropped to fit.
5. Keep hero videos short, under 10 seconds, compressed and muted.
6. Use PNG only for graphics with transparency, such as logos. Use JPEG for photos. SVG is best for logos.

Alt text

Alt text is a short description of an image. Screen readers read it out, and search engines use it.

1. In Shopify admin, open a product, select a photo and choose Edit alt text. Describe what is in the photo: "Model wearing a camel wool coat, front view".
2. Do the same for photos in your sections. You can set the alt text of an uploaded image in Content > Files.
3. Skip filler such as "image of" and avoid stuffing keywords.
4. Decorative images do not need a description. Leave them empty.
5. For the Logo list section, fill in Brand name for every logo. It is read as the image description.

Apps

Every app you install can add code to your store, even when it looks invisible.

1. Install only the apps you use. Remove ones you tried and dropped, and check that they did not leave code behind (Online Store > Themes > Edit code, or ask the app's support).
2. Prefer features built into Rawnaq over an app. Wishlist, compare, quick view, WhatsApp chat, a free shipping bar, an announcement bar, a size guide and back in stock requests are already in the theme.
3. Pop up apps, chat widgets and review apps are usually the heaviest. Keep one of each at most.
4. After you install or remove an app, test your store speed again.

Page content

1. Keep the home page focused. Five to nine sections load faster, and shoppers get to the point.
2. Use one popup, not several. See Theme settings > Popups.
3. Choose two fonts at most.
4. Limit slideshows to three or four slides. Autoplay is off by default for a reason.

Measure it

1. Use Shopify's own report: the Online Store > Themes page shows an online store speed score for your live theme.
2. For a detailed check, use Google PageSpeed Insights on your real store address. Test both mobile and desktop.
3. Test after every big change, such as a new app, a new slideshow or a video.

Good to know

• Speed scores change with the content you add. A beautiful store with huge images can score lower than the theme itself.
• Real shoppers matter more than scores. Open your store on an ordinary phone on an ordinary connection.
• Contrast is your responsibility too. When you change the colors in Theme settings > Colors, check that text is easy to read on every background, in particular text on images.
• Put text over images only with enough contrast. Use Overlay opacity to darken the photo behind white text.
• Use clear link and button text. "Shop dresses" says more than "Click here", for shoppers and for screen readers.
• Add a caption or transcript for important videos.