Fork me on GitHub

perf 2.0.112

node:

Attribute

mixer
perf 2.0.112
category
Image
{
Overview

format specifies the desired format for the optimized image.

Sets the format that the image optimizer will attempt to convert the current image to. Must be called from within an optimize_image yield. This should be one of the following values: * webp * jpeg * png The image optimizer will passthrough unmodified any images it cannot convert, such as animated gifs. Also, invalid conversions, such as converting gifs with transparent pixels to jpeg will be passed through unmodified. If the format is not specified, but the browser supports webp, the image optimizer will upgrade the image to webp. Otherwise, the image optimizer will attempt to compress the image to jpeg. If that fails, then the image will be passed through unmodified.

*
Argument
Type
Name
Text %format
Explore more ways to use this function in our Tritium Tester
»
Example
html() {
  $("//img") {
    perf.optimize_image() {
      perf.format("webp")
    }
  }
}
»
View Source
node:

Attribute

mixer
perf 2.0.112
category
Image
{
Overview

height specifies the desired height of the final image in pixels.

Sets the height (in pixels) that the image optimizer will scale the optimized image to. Must be called from within an optimize_image yield. This should be a numeric value (with no units) in a string. If height() is not called, then the height of the source image will be preserved. Currently, the image optimization service will: * not preserve the aspect ratio of the original image * not accept a height that is larger than the original image. Larger heights will be ignored

*
Argument
Type
Name
Text %height
Explore more ways to use this function in our Tritium Tester
»
Example
html() {
  $("//img") {
    perf.optimize_image() {
      perf.height("175")
    }
  }
}
»
View Source
node:

Attribute

mixer
perf 2.0.112
category
Image
{
Overview

quality specifies the desired quality for the optimized image.

Sets the quality parameter for the optimized image. Must be called from within an optimize_image yield. This must be a numeric value (with no units). Decimals are valid, and the higher the number, the larger the file size and higher the quality of the output image. This value will be used only if the output encoding format uses compression and allows the user to specify a quality level. The valid range for quality is 0 - 100. It is not advisable to use a quality of 100, because this can lead the final image to be larger than the original source image. A good recommended starting point for quality is 70 - usually you cannot see a visual difference at that level. If the quality level is not specified, then the image optimizer backend will choose a default quality of 90 (currently). If the quality level does not apply to the selected encoding format, then it will be ignored. Compression using the image optimizer is additive, so if the source image was already compressed, the image optimizer will further compress it. Currently, quality is only valid for the following formats: * webp * jpeg

*
Argument
Type
Name
Text %quality
Explore more ways to use this function in our Tritium Tester
»
Example
html() {
  $("//img") {
    perf.optimize_image() {
      perf.format("webp")
      perf.quality("75")
    }
  }
}
»
View Source
node:

Attribute

mixer
perf 2.0.112
category
Image
{
Overview

width specifies the desired width of the final image in pixels.

Sets the width (in pixels) that the image optimizer will scale the optimized image to. Must be called from within an optimize_image yield. This should be a numeric value (with no units) in a string. If width() is not called, then the width of the source image will be preserved. Currently, the image optimization service will: * not preserve the aspect ratio of the original image * not accept a width that is larger than the original image. Larger widths will be ignored

*
Argument
Type
Name
Text %width
Explore more ways to use this function in our Tritium Tester
»
Example
html() {
  $("//img") {
    perf.optimize_image() {
      perf.width("250")
    }
  }
}
»
View Source
node:

Text

mixer
perf 2.0.112
category
Performance
{
Overview

elide_bool_attributes remove explicit values for boolean attribute from HTML elements

To save space and allow improved canonicalization, this function removes explicit values for boolean attributes that do not require them, such as the disabled attribute of input elements. Low risk, unless CSS or Javascript is targeting elements by explicit default values Adds support for newer attributes in HTML5 needs to be invoked after the html() scope has closed

*
This function has no arguments
Explore more ways to use this function in our Tritium Tester
»
Example
html() {
}
elide_bool_attributes()
»
View Source
node:

XMLNode

mixer
perf 2.0.112
category
Javascript
{
Overview

add_ignore_domain adds a domain to a blacklist so that it will not be bundled

Call this function in the scope opened by bundle_external_js to set a domain which will not be bundled by the optimizer (this will also terminate the chain of scripts) You can ignore multiple domains by calling this function multiple times in a scope, we concat the new ignore domain to the list of excluded domains each time

*
Argument
Type
Name
Text %domain_name
Explore more ways to use this function in our Tritium Tester
»
Example
html() {
  perf.bundle_external_js() {
    perf.add_ignore_domain("www.google.com")
  }
}
»
View Source
node:

XMLNode

mixer
perf 2.0.112
category
Javascript
{
Overview

async_bundled_js configures the optimized JS to be loaded asynchronously

async_bundled_js configures the optimized JS to be loaded asynchronously. This is done by adding the async="async" attribute to the new script tag. This function is optional, and its use is mutually exclusive with defer_bundled_js. Only one can be used. It applies to the new bundled script tag, not the existing script tags.

*
This function has no arguments
Explore more ways to use this function in our Tritium Tester
»
Example
html() {
  perf.bundle_external_js() {
    perf.async_bundled_js()
  }
}
»
View Source
node:

XMLNode

THE
bundle_all_js()
FUNCTION
mixer
perf 2.0.112
category
Javascript
{
Overview

bundle_all_js bundles all adjacent external and inlined js on a page.

This function finds all adjacent javascript and bundles the JS. It does this by using the Moovweb js bundling service, which takes as input a list of urls or inlined JS source (in query parameters) and returns the concatenated JS.

*
This function has no arguments
Explore more ways to use this function in our Tritium Tester
»
Example
html() {
  perf.bundle_all_js()
}
»
View Source
node:

XMLNode

mixer
perf 2.0.112
category
Javascript
{
Overview

bundle_external_js bundles all adjacent external js on a page.

This function finds all adjacent javascript and bundles the JS. It does this by using the Moovweb js bundling service, which takes as input a list of urls (in query parameters) and returns the concatenated JS.

*
This function has no arguments
Explore more ways to use this function in our Tritium Tester
»
Example
html() {
  perf.bundle_external_js()
}
»
View Source
mixer
perf 2.0.112
category
Performance
{
Overview

canonicalize_javascript_libraries replaces src values for common Javascript libraries to use the Google CDN

Instead of loading Javascript libriaries from multiple sources, or from hosted services, this function rewrites the src value of script elements loading the latest version of common Javascript libraries to load them all from the Google CDN

*
This function has no arguments
Explore more ways to use this function in our Tritium Tester
»
Example
html() {
  canonicalize_javascript_libraries()
}
»
View Source
node:

XMLNode

mixer
perf 2.0.112
category
Javascript
{
Overview

clear_ignore_domain

clear_ignore_domain resets the blacklist of domains we will not bundle.

*
This function has no arguments
Example
html() {
  perf.bundle_external_js() {
    perf.add_ignore_domain("www.google.com")
    perf.clear_ignore_domain() // Now, scripts from google will be bundled
  }
}
»
View Source
node:

Text

THE
combine_heads()
FUNCTION
mixer
perf 2.0.112
category
Performance
{
Overview

combine_heads finds sibling head elements and combines them into one

When a page incorrectly defines more than one head element, this function will combine, leaving only a single head element

*
This function has no arguments
Explore more ways to use this function in our Tritium Tester
»
Example
html() {
  combine_heads()
}
»
View Source
node:

XMLNode

mixer
perf 2.0.112
category
Javascript
{
Overview

defer_bundled_js configures the optimized JS to be loaded at on dom content loaded

defer_bundled_js configures the optimized JS to be loaded at on dom content loaded. This is done by adding the defer="defer" attribute to the new script tag. This function is optional, and its use is mutually exclusive with async_bundled_js. Only one can be used. It applies to the new bundled script tag, not the existing script tags.

*
This function has no arguments
Explore more ways to use this function in our Tritium Tester
»
Example
html() {
  perf.bundle_external_js() {
    perf.defer_bundled_js()
  }
}
»
View Source
node:

Text

mixer
perf 2.0.112
category
Performance
{
Overview

elide_attributes remove default values from HTML elements

To save space and allow improved canonicalization, this function removes default values when they have been specified in the HTML. Low risk, unless CSS or Javascript is targeting elements by explicit default values

*
This function has no arguments
Explore more ways to use this function in our Tritium Tester
»
Example
html() {
  elide_attributes()
}
»
View Source
node:

Text

mixer
perf 2.0.112
category
Performance
{
Overview

insert_dns_prefetch adds a dns-prefetch attribute to elements that load assets

In browsers that support this attribute, this will prefetch the DNS for domains where assets referenced by src or href attributes are hosted, to improve loading speed This function needs to be called in an active project, so it will not work in the Tritium Tester

*
This function has no arguments
Example
html() {
  insert_dns_prefetch()
}
»
View Source
node:

Text

mixer
perf 2.0.112
category
Performance
{
Overview

move_css_above_scripts finds any CSS elements and moves them above the first script element

To improve loading and page rendering speed, this function finds all CSS elements and moves them above the first script element

*
This function has no arguments
Explore more ways to use this function in our Tritium Tester
»
Example
html() {
  move_css_above_scripts()
}
»
View Source
node:

Text

mixer
perf 2.0.112
category
Performance
{
Overview

move_css_to_head finds any CSS elements inside the body element and moves them to the head

To improve loading and page rendering speed, this function finds all CSS elements incorrectly invoked inside the body element and moves them into the head element

*
This function has no arguments
Explore more ways to use this function in our Tritium Tester
»
Example
html() {
  move_css_to_head()
}
»
View Source
node:

Attribute

THE
optimize_image()
FUNCTION
mixer
perf 2.0.112
category
Image
{
Overview

optimize_image modifies the image's src attribute to optimize the image

This function will convert image source links to use the Moovweb Image Optimization service. The image will be optimized in accordance with the parameters specified by this function along with the associated optional sub-functions (width, height, quality, format, etc). This is the entry-point function for image optimization. This is the mandatory wrapper function for all of the specific image optimization functions. The src attribute is modified to point at the image optimization service (opt.moovweb.net/img...) The query parameters specify how to optimize the image.

*
This function has no arguments
Explore more ways to use this function in our Tritium Tester
»
Example
html() {
  $("//img") {
    perf.optimize_image() {
    }
  }
}
»
View Source
node:

Attribute

mixer
perf 2.0.112
category
Image
{
Overview

optimize_image modifies an image's attribute to optimize the image

Same functionality as the optimize_image function, but lets you specify which attribute to set. Most often this is used in combination w image deferral, when the image's src is renamed as data-src so that the image doesn't get requested on load.

*
Argument
Type
Name
Text %width
Explore more ways to use this function in our Tritium Tester
»
Example
html() {
  // Here, we select the images that we want to late load, and disable their src attributes
  $$("#lazy-content img") {
    attribute("src") {
      name("data-src")
    }
  }
  $("//img") {
    /* Normally, we would modify the "src" attribute. But in this scenario, we
       want to modify the data-src, because we have some javascript that will
       late-load the image using this attribute.
    */
    perf.optimize_image("data-src") {
      perf.quality("75")
      // Currently, by default, aspect ratio is not preserved. That may change in the future.
      perf.width("160")
      perf.height("100")
    }
  }
}
»
View Source
node:

Text

THE
remove_comments()
FUNCTION
mixer
perf 2.0.112
category
Performance
{
Overview

remove_comments strips comment elements from HTML

To improve loading performance, this function strips out comment elements from HTML

*
This function has no arguments
Explore more ways to use this function in our Tritium Tester
»
Example
html() {
  remove_comments()
}
»
View Source
mixer
perf 2.0.112
category
Javascript
{
Overview

set_ignore_attribute specify an attribute that serves as a flag that indicates the script will not be bundled

Call this function in the scope opened by bundle_external_js to set an attribute which will not be bundled by the optimizer (this will also terminate the chain of scripts)

*
Argument
Type
Name
Text %attribute_name
Explore more ways to use this function in our Tritium Tester
»
Example
html() {
  perf.bundle_external_js() {
    perf.set_ignore_attribute("ignorethis")
  }
}
»
View Source
node:

Text

THE
trim_urls()
FUNCTION
mixer
perf 2.0.112
category
Performance
{
Overview

trim_urls removes http: and https: from urls for more versatile loading

To avoid browser warnings when loading pages with a combination of secure and insecure elements, this function strips the http: and https: from the start of urls in src and href attributes. This function needs to be called in an active project, so it will not work in the Tritium Tester

*
This function has no arguments
Example
html() {
  trim_urls()
}
»
View Source