PhotoSwipe

Performance Tips

Animations

• 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 display or visibility. Don't breath. You can only change transform and opacity. Delay all your changes after animation ends – use events: beforeChange (slide switched), initialZoomInEnd (initial zoom in animation ended) and initialZoomOutEnd (initial zoom out animation ended).
• Try to avoid complex :hover and :active effects 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-shadow on 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.

If it doesn't work fast even after you isolated PhotoSwipe – open an issue on GitHub and provide a link to reduced test case.

Including Files

• Default PhotoSwipe UI has png and svg sprite. 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!

</> with <3 in by @dimsemenov