MAY 2015

PAGE WEIGHT

How page weight affects page speed and what you can do about.

A one-second delay in page-load time leads a drop in….

11%

PAGE VIEWS

7%

CONVERSIONS

16%

CUSTOMER SATISFACTION

47%

of consumers expect to wait no longer than two seconds for a web page to load

http://blog.crazyegg.com/2013/12/11/speed-up-your-website/

How To Better Optimize Our Pages

What can those who publish in the platform do to reduce page weight?
KATHERINE
Save Images At Ideal Compresion

LOSSY

  • Reduces the file by deleting certain information (such as EXIF data from a camera)
  • JPEG is a Lossy Compression type

LOSSLESS

  • Saves all data that was originally in the file, causing larger file types.
  • GIF is a Lossless Compression type
  • PNG is a Lossless Compression type and is preferred as it has better compression and interlacing than GIF

LOSSY IS ALWAYS PREFERRED FOR WEB PHOTOS!

Save Images At Ideal Compresion

Still getting large JPG files for photographs?

Try adjusting your settings in Photoshop or Illustrator.

or

Try an online editor, like
Compressor.io
Save Images At Ideal Compresion

Using the platform editing tool?

Be careful, using transparency on an image changes your well compressed JPG into a PNG.

When possible, make image edits in Photoshop to photographs or JPGs.

Save Images At Ideal Compresion

What file type should I use?

JPG

Photographs only

Keep hero images at 1200px or less, please!

PNG

Vectors, icons, things with transparency and few colors

GIF

Animated imagery*

*It would still be preferred for page weight to use a PNG of sprites and animate with CSS
Save Images At Ideal Compresion

Can you achieve it with CSS?

Are you trying to put text within a circle? Or perhaps you want to add a shadow or arrow shape to something? Whenever possible, use CSS to style over images. This is much smaller and does not require a request to get anything!
1
2
3
CSS STYLED
PNG
HTTP Requests

Minimize how many requests a site makes.

When a site loads, the site makes a request for elements, like images, JS, and CSS from the browser.
Each individual page script (linked files in the headers, scripts we add) and each individual image adds to the amount of HTTP requests that have to be made. This can add up quickly. Minimizing requests a whole is good, but minimizing the requests in the <head> area is our main goal.

We load at least 1 file from the ion platform (how many components you have affects this, the more components, the more Javascript files you will need) and in addition, if you have multiple page scripts or custom code in the Scripts area, this can increase the amount of requests. All requests above the head must be loaded before the page can begin to render. Always try and combine CSS and javascript into one.

Add Javascripts to the </body> of the page, unless you absolutely have to add to the <head>
Publishing Best Practices

Eliminate empty containers

Empty containers = additional HTML in the page that adds to render times.

While generally, a few empty containers might not kill a page, it is best to eliminate any empty containers. For instance, when using a centered column in a grid row, delete the extra two blank columns on either side.

CORRECT
INCORRECT
Publishing Best Practices

Do not mix old components and new components

This adds to page weight as they require different JS files (different versions of jQuery since older components rely on an older version).
Publishing Best Practices

When PageSpeed scores are important, reduce the amount of interactive elements

Interactive elements (components, freestyle forms) each have their own Javascript file that makes them do what they do so well. Having many of these on one page can really slow down how fast the page loads because it has to make more requests for Javascript files.
  • Full page slider is probably the heaviest component - use flow instead of full page slider for quizzes or similar content when page speed is important.

  • Minimize the number of sections in flow or full page slider.

  • Subject to change with platform enhancements. We will try and keep this info updated in the experience room.

Publishing Best Practices

Look for large scripts or many scripts

Large scripts in the head, or many tracking scripts, can slow down the page.
Minimize when possible.
1 large script is preferable to many small scripts (combine whenever possible).
When you cannot minimize, try to move to </body>
Publishing Best Practices

Beware of iFrames

iFrames contain their own code and requests - so while an iFrame could load very quickly, it could also load very slowly. When looking into the source code of an iFrame, if it is pulling many Javascript files and additional elements, it could be slowing down the page.
iFrames can also be used in a positive manner to reduce page weight. iFrames are outside of the first render block.

How To Position To Clients

How to review heavy pages and speak about page weight with your clients.
DAVE
Reviewing

Items to Consider

How many page scripts?

  • Loading jQuery multiple times?
  • What are the scripts doing? Are they doing the same action?

How many widgets?

How many components?

Images:

  • Check image sizes (both in pixel and in bytes)
  • Animated gifs (these can be very heavy)
  • Are background images responsive (large backgrounds can slow down the page)

Page load speed

  • This will help you see how long it takes to actually load the page as opposed to Google PageSpeed Insights
http://www.webpagetest.org
Positioning

Suggestions to Make

Less scripts?

  • Are all scripts necessary? If not, ask customer to remove unnecessary scripts.
  • If so, ask if they can reach out to third party to see if there is a lighter/asynchronous version of the script available.
  • If they’re in the <head>, can they be moved to the closing </body>?

Smaller image sizes?

  • If images are larger than they need to be, ask if smaller images can be uploaded
  • Can transparencies be removed?

Interactive Content

  • Are all the widgets/components on the landing page necessary?
  • Can some be moved to another page?

Mobile

  • Are there smaller images that can be used for mobile?
  • Can a separate mobile page be built?
Positioning

Common Questions

Why can’t render blocking javascript be removed?

How do we leverage browser caching?

  • These are two of the highest recommend actions from Google.
  • There is not a simple answer we are able to give to customers beyond that this is how the platform currently works and we are not able to remove all render blocking javascript nor are we able to leverage browser caching.
  • If updates are made to the content on the page (i.e. image sizes, scripts, etc.), these two recommendations from Google will become less important and the Google PageSpeed Insights score will be improved.

Send to support post for more information

Support Post