Follow

Performance

For issues around flashing pages on load or incorrect snapshots (missing images, scaled incorrectly, etc.), also see our Snapshots section.

For one particular flashing element, there can be a few causes of this - try looking at these solutions.

  • Avoid transparency (margins, divs with no background color).
  • Avoid overlapping divs.
  • Try hardware acceleration in CSS - http://blog.alexmaccaw.com/css-transitions
  • Ensure all assets are in HTML manifest
  • Preload all images that should appear in your page's snapshot – see our article on Preloading Image Assets.
  • If you are using -webkit-overflow-scrolling: touch , you will need to hardware accelerate all elements nested inside the element it is applied to. For example:
<main>
 <ul>
   <li>...</li>
   <li>...</li>
   <li>...</li>
 </ul>
</main>
main {
   height:420px
   overflow-x:auto
   -webkit-overflow-scrolling: touch
 }   

 ul, li {
   -webkit-transform: translateZ(0)
 }

Flashing fonts : On iOS - Ensure your fonts are embedded in the app properly, and using the correct font-family names.

Embedding Fonts : Ensure they are in the html manifest - whether this is automatically generated or manually.

Page transitions are not smooth : Run as much JavaScript on user input as you can instead of relying on document ready or window load events. This will help smooth the transition out as the more JavaScript that is running whilst the transition occurs, the more noticable this will be.

My javascript click events seem to have a delay : Dont use a click event to trigger click events as there is a built in 300ms delay on mobile devices. To avoid this you will want to implement a quick click event. The usual solution is as follows:

var Events =(function(){

   var isTouchSupported ="ontouchend"in document;

   return{
     click: isTouchSupported ?'touchend':'click'
   };

}());

Then instead of using:

$('#foo').on('click', myFunc);

// or

document.getElementById('foo').addEventListener('click', myFunc);

Use:

$('#foo').on(Events.click, myFunc);

// or

document.getElementById('foo').addEventListener(Events.click, myFunc);

 

Ensure dynamic pages are smooth

Sometimes, you'll have a page that is particularly interactive or contains lots of animation. Pages like this can appear jerky when the snapshotter is running, so Pugpig provides you with an option of disabling the snapshotter while a specific page is in the foreground. Add the following meta tag to the page in question:

<meta name="stopSnapshotting" content="yes" />

This technique should be used sparingly, because the snapshotter will pause completely while such a page is displayed.

Was this article helpful?
0 out of 0 found this helpful
Have more questions? Submit a request

Comments

Powered by Zendesk