Site Accelerator (formerly photon)

Note: “Photon” is now part of Site Accelerator.

Jetpack’s Site Accelerator helps your pages load faster by allowing Jetpack to optimize your images and serve your images and static files (like CSS and JavaScript) from our global network of servers.

How to Activate the Site Accelerator

  1. In your site’s dashboard, go to Jetpack → Settings.
  2. In the Performance & speed section, toggle on “

How Site Acceleration Works

Images

Our image CDN (formerly Photon) is an image acceleration and editing service. That means that we host your images from our servers, alleviating the load on your server and providing faster image loading for your readers.

  • It filters content but doesn’t change the info in the database.
  • It currently only acts on images in posts and pages, as well as featured images/post thumbnails via the image_downsize filter.
  • It will apply to old posts and new ones alike and can be turned on or off easily.

Static Files

We host static assets like JavaScript and CSS shipped with WordPress Core, Jetpack, and WooCommerce from our servers as content delivery network (CDN), alleviating the load on your server.

  • It filters URLs of assets that are loaded with every WordPress page.
  • It currently only acts on assets shipped with WordPress Core, Jetpack, and WooCommerce. Theme and other plugin assets are not supported at this time.

Questions & Answers

  • How does Site Accelerator determine which dimensions to serve for an image?
    It looks at the img element’s width and height attributes and then serves an image resized to those dimensions or to the width of the containing element (whichever is smaller).
  • Is there any way to keep the “width” and “height” attributes in the CDN-generated HTML?
    We remove the width and height arguments to prevent your images from skewing when the resized image doesn’t have the same dimensions as the original. This is particularly important when you switch from one theme to another, and the new theme is narrower than the previous theme. One of the benefits of it is that it will automatically resize your images so they don’t exceed the width supported by your theme.

Limitations

  • No cache invalidations – currently the images are cached “forever” and static assets will be tied to the public version of WordPress, Jetpack, or WooCommerce that you’re using. For images, if you want to “refresh” an image you will need to change its file name. Adding random query arguments, commonly known as cachebusters, will not work.
  • If there is an image you’d like us to purge, please contact us with a direct link to the file as it appears on your site. These will begin with i0.wp.com, i1.wp.com, or i2.wp.com.
  • We only fetch, resize, and serve gif, png, and jpg images from servers that listen on port 80 for HTTP and port 443 for HTTPS. This is about 99.99% of the web servers in the world. If you are having issues, please try using the jetpack_photon_reject_https filter.
  • We will not “upscale” an image in most circumstances. If your original image is 1000px wide and you ask for us to make it 5000px, we will serve you the original 1000px image. Upscaled images are usually of poor quality and we want to avoid that.
  • If your server takes longer than 10 seconds to upload the image to our CDN, the upload will time out and your image will appear to be broken. Try to upload a differently-named image with a smaller file size if this happens.

Themes and plugins can also use the Photon API to transform images using GET query arguments. Developers will find Photon API examples and documentation on developer.wordpress.com.

This is only allowed to be used by sites hosted on WordPress.com, or on Jetpack-connected WordPress sites. If you move to another platform, or disconnect Jetpack from your site, please also switch to another magic image service. Abuse of Jetpack or violation of the WordPress.com Terms of Service could result in suspension of your site from WordPress.com-connected services.

Privacy Information

This feature is deactivated by default. If you ever need to deactivate this feature, you can toggle them off under the Performance & speed section from Jetpack — Settings — Writing in your dashboard.

Data Used
Site Owners / Users

While not actively used in the delivery of this functionality, EXIF data may exist (and be accessible to site visitors) in any of the images that you upload to your site.Additionally, for activity tracking (detailed below): IP address, WordPress.com user ID, WordPress.com username, WordPress.com-connected site ID and URL, Jetpack version, user agent, visiting URL, referring URL, timestamp of event, browser language, country code.

Site Visitors

None.

Activity Tracked
Site Owners / Users

We track when, and by which user, the feature is activated and deactivated.

Site Visitors

None.

Data Synced (Read More)
Site Owners / Users

We sync a single option that identifies whether or not the feature is activated.

Site Visitors

None.

Comments Off on Site Accelerator (formerly photon)

Performance

Jetpack offers a growing range features to help you improve how fast your site loads.

