Tips for Optimizing Compositions

There are a few key things that you can do to optimize your Compositions in order to decrease load-time. Optimization is key in the web world.

Reduce Subcompositions

Oftentimes loading problems arise when custom Compositions have too many Subcompositions. Try to limit the amount of Subcompositions within a Composition to 25. 

When Possible, use the Table Widget in Composer

Within Composer, try to use the Table Widget to handle large amounts of information. Doing this will reduce your need for adding unnecessary Subcompositions.

Downsize Your Assets

Reducing your asset file sizes (like images), is an imperative piece to the optimization puzzle. Remember even though though it doesn’t look like it, you are building webpages in Singular and no one likes a slow loading webpage!

Just one large rough file left behind in a Composition can really slow you down. For image file size reduction, we recommend:

  • TinyPNG, an online resource that compresses your .pngs by up to 50-80%. Basically send your .png files through this free site and put those images on a much needed diet!
  • SVG Minifier is great for minimizing .svgs. "Remove superfluous cruft and reduce the size of generated SVG files".

Note

If you’re authoring a Composition at 16:9 aspect ratio (perhaps 1920x1080 or 1280x720) for example and in that Composition you have a headshot image ask yourself, what is the effective resolution of that image? If the headshot image is never displayed at more than say 250x250 pixels then maybe make the image 256x256. 

Alternative file formats to consider:

  • GIF format is limited to 256 colors and is a very common choice for use on the Web. GIF is a good choice for storing line drawings, text, and iconic graphics and short animations at a small file size.
  • PNG is also a common choice for use on the Web. PNG is the choice if you need transparency.
  • JPG is useful for storing photographs at a smaller size than a BMP. JPG is a common choice for use on the Web because it is compressed. Note that for storing line drawings, text, and iconic graphics at a smaller file size, GIF or PNG are far better choices.

Limit Amount of Fonts

Limit the amount of fonts you are working with in Composer. The more different fonts used in a Composition, even if they are in the same family, the slower the load time. The load time can increase because each font in its entirety is loaded into the browser’s memory (along with everything else).

Keep it lean and clean.

Test Your Speed

GTmetrix is a free tool that analyzes your page's speed performance. Using PageSpeed and YSlow, GTmetrix generates scores for your pages and offers actionable recommendations on how to fix them.

Check out GTmetrix, here.

Was this article helpful?
1 out of 1 found this helpful

Comments

0 comments

Please sign in to leave a comment.