Loading

Speed

From Showit Desktop Manual

When building your Showit website you have complete control to create whatever it is you want. But as Peter Parker would say, "With great power comes with great responsibility." Maverick however would say, "I feel the need...the need for speed." In short, speed optimization is something you have to work on.

Ultimately, it's up to you whether you create a speed optimized website or a very slow website. Showit is hosted on super fast Amazon Web Services, but even the best servers cannot overcome a bloated site with too much content to serve up. Showit attempts to do what it can to optimize your site, but some decisions will need to be design decisions and below we outline some best practices for fulling your need for speed.

Perception of Speed

One of the first misconceptions about a site being slow is the perception to the user that it is taking way too long to load a page. With a traditional HTML page, the text content shows up first and then the graphical elements of the page fill in as they download. This is often called "painting down the page". With Showit each page is completely rendered in Flash, so the entire page content and graphical elements download and the whole page transitions into view. This creates a gap between when the user clicks on a link and when the complete page is displayed. Animation and preloading creates a more fluid viewing experience, but if the user is not seeing some kind of visual indicator the perception is the entire site is running slow. We've outlined some steps below to help improve your site's speed perception.

  • Use quick Transitions out that are typically less than a second so the previous page content disappears quickly.
  • Use Preload Layers with animation to indicate page activity. This shows the status of the activity so users are aware page loading is happening.
  • Minimize the Transitions into a page and the delays on layers. Again, less than one second transitions will help make content appear faster. Certain sites achieve a cool experience with longer transitions, but overuse can lead to a poor user experience.
  • Build your Home page to have a minimal number of Layers and content so it loads quickly. If you want your Home page to be high content, we recommend building a Splash Page for viewers to first land on. The expectation for entering your site is then set, and they know something is happening when transitioning to your Home page.

Hosting Server

Showit has added Advanced Hosting features to allow your site to be loaded from distributed servers across the globe that greatly increase the loading speed of your site. By default, this option is not turned on because of the caveats with how files are updated when you switch to the Rapid Edge servers. When building your site, it is best to keep this option off and then once you get to a ready version of your site you can switch the Advanced Hosting setting. If you update your site often, you will gain the advantages of Rapid Edge by using the Showit Hybrid Hosting while also having instant updates.

  • Even if you host the HTML of your site using a Third Party Host, this setting still affects how the content of your site is loaded and when you change this setting, be sure to Export and Upload HTML.

PNG Images

One big note that can catch some people is to beware of PNG files as they are uncompressed in Showit and can get very big. The suggested use for 'png' files is when you need to have part of an image transparent, otherwise JPG is the preferred choice. But even in the cases where you have transparency, watch out for the size of the file as this can drastically slow down your site.

Fonts

The next thing to watch out for is Fonts. Every font indicated in your Style will be loaded in Flash before the page loads. It is important that the fonts you set in your Style represent the fonts you are actually using in your site. If you use a font in a text box that is not in your Style it will be loaded later and delay the page loading process. This is not to say you cannot or should not use different fonts, rather to note that using lots of different fonts on a single page attributes to a slow loading site.

Image Sizes

Some of the main content on your site is Images and there are some things to watch out for in your images. By default, Showit creates three sizes for each image and chooses which one of these images to load based on how it should look to your site's viewer. You can adjust the default size(s) in the Preferences panel, making them bigger or smaller. Note this will only affect images that are added after changing the Preferences, not images that already exist in your Media Library.

The default JPG compressor in Showit is good, but you can get smaller sized images with higher quality by exporting them from Photoshop or Lightroom. To do this export your images at the same size or smaller than the size set for your "Large Image" in Preferences. Then when you add the files to Showit, they will not be resized and just copied in with the compression you exported them with.

Also watch out that if you export files with dimensions smaller than set in your Preferences but the images are not compressed, they can end up being very large file sizes like greater than 1 or 2 megabytes. Showit won't resize these images because the dimensions are correct, but they could end up slowing down your site because they are really large for web standards.

Music

Music files are loaded via the Music Player and so your site will not wait for the music to be loaded before transitioning into a page. However, if you use really large music files (typically anything greater than 2 megabytes), it can chew up bandwidth so that any other content that is trying to load will be competing with the Music download and cause the overall site to feel slow. Check out the suggestions for Audio on how to compress your music to be appropriate for a website.

Animation

The Transitions in a site contribute to the overall experience, and overuse of transitions such as the Slide, Elastic, Inflate and Deflate on large Layers can slow down the refresh rate of the animation and make it appear choppy. This is going to be dependent on the user's computer and how fast it can run the animation, so some computers will look smooth and others will be choppy. For a best practice, it is recommended to keep the big movement animations limited to only a few elements at a time that don't occupy a large portion of the viewing area on the site. In addition, the Blur Transition and Effect is very computer processor intensive so use sparingly.

Pages and Style Groups

Style Groups are a powerfully unique component of Showit but be aware that overuse can lead to a bloated site that doesn't perform as well. As a best practice, only use Style Groups when necessary, for instance a single page inside a Style Group typically means the Style Group is unnecessary and just creates additional overhead.