Jetpack includes features which improve performance on mobile devices and slow or unreliable connections, or with large amounts of site content.

Here are some resources to help get you started:

  • Site Accelerator (formerly photon) - Jetpack's global Content Delivery Network (CDN) optimizes files and images so your visitors enjoy the fastest experience regardless of device or location.
  • Lazy Images - Lazy Images makes pages load much faster by only loading visible images, waiting to load images that are offscreen as you scroll down.
  • Search - Jetpack's Search module is a powerful replacement for the search capability built into WordPress.
Comments Off on Performance

Lazy Images

Lazy Images makes pages load much faster by only loading visible images, waiting to load images that are offscreen as you scroll down.

In an effort to improve and optimize your site’s loading time, Lazy Images provides a significant benefit in page speed and bandwidth and is especially great for users in low-bandwidth or expensive-bandwidth environments, particularly for mobile users.

Activating Lazy Images

  1. Navigate to Jetpack → Settings → Writing.
  2. Scroll to the Speed up your site section.
  3. Click the toggle to activate Lazy load images.

What does it do?

Lazy images filters the post content and modifies image tags so that the src attribute loads a transparent placeholder image.

So, for example, <img src="https://jetpack.com/image.jpg" /> would become something like <img src="https://jetpack.com/placeholder.jpg" data-lazy-src="https://jetpack.com/image.jpg" /> .

When JavaScript then loads, it will look for all images in the current view and replace the src attribute with what is in data-lazy-src. This also occurs as the user scrolls down the page and images come into view.

Why does this matter?

Lazy images can drastically improve site performance. With mobile usage of the Internet now surpassing that of the desktop, the majority of our users are likely accessing our content with mobile devices. Site performance optimization is incredibly significant.

By default, when a web page loads, it attempts to also load all of the images that it sees in the source. For a visitor using a desktop browser, the time and bandwidth necessary to load that page may not be an issue.

For mobile visitors, where the view is much narrower and bandwidth is a more significant concern, this full loading can be problematic. That’s using bandwidth to load images that they may not even want to see.

With lazy images, those images will only load when they actually appear on-screen, reducing bandwidth usage by as much as half of what is used without lazy images enabled.

Customizing Lazy Images

The code snippets below provide examples of some of the filters included in the module. You can add these code snippets to a functionality plugin or to your theme’s functions.php file.

These filters allow you to tweak the lazy image functionality.

Lazy images is set to be enabled for your entire site by default. You can use the filter is lazyload_is_enabled to customize when lazy loading should be enabled. For example, if you don’t want lazy images to run on a certain page, you could hook in and disable lazy images for that page.

By default, Jetpack will load a 1×1 transparent gif, but certain implementations may call for something else. The filter lazyload_images_placeholder_image will allow you to specify your own placeholder image.

The jetpack_lazy_images_new_attributes filter will allow you to modify the attributes for a lazy loaded image as the content is filtered. This is to allow for changes based on more customized and specific implementations.

You can instruct Lazy Images to skip any image using the skip-lazy css class or any given class of your choice by using the jetpack_lazy_images_blacklisted_classes filter.

Have questions? Please feel free to contact us  for more personalized assistance.

Privacy Information

This feature is deactivated by default. If you ever need to deactivate this feature, you can toggle the Lazy load images setting in the Speed up your site section from Jetpack — Settings — Writing in your dashboard.

Data Used
Site Owners / Users

For activity tracking (detailed below): IP address, WordPress.com user ID, WordPress.com username, WordPress.com-connected site ID and URL, Jetpack version, user agent, visiting URL, referring URL, timestamp of event, browser language, country code.
Site Visitors

None.
Activity Tracked
Site Owners / Users

We track when, and by which user, the feature is activated and deactivated.
Site Visitors

None.
Data Synced (Read More)
Site Owners / Users

We sync a single option that identifies whether or not the feature is activated.
Site Visitors

None.
Comments Off on Lazy Images
  • Enter your email address to follow this blog and receive news and updates from Jetpack!

    Join 104,053 other followers

  • Our most popular posts

  • Browse by topic

  • Unlimited Video Hosting

    Jetpack Premium now provides unlimited use of our video CDN. Save on hosting storage and bandwidth costs by streaming fast, ad-free video from our global network.

    Learn More