Performance tips

Kyoto loads no outside libraries and keeps each section's code with the section, so a page only loads what it shows. Most of a store's speed, though, depends on its images, fonts and apps. These tips keep a Kyoto store fast.

Fonts

Japanese fonts are the biggest choice. Japanese font files are much larger than Latin ones. In Theme settings > Typography, Japanese font source set to System fonts loads no Japanese font files at all and is the fastest option. Font library gives you Shippori Mincho and Zen Kaku Gothic New on every device at the cost of more download.
Use as few different fonts as you need. Choosing the same font for Body font and Accent font means one less file.
Chinese pages always use the device's fonts, so they load no Chinese font files.

Images

Upload large originals (see Getting started); Shopify serves each device a correctly sized copy.
Kyoto loads the first picture of the page early and the pictures further down only when they come near the screen. Put your most important image in the first section.
Cut-out .png files with transparency are heavier than photos. Keep them around 1600 px on the long side.
Add a separate Mobile image to heroes when the desktop image is very wide, so phones download a picture shaped for them.

Video

A background video in the first section is the heaviest thing a page can load. Keep it short (under 15 seconds), silent and compressed, and set a cover image.
YouTube and Vimeo videos in Kyoto load only when the shopper presses play.

Motion

Motion in Kyoto is built with the browser's own animation features rather than a script library. If a page feels heavy on an older phone, choose Standard or Subtle in Theme settings > Motion, or turn off Enable scroll effects.

Apps

Every app that adds code to your storefront adds loading time. Remove apps you don't use, then check App embeds in the theme editor and turn off embeds you don't need.
App blocks usually load only on the pages where you place them, while app embeds load on every page. Prefer app blocks when an app offers both.

Sections

Each section you add is more for the page to load. Hide or delete sections you don't need instead of keeping them empty.
Sections with many products (product shelf, collection tabs, recently viewed) cost more than text sections. Show only as many products as the section needs (Number to show).

Preloading

Preload pages on hover (in Theme settings > Accessibility and more) starts loading the next page when a shopper points at or touches a link, so it opens faster. Keep it on unless an app conflicts with it.

Measuring

Shopify's web performance report (Online Store > Themes, then View report) shows how fast your store is for real visitors. For single pages, run Google's PageSpeed Insights on your home page, a collection and a product. Compare before and after a change rather than chasing one number: scores vary from run to run.