Decreasing load times and optimizing performance: Preparing a Large project in Hype

knowledgebase

#1

Tumult Hype is built for producing animations as a part of other websites, but we have also seen projects that take the form of entire websites. While building and launching large Tumult Hype projects with many scenes is possible, there are a few things you should keep in mind to ensure that your website loads quickly, works well on mobile devices, and is easy to maintain:

Defer loading of images

Images added to your document will need to be downloaded when your visitor first visits your site, unless you explicitly turn off ‘Preload’ in the Resource Library. Images with ‘Preload’ checked will be downloaded before your Tumult Hype document can appear. The image below will be downloaded only when its scene is loaded:

Split up large projects

Separate large projects into multiple parts. As the number of elements used in your projects increases, the memory requirements of your document also increase. This can cause memory and performance issues on mobile devices. A good upper limit on the number of scenes is 15. This ensures that the elements and images loaded into the browser’s memory is low. A good way of testing this upper limit is to create a scene with the approximate number of elements, and to duplicate it 15 or more times (select a scene, right click on it, then click ‘Duplicate Scene.’) Loading this document on a device will give you an estimate of its performance and alert you to memory issues.

A typical structure of Hype document to make up a single website would look like this:

  • Index (Links to separate parts of the site)
  • Gallery (This contains links to different portfolios, but does not contain a portfolio)
  • Portfolio 1
  • Portfolio 2
  • Contact Page
  • About

To link these different documents together, you would use each documents URL in the ‘Mouse Action’ area. If you were in the ‘Index’ document and you want to link to the ‘Contact’ page, you would use the name of its .html file: http://site.com/contact.html. Naming your .hype documents simple one-word names is useful when linking between them since the name of the exported document defaults to the filename. Here is a technique to link to a specific scene using a snippet of Javascript :

Consider mobile devices:

Please read more about Mobile Device support in our documentation.

Identifying large resources

The more images, animations, and content you have, the longer it will take to load your Tumult Hype document. There are a number of ways to decrease loading times: First, determine what’s taking so long
First, open up the Resource Library and sort by filesize. Uncheck ‘Preload’ for large images. Another way to check what is taking long is to load your site from the web with the Safari web inspector turned on. This can show a timeline of what resources are holding up the load. Here’s instructions to see this:

  1. In Safari, go to the Advanced preferences and check “Show Develop menu in men bar”
  2. Choose ‘Safari > Empty Cache…’ and empty
  3. Quit and relaunch Safari
  4. Load your page
  5. Choose the new ‘Develop > Show Web Inspector’ menu item
  6. Click on the Resources tab
    This will give a timeline of how long it took each resource to load, and should make it easy to identify if you have any large resources that are holding up the load time. There are some more detailed instructions here.

Please note that Tumult Hype will preload all image resources, so if you have particularly large images that can hold up the initial load time. Videos will not slow down the initial loading time.

Optimizing Images:

On your Mac

If you have already added images to your project and you wish to optimize them, download Imageoptim and drag your exported Resources folder onto the application. (Please make a backup of your document first in case there are any issues).

Please note that Hype will downscale your images when appropriate and also generate @2x images for retina device support. Using Imageoptim will optimize all images.

Other ideas

Delete Unused Keyframes
When you create animations, keyframes define the starting and end point. If you don’t animate between keyframes, Tumult Hype still saves those keyframes into the generated JS file. You can remove unused keyframes (these appear as red diamonds unconnected to other keyframes) by clicking and dragging over them, then hitting the delete key.

Tell your user what’s happening

If you’re finding that you can’t get your website to load quickly enough, it’s a smart idea to enable the ‘Loading Indicator’ for your site. Open the Inspector, and go to the ‘Document Inspector’ tab. Select ‘Show Loading Indicator’ and your users will see a loading bar as the site downloads. It’s nice to know the gears are turning. IF you want to create your own loading indicator, please see our guide on creating a custom preloader.

Use a CDN

Host your site files on a CDN like Amazon Cloudfront, or sign up with Cloudflare to get files to your users faster (they have a free plan).

Here’s an unofficial CDN: Unofficial Tumult Hype CDN

Enable Gzip your Server

This post explains how to make sure your server is serving compressed content over the Internet. this has a large effect on JavaScript files which can give you a speed boost.

Caching elements for Offline applications

For a quick tutorial on how to get your site assets to work with a persistent ‘Application Cache’ read this guide on cache.manifest.

While this will not increase the time it takes for your document to load, it may increase the speed on subsequent loading on your site. It places image content into your browsers cache so they will not be downloaded unless the filename has changed, or you have re-exported your document. Cache manifest files are versioned.

Further Reading


Creating a Custom Preloader
Multi HTML Pages Share Same Hyperesources Folder
Daft Website Online
How to plan Preloads more accurate way than inspector's checkbox
Optimizing for Responsive
Download indicator is too low
3 questions about nearly completed site
Pre loaded images
Apple rejecting HTML project?
Browser Cache for your Tumult Hype document & resolving flashing Images during scene transitions & animations
Questions about: links .html and which sizes of scenes
Knowledge base: Guides from the Tumult Team
Will not load on iPhone or iPad
Video tutorial: Uploading your Tumult Hype document to a Web Server and Embedding Within Another HTML Page
Getting 50MB Hype Project run on iPad3
Speeding up/optimizing Hype created PhoneGap App
Website loading
Flash between scenes
Duplicate items in Resource folder
(Michael) #2

Great resource, Daniel!

If I to create a full site in Hype, I’d like to:

  1. Be able to combine all Hype common resources ( “HYPE-458.full.min.js”, “HYPE-458.thin.min.js”, etc.) in the same folder. Otherwise 40-page site will end up with 40 copies of .hyperresources. I know, I can edit page HTML later on, but if I alter any thing in Hype, I’ll have to do it al over again.

It’d certainly be better to be able to create Hype project and Hype file.

  1. Use local links instead of absolute URLs. This is possible if in Go to URL one uses “/page.html”

  2. Use of external CSSs. Ability to link to external CSS in the project level. Sorry, if I miss it, but how would I add a class to Hype element?


(Michael) #3

Figured out how to add external CSS class to an element: in innerHTML.


#4

(Alex) #5

I tried Imageoptim, it is really useful if export resources folder, but what about if the project is export by OAM widget? anyway to optimize those images either?

Thanks.

Alex


#6

Couple ways to do this:

Each time you export as OAM: You could break open the OAM widget by renaming it as a zip file, unzipping it, then optimizing those images, and then re-zipping it and changing the extension to OAM.

Or, one time, based on the current export state: When Hype exports images it will scale them down based on how your using the image in your document. So you would export to a folder on your desktop, optimize those files, and then go into the exported resource folder and manually replace every image. You would then need to turn off ‘automatically optimize when exporting’ – this would require that you add both the 1x and @2x version of each image back in. The first option is probably best :slight_smile:


Optimizing an OAM file after Export with Imageoptim
(Alex) #7

Yes, it is. I did not know OAM could be unzipped. Thanks.

Alex


(Alex) #8

there is a dead link of Here

Alex


#9

8 posts were split to a new topic: Optimizing an OAM file after Export with Imageoptim