- Animation performance dramatically depends on the size of an image. The smaller image – the smoother animation. So don’t be lazy and serve responsive images, or at least don’t serve images larger than 1200x1200 for phones.
- Don’t do anything during the animations that can cause Paint or Layout. Don’t append new elements to the DOM. Don’t change
visibility. Don’t breath. You can only change
opacity. Delay all your changes after animation ends – use events:
initialZoomInEnd(initial zoom in animation ended) and
initialZoomOutEnd(initial zoom out animation ended).
- Try to avoid complex
:activeeffects on thumbnails that open PhotoSwipe if you have zoom-in/out animation enabled (apply the first rule).
- Make sure that you don’t have complex styles on UI over PhotoSwipe sliding area. For example,
text-shadowon caption text can cause issues.
If you followed above steps and performance of your gallery differs from PhotoSwipe home page, start isolating PhotoSwipe on page by excluding all JS/CSS/HTML code not related to it. Make sure that you don’t have any kind of banner rotators that continuously run some animation behind the PhotoSwipe.
- Default PhotoSwipe UI has
svgsprite. By default, it’s loaded only after PhotoSwipe is opened. To make controls appear instantly, you may merge gallery sprite with your site “main” sprite, or preload it via CSS.
- Defer the loading of PhotoSwipe JS file(s) if gallery is not the main feature of your page.
- Combine JS, minify and combine CSS files.
Know how this page can be improved? Suggest an edit!