In addition, try to keep the number of Pages in your site to a minimum. Early on in Showit there were a lot of galleries that depended on each image being on a separate page which has proven to be tough to manage for the user and also creates a lot of unnecessary overhead. As a best practice, try to use the Photo Gallery widgets to build your galleries as these are much more optimized for navigation, preloading and user experience. The photo gallery widgets will continue to be a focus in Showit as we update the current ones and add new ones because they help you create the best experience possible for your viewers.

Reduce Download Requests

The topics mentioned above are the simplest ways to speed optimize your site. For advanced users who want to tune everything, the following will provide you with lots of opportunities to tinker around and spend endless hours performing speed analysis.

Loading times for a site can vary because it is very dependent on the internet traffic happening over wires via your internet connection. This traffic all happens in the background to retrieve the information so that your website displays. Some traffic happens sequentially (one request after another) and other traffic happens in parallel (a bunch of requests at the same time). The sequential steps happen because the information for the next step can't happen until the data from the previous step is completed.

The below diagram illustrates how a site loads with analysis explaining what these steps do and what can be optimized. The first concept to understand is the fewer requests for data that need to be made, the faster your site loads. The area in white on the diagram shows the requests that have to be made to load a site and are not controlled by the user content. This content is produced by Showit and heavily monitored and scrutinized to be as small as possible to make loading as fast as possible. However, the yellow shows the area under user control: typically every Layer on a page requires an internet connection request except for text layers which only require the downloading of Fonts as discussed earlier. Widgets require an initial request and then additional requests for content they depend on, but this additional content does not slow the initial page load.

SiteLoading2.jpg

  • Step 1 happens when a user enters your website name into a browser or clicks on a link to your website. It is the HTML load from the web host, either to Showit's server if you are using us as a Direct Host or to your server if you are using a Third Party Host. Most web browsers will also request a Favicon that is used as the icon to display on a tab or bookmark. This first step is the only time the web host is contacted, from here out the content is loaded from the Showit hosting.
  • Step 2 is to load the Javascript that detects if the browser has Flash. If the browser has Flash it proceeds to load the Flash swf file that runs the site. At the same time, the browser will be contacting Google Analytics if you have this setup. Sometimes the browser will also attempt to load the image Snapshot of the page, but many times this request will be canceled once Flash begins to load since it isn't needed.
  • Step 3 is the Flash site player that sizes to fit the entire browser and acts as the controlling piece of your site to load content and pages. The first step it does is to load your Site Loader so that it can start to show visual loading feedback and at the same time it begins loading the site information about pages and content.
  • Step 4 happens once the site player completes the loading of the site info. It then knows the info about your site to detect what Fonts you have chosen for a Page in your Style and then also begin loading all the Layers for the selected page. All of this loading begins to happen at the same time as it completes the loading of your page.
  • Step 5 is happening at the same time with the Flash asking for all the files it needs and the browser loading them as fast as it can. For Widgets, the Flash content is loaded and then the widget will proceed to load any content that it needs.
  • Step 6 is happening even after the page begins to Transition into view. Note that even though the widget could be loading additional data, it will let the player know it is ready to display so that the page can show even while it continues to load the photos, video, mp3s, RSS Feeds or SmugMug content shown in it.

Analyze Loading Times

This means the fewer Layers on a page and the smaller in size each of the layers, the faster the whole site will load. You can analyze the loading of the site by using a few free tools. We recommend using the free Safari 4 browser for PC or Mac, as it has great tools built right in. You an also use Firebug for Firefox.

In Safari, you will need to activate the "Develop" menu by clicking the gear in the top right and choosing the menu for Preferences...

SafariPrefs.jpg

On this panel click the Advanced tab and then click the check box for Show Develop menu in menu bar.

SafariShowDevMenu.jpg

Now close Preferences and type your website into the browser. Click the page icon in the top right of the browser next to the gear. In this drop down menu choose Develop and then Show Web Inspector. The web inspector is going to give you all the details of what is happening under the hood of your browser, what the browser is loading, how big it is, and how long it is taking. Click on the Resources tab at the top and then click Enable resource tracking.

SafariResources.jpg

On the top left you can choose to view either the Time view or Size view. The Size view is a great place to start and then click Use small resource rows to get a view like the one below showing the size of all of the content that got downloaded to display your site. From here you can analyze the size of each file being loaded and what might be the cause of your site loading slow.

SafariSizes.jpg

Keep in mind if you are using the Time view the download times will vary, so click refresh on the browser window to see multiple times and get a good sense of how long everything is taking to download. Also keep in mind the browser is displaying all requests - some of these files will show up twice but the browser has a caching mechanism so it will actually be faster in practice and in most cases will not require loading of the same file twice.

International Users

Showit currently hosts web content with Amazon Web Services on servers that reside within the United States. When a request is made to view a website from another country, the files that make up your site are passed through the Internet and the path that it travels to another country can physically take longer to complete due to wire latency, routing, and server hops. For this reason it is very important that you take advantage of the Advanced Hosting options to make sure your content is hosted from the nearest edge location using the Showit Rapid Edge or Hybrid Hosting option.