Jetpack Boost: Automated Critical CSS feature for paid subscriptions

The Automated Critical CSS feature is available when you upgrade to the paid version of Jetpack Boost. It replaces the traditional locally generated Critical CSS. 

After subscribing to the Jetpack Boost plan, your dashboard will look like this:

Automatically Optimize CSS Loading

Once it has been generated the first time, you will no longer have to manually generate your Critical CSS. Whenever your theme changes or you publish a new post, Jetpack Boost will automatically generate new Critical CSS without any further action required from you.

Once a site has Critical CSS generated, the status field will show how many CSS files and how long ago they were generated.

Troubleshooting

Regenerating Critical CSS

If you suspect that the Critical CSS is out of date or incorrect, you can force the system to regenerate new CSS by clicking the “Regenerate” button on the Jetpack Boost dashboard. The Critical CSS will be regenerated on the Jetpack servers and updated on your site when it’s ready.

Turning off Cloud CSS

If you want to restore the traditional Local Critical CSS function instead of Automated Critical CSS, you can do so by adding the following filter to your site (e.g.: using a mu-plugin):

add_filter( "jetpack_boost_has_feature_cloud-critical-css", '__return_false' );

This will turn Automated Critical CSS off, and after reloading your dashboard, you should see the original option “Optimize CSS Loading”.

Understanding the Status Messages

The current status of your Critical CSS is shown underneath the feature toggle. It can read one of these things:

  • “Jetpack Boost will generate Critical CSS for you automatically.” – This means that the back end has received a request to generate Critical CSS for the site, and will generate Critical CSS for it.
  • “X file(s) generated. Jetpack Boost is generating more Critical CSS.” – This means that Jetpack Boost has generated X pieces of Critical CSS for the site already – but the back-end is working on more.
  • “X file(s) generated Y time ago.” – This means that Jetpack Boost has finished generating Critical CSS for the site, and will not do anything more until you update your site again.
  • “X file(s) could not be automatically generated.” – This means that some parts of the site successfully generated Critical CSS, but some pages failed. Sometimes pages should fail (e.g.: if a plugin creates a strange kind of page that should not have Critical CSS generated for it), so most users can ignore this message. This exists for advanced users to dive in and check the “recommendations” page for more information.
  • An error. Finally, if an error message is shown here, the site does not have Critical CSS but will continue to work without it until the error is resolved.

Get help

For Premium Support, please contact us for further assistance. If you do not have a paid upgrade, you can post a support request on the Jetpack Boost Plugin Support page.

Comments Off on Jetpack Boost: Automated Critical CSS feature for paid subscriptions

Jetpack Boost: Console errors

One of the main features of the Jetpack Boost plugin is called “Optimize CSS Loading”. When you enable this feature, the plugin figures out the most important CSS rules to display first (called Critical CSS) for different sections of your website. This Critical CSS helps pages display your content sooner, so your users don’t have to wait for the entire page to load.

When you enable “Optimize CSS Loading”, the Critical CSS generation process starts, and a green progress bar is shown. If you open your browser’s developer tools, you may notice a few errors depending on the browser you are using.

Here are some examples:

Google Chrome
Safari
Firefox – No console errors

Behind the scenes, the plugin opens sample pages from your site in a hidden iframe to assist with generating the required Critical CSS. The iframe is configured to use tight security settings, which block any script execution from inside the iframe. As a result, many browsers report blocked content in their console.

Since these are safety measures to protect your site; you can safely ignore them!

Comments Off on Jetpack Boost: Console errors

Jetpack Boost

Jetpack Boost is a WordPress plugin that provides one-click optimizations that supercharge your WordPress site’s performance and improve web vital scores for better SEO.

It allows you to optimize your site with the same techniques used on the world’s most successful websites. Each technique is packaged up as a feature that you can activate and try out.

If you want to know more about the Automated Critical CSS feature for paid subscriptions, click here.

Getting Started

What do I need in order to run Jetpack Boost on my site?

  • The latest version of WordPress. If your version of WordPress is out of date, you’ll see a prompt to automatically upgrade with a single click, or you can upgrade manually.
  • A WordPress.com account. Don’t have one yet? Sign up for one here, or create one during the Jetpack Boost connection flow. You only need one WordPress.com account to access all of our services (including Akismet, Crowdsignal, Gravatar, and WordPress.com itself) so if you use any of these services you already have a WordPress.com account you can connect to Jetpack Boost.
  • A publicly accessible WordPress site: no password protection or Coming Soon / Maintenance Mode plugin in use.
  • A publicly accessible XML-RPC file.

How to Install Jetpack Boost

Installing Jetpack Boost from WP Admin

The first option is to install Jetpack Boost from within your WP Admin.

To begin, click on the Plugins link, then click Add New.

Search for Jetpack Boost. The latest version will be in the search results. Click the Install Now button:

Jetpack Boost Plugin

Next, click the Activate button. 

After activating, go to the Jetpack Boost menu item:

Jetpack Boost Menu

and click on the Get Started button:

Get Started in Jetpack Boost

The scores will then be calculated for both Mobile and Desktop as shown below:

Command Line Interface Installation

If you have installed WP-CLI, you can install Jetpack Boost by running this command:

wp plugin install jetpack-boost

Configuring Jetpack Boost

Currently, the plugin has 3 performance features, which can be enabled or disabled via the Jetpack Boost menu in WP-admin:

  • Optimize CSS Loading generates critical CSS for your homepage, posts and pages. This can allow your content to show up on the screen much faster, particularly for viewers using mobile devices. A link to a new Advanced Critical CSS recommendations page displays after you’ve turned on this feature and the optimization has run, which gives customized suggestions. Read more about critical CSS generation at web.dev.
  • Defer Non-Essential Javascript moves some tasks to after the page loads, so that important visual information can be seen sooner. Read more about deferring javascript at web.dev.
  • Lazy Image Loading only loads the images the user can see. As the user scrolls, images are loaded just before they show up on the page. This simple optimization makes sites faster and saves bandwidth for your host and your customers. Note: If you use Jetpack Boost with the Jetpack plugin, turning Lazy Image Loading on and off will turn the Lazy Images feature in the Jetpack plugin on and off as well. Read more about lazy image loading at web.dev.

When you first visit the Jetpack Boost dashboard, your current score for Mobile and Desktop will be calculated. (This may take a few minutes).

When you enable or disable any of the Boost options, you can click the ‘Refresh’ link to calculate your new scores.

Enabling the JavaScript and Lazy Image options is instantaneous, but when you enable Critical CSS, your Critical CSS will be generated. This can take some time, depending on the size of your site.

Frequently Asked Questions

Do I need Jetpack for Jetpack Boost plugin to work?

Jetpack Boost is a part of the Jetpack brand, but it doesn’t require the Jetpack plugin to run. This is a separate plugin from Jetpack and it will always remain that way.

Does it work on a multisite installation?

Yes. If you are using WordPress Multisite, Jetpack Boost must be installed and activated separately on each site in the network (on sites where Jetpack Boost connections are desired).

Any Administrator for that site can create the Jetpack Boost connection. It does not have to be a different Administrator user or a different WordPress.com user for each site.

I have a local WordPress install or a private site. Can I use Jetpack Boost?

Yes, “Offline Mode” now allows testing of Jetpack Boost on local environments easily.

Can I use Jetpack Boost in combination with other performance plugins?

Jetpack Boost and other optimization plugins may have similar optimization options available. Jetpack Boost options can be easily turned on and off, and other plugins usually will offer the same facility too.

We don’t recommend having the same optimization enabled in Jetpack Boost and other optimization plugins, as it is unlikely to benefit your site and may cause unexpected issues.

How do I install Jetpack Boost in my language?

Once you have installed WordPress in your own language, Jetpack Boost will automatically switch to your language, as long as a translation file is available. You can check for existing translations or help translate the plugin here.

How is Critical CSS generated?

This link explains a bit more about critical CSS generation. To add to that, hard-coded/inline CSS is not included in Critical CSS, because it is already inline on the page.

Where is the Critical CSS stored?

The Critical CSS is stored in the database posts_table as a custom post type.

Is Critical CSS generated for mobile versions of my site?

We don’t generate specific CSS only for mobile, but we do take samples of the site with both wide and narrow screen sizes and then combine them so that the Critical CSS produced is valid for both mobile and desktop devices.

How do I exclude some JavaScript files from being deferred?

If you experience unwanted behavior when you defer JS with Boost, it could be that the affected functionality relies on the JavaScript files being in a certain order or being made available to the page as soon as possible.

In such cases, you can tell Jetpack Boost not to defer those specific files by adding the attribute data-jetpack-boost="ignore" to the script tag.

E.g. <script data-jetpack-boost="ignore">.

Troubleshooting

I’m having trouble getting Jetpack Boost connected to WordPress.com. How can I troubleshoot?

Please see the documentation on Jetpack connection issues as the connection flow between Jetpack and Jetpack Boost is similar.

Get help

You can post a support request on the Jetpack Boost Plugin Support page.

Privacy Information

We are fully committed to the privacy and security of our customers and their personal data. For a better understanding of how Jetpack Boost uses your data, please refer to the  Privacy Notice (Automattic owns and operates the Jetpack Boost plugin), the Automattic Privacy Policy, and the following section.

More information about the data usage on your site

Jetpack Boost uses Jetpack libraries to connect to WordPress.com and calculate the page speed score (making use of the tk_ai cookie). There is more information about cookies within Jetpack here.

Data Used
Site Owners / Users

In order to calculate Page speed scores, generate Critical CSS blocks, etc, the following information is used: WordPress.com-connected site ID, local site ID, and site URL. 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, Critical CSS generation URL, block counts, block sizes, error details, generation time, provider keys, Boost version, and active Boost features.

Site Visitors

None.

Activity Tracked
Site Owners / Users

We track when, by which user, and which website is connected to WordPress.com and when the plugin is deactivated. We also track activities such as the Critical CSS generation process, when, and which, configuration settings are modified.

Site Visitors

None.

Data Synced (Read More)
Site Owners / Users

None.

Site Visitors

None.

Comments Off on Jetpack Boost

Jetpack Search

Jetpack Search is a powerful replacement for the search capability built into WordPress. It is a paid upgrade to the Jetpack plugin that provides higher quality results and an improved search experience. If you are looking for information about Jetpack Search plugin, check our support page.

For pricing, general features, and FAQs, please see our information page.

Getting Started


Troubleshooting and Advanced Customization


Privacy Information

This feature is deactivated by default, and activating/unlocking it requires an upgrade to a Jetpack Search subscription. If you ever need to deactivate the feature, you can do so by toggling the Enable Search setting in the Search section from Jetpack — Settings — Performance in your dashboard.

Data Used
Site Owners / Users

We use the WordPress.com-connected blog ID in order to submit a visitor’s search request to the WordPress.com servers. 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

We use any of the visitor-chosen search filters and query data in order to process the search request on the WordPress.com servers. We also use aggregate data about page views and searches to adjust our search results.

Activity Tracked
Site Owners / Users

We track when, and by which user, the feature is activated and deactivated. We also track when, and which, configuration settings are modified (and by which user), as well as when, and by which user, the Jetpack Search widget is updated.

Site Visitors

We anonymously track when and what visitors search for and click on. This data is used to improve our search algorithms and track how well search is working. This tracking includes: IP address, URL, user agent, timestamp of event, browser language, country code, search query, filters.

Data Synced (Read More)
Site Owners / Users

We sync website content and options to provide search results and improve our search results ranking algorithms.

Site Visitors

None.

 

Comments Off on Jetpack Search

Progressive Web Application (PWA)

This feature was removed in Jetpack 7.9. If you’re looking for Progressive Web Application (PWA) functionalities, we recommend installing another plugin that offers the functionality you need.

 

Comments Off on Progressive Web Application (PWA)

Site Accelerator

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

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

For general features and FAQs, please see our CDN features here.

How to Activate the Site Accelerator

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

How Site Acceleration Works

Image load times

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.

Static file load times

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

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

Limitations

  • No cache invalidations. Currently, static assets are 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 “cache busters,” will not work.
  • It is not possible to automatically purge all images from a site. If there is an image no longer on your server that 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, i2.wp.com or i3.wp.com. Since images can only be purged manually by individual URL, there is a limit to the number we can purge.
  • We only fetch, resize, and serve GIF, PNG, JPG, and WebP images from servers that listen on port 80 for HTTP and port 443 for HTTPS. This applies to 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 1,000px wide and you ask for Jetpack to make it 5,000px, we will serve the original 1,000px image. Upscaled images are usually of poor quality, and we want to avoid that.
  • If your server takes longer than 10 seconds when an image is being retrieved for our CDN, the process will time out and your image will appear to be broken. Try to upload a differently-named image with a smaller dimension or file size if this happens.
  • It’s not possible to choose or limit where in the world your images will be served from. We have servers placed all over the world, and which server will load your image is dependent on a variety of factors, including the visitor’s location.
  • Site Accelerator does not support animated PNGs.

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.

Site Accelerator 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 image CDN service. Any abuse of Jetpack or violation of the WordPress.com Terms of Service could result in the suspension of your site from WordPress.com-connected services, including Site Accelerator.

FAQ

Can I use your Site Accelerator with audio or video files?

Site Accelerator does not serve audio (.mp3, .wav, .flac, etc.) or video (.mp4, .wmv, .flv, etc.) files. If you’d like to host videos on our CDN, check out our Video Hosting feature.

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). By default, Jetpack will constrain images to the larger of the size indicated when adding the image to a post or to your theme’s “content width” setting. If one isn’t set, Jetpack will default to 1,000px. This is to help ensure that sites are not trying to serve images larger than what the theme intended to be able to display.

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 might be narrower than the previous one. One of the benefits of this is that we will automatically resize your images so they don’t exceed the width supported by your theme.

What happens to my images if I disable Image Accelerator?

No worries! Your images will continue to work just fine, they will just start loading from your webhost’s server again instead of ours. Please note that it could take a few minutes for these changes to take place.

Once Site Accelerator has been enabled, can I delete the images from my server?

No! Your images need to remain on your server for the CDN to work correctly. Any images that are removed from your server will eventually “expire” and be removed from the CDN.

I enabled/disabled Site Accelerator and the images are broken
  • As a first step, wait a few moments and then load your site in a completely different web browser than you normally use to make sure it’s not just your browser cache interfering with the URL change. It can take a few minutes for these changes to be reflected on your entire site.
  • Next, check that your Jetpack connection is working properly.
  • Still not working? It is possible that there may be another plugin on your site conflicting with Site Accelerator. Please try to disable all of your plugins except Jetpack, then try checking your images again. If they are displaying properly, we’ll know that another plugin is interfering. You can find out which plugin is the culprit by enabling each plugin one by one and checking images after each one.
  • Finally, if it still isn’t working after disabling your plugins, it may be the theme. To test this, you can switch to one of the default themes such as Twenty Seventeen. If the issue is resolved, then you know it’s a problem with the theme, and you’ll need to contact the theme author for further assistance.
  • No luck? Please reach out to us for more support.

Still having trouble?

Please contact support directly. We’re happy to lend a hand and answer any other questions that you may have.

Privacy Information

Site Accelerator is deactivated by default. You can toggle the feature on or off under the Performance & speed section from Jetpack → Settings → Performance in your dashboard.

More information about the data usage on your site

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 — Performance 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

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.

Please note that this feature is compatible with WordPress core’s Lazy-Loading images feature.

For general features and FAQs, please see our information page.

Activating Lazy Images

  1. Navigate to Jetpack → Settings → Performance.
  2. Scroll to the Performance and Speed section.
  3. Click the toggle to activate Lazy loading for images.

What does it do?

Lazy images filter the post content and modify 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 lay images feature. 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 are set to be enabled for your entire site by default. You can use the filter 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.

Exclude specific images

You can instruct Lazy Images to skip any image by adding skip-lazy css class to an image.

You can also use jetpack_lazy_images_blocked_classes filter to set additional CSS class names that shouldn’t be lazy-loaded. For example:

function mysite_customize_lazy_images( $blocked_classes ) {
    $blocked_classes[] = 'my-header-image-classname';
    return $blocked_classes;
}

add_filter( 'jetpack_lazy_images_blocked_classes', 'mysite_customize_lazy_images' );

Lazy Images and Jetpack Boost

If you use the Jetpack Boost plugin’s Lazy Image Loading feature, turning on and off the Lazy Images feature will also turn on and off the Lazy Image Loading feature in Jetpack Boost.

Lazy Images and Safari

To fix the issue with lazy-loaded images on your Safari browser, please update your Jetpack.

Still having trouble?

Please contact support directly. We’re happy to lend a hand and answer any other questions that you may have.

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 — Performance in your dashboard.

More information about the data usage on your site
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 111,110 other followers
  • Browse by Topic