Keeping up to speed with the AMP project

It will soon be six months since the unveiling of the Accelerated Mobile Pages initiative, better known as AMP. The project has kept up the pace of development since then, and it’s well worth reviewing some of the new possibilities of the AMP format.

AMP is an open source initiative to improve the web experience on mobile devices. It’s an extension of HTML, powered by JavaScript, and supported by Google’s CDN. But unlike similar initiatives from other tech giants, AMP gives you full control of how your content is presented. AMP pages still look like your pages, just faster, and much more efficient.

AMP options are generally only shown when you browse with a mobile device. AMP first became visible for news results on Google mobile search queries: you’ll typically see a carousel of items from leading publishers near the top of the page. But if you’re browsing on a desktop, even if you try to hit specific test URLs, you won’t see any hint of it.

Google is steadily adding AMP capability to other services. It is now also used on Google News in a number of countries. And if you publish through Google Play Newsstand, it’s now possible to set AMP to be the default rendering (when available).

We’re also seeing growing interest beyond Google: Twitter Moments on iOS and Android now link to AMP versions, with hints of further integration to follow. Millions of eBay browse nodes are available in AMP. Socially-fuelled news app Nuzzel shows AMP content when available, and there are examples of publishers building their own mobile apps around the AMP format, such as this German news site.

We also understand that Google is planning to integrate AMP more deeply into mobile search results in the very near future. Where an AMP version is available, Google will link mobile users directly to it, rather than the conventional web page.

WordPress.com VIP has been AMP-ready since day one: indeed, we were the only tech company in the select group of launch partners. Our free AMP plugin is available to all VIPs; and is delivering many millions of AMP page views each week.

The plugin comes bundled with a generic output template, which will be immediately familiar to users of the WordPress.com Reader or mobile app. But we strongly advise VIPs to swap in their own template: instructions for doing so are included in the plugin’s readme file. (You’ll find the latest version on GitHub.)

Full details of the AMP specification are published on the project website, which now also includes a handy web-based validation tool. There’s also a useful validator extension for Chrome and Opera, which shows when an AMP version of the current page is available, and indicates whether or not it passes validation.

It’s worth following the development of the AMP framework if you aren’t already doing so: the project is under active development, and there have been significant improvements to the handling of things like ads and analytics in recent weeks. You’ll find them at amphtml on Twitter; and they post regularly on their WordPress.com-hosted blog, where you’ll also find a regularly updated roadmap.

AMP: Ready for Testing

Update: we’ve adjusted our timing and are now planning to enable AMP on WordPress.com near the end of February, to coincide with Google’s release.

A few months ago we announced our participation in the Accelerated Mobile Pages (AMP) project, an exciting new open-source initiative which aims to provide mobile-optimized content that loads instantly, everywhere.

Since then, many of you have been testing the plugin in your local environments (thank you!), and today we’re ready for you to test AMP on your production sites as well, ahead of its official launch on WordPress.com next week near the end of February.

To enable AMP on your WordPress.com VIP site, simply add the following to your functions.php file (customers on our VIP Go platform should add the plugin to their plugins directory):

add_filter( 'amp_is_enabled', '__return_true', 100 );

The plugin ships with a minimal default template, and we’ve built in a number of filters so your developers can customize the experience to better match your site—read more in our documentation.

We’ll be enabling AMP by default for everyone on WordPress.com at the end of February (this does not affect sites on VIP Go); if you’d prefer not to support AMP on your site, you can proactively opt-out by adding the following to your functions.php file:

add_filter( 'amp_is_enabled', '__return_false', 100 );

As always, if you have any feedback or bug reports, please open a ticket—or feel free to log them as issues on Github.

Performance improvements

We’re always looking to make your site load faster and today we’re happy to announce a new function that enables certain additional caching and removes usually unneeded features:

wpcom_vip_enable_performance_tweaks()

This new function does 3 things:

  1. Disables the instapost functionality which is rarely used by VIP clients.
  2. Caches for 30 minutes the full comment count shown in the menu under comments in wp-admin.
  3. Disables the adjacent post rel links in the head of the html page.

We recommend these tweaks for everyone as they help improve site performance.
We will be analyzing client feedback and will determine if this should be turned on by default in the coming months.

If you are not interested in these tweaks, you may use the following to pro-actively disable them if they were ever to be turned on by default. (We would make a new lobby post before enabling these by default).

wpcom_vip_disable_performance_tweaks()

PHP Warnings are now visible from the VIP Dashboard

To help give more visibility into your production site we’ve launched a new widget in the VIP Dashboard. This widget will display up to 5000 PHP warnings and errors that have happened in the last 24 hours on your site. The data is refreshed every hour.

To access this information, visit your VIP Dashboard and locate the PHP Errors and Warnings from the last 24h widget.

VIPdashboard

Here are 2 screenshots of what you will see, first with errors:

php_errors

Each bullet point tells you how many times it occurred, the warning text, and in which file + line number to start looking.

And if you don’t have errors:

php_noerrors

In the coming months, we may make this more visible such as with an admin notification when there are more than 100 warnings or errors in the last 24 hours. This would notify you when new PHP Warnings have cropped up and need to be fixed.

The VIP team has access to sample http requests and backtraces that can be provided in most cases. Contact us if you need help with a PHP Warning and would like that information.

Faster-Loading Images with WebP

As announced today, all WordPress.com VIP sites now support the WebP image format, serving high-quality images with shorter loading times.

We always strive to make your sites run as quickly and smoothly as possible, both on the front end and under the hood. So we’re happy to announce that the WordPress.com image service, which delivers the beautiful images you use in your posts to your site’s visitors, now offers seamless support for the WebP image format.

What does this mean for you and your audience? This new feature provides size reductions of up to 34 percent for served images compared to a JPEG image of an equivalent visual quality level. Your viewers will save a lot of time loading your pages — time they can better spend enjoying the content you publish.

Read more at WordPress.com.

Twitter JSON endpoints for share counts will be retired soon

Twitter announced recently they will be discontinuing the private JSON endpoints used to retrieve a share count of any URL. The tweet buttons will be simplified and endpoints retired by November 20, 2015.

We have already had a report of VIPs being affected. Depending on how your code handles failed requests and timeouts, it could prevent other resources from loading.

So what does this mean?

Any themes calling http://urls.api.twitter.com/1/urls/count.json will need to be updated to omit share counts or switch over to the Twitter REST API search endpoints:
https://dev.twitter.com/rest/reference/get/search/tweets

Available for Testing: CSS Minification

Today we’re enabling a new feature for testing which will automatically minify CSS files hosted on your WordPress.com VIP sites. If you’re unfamiliar with the concept, minification helps improve performance on your site by removing unnecessary whitespace and formatting from your code, so your users only download what’s absolutely necessary.

If you’re using our Quickstart development environment, we’ve already enabled CSS minification for you by default.

You can also test it on your production sites by appending ?cssminify=yes to any page. For example, https://lobby.vip.wordpress.com/?cssminify=yes.

We’re planning to enable the feature for all VIP sites in the next couple of weeks, depending on feedback from you—we’ll announce the specific date here once we have that scheduled.

Please test, and if you spot any issues, get in touch!

Lossy Image Compression Now Available

Today we’re introducing a new feature enabling you to optionally compress images on your sites with greater control over quality and file size.

On WordPress.com VIP, we’ve always losslessly compressed your uploaded images—we do some simple processing to trim file sizes and remove bloat while still maintaining the original images’ quality.

However, as we continue to see traffic across the VIP network shift to mobile devices, in an interest to help our publishers reduce page load times we’ve now added options to further optimize file sizes through lossy compression.

Implementation is really straightforward, using this function in your theme (make sure to refer to the canonical documentation, as this may change over time):

wpcom_vip_set_image_quality( $quality, $strip )

$quality can be a value between 0 and 100, where 100 is the original image quality.

$strip refers to meta data embedded in the file, and has the following options:

– info: will remove all Exif, IPTC and comment data from the image.
– color: will remove any ICC color profiles present in the image.
– all: will remove all of the above.

For example, our annual WordPress-themed holiday wallpaper:

At full size, this image is 649k; with strip=all it’s reduced down to 600k, and with quality=80 it shrinks even further to 125k—with only a marginal impact to image quality:

Special thanks to our friends at TechCrunch for helping test this new feature!

Performance Feature – Automatic Lossless Image Compression

We have created a new robot – his name is optimizerbot and he will look through your themes daily to find any PNG or JPEG images that can be losslessly compressed and automatically commit the compressed version to your theme’s subversion repository.   We have found that about 80% of existing images in VIP themes can be compressed this way, saving precious bytes and providing a better user experience, especially on slower networks, like 3G.

Here is an example of what the commit message will look like

The first column is the file name, second column is the old file size in bytes, third column is the new file size in bytes, and the last column is the % saved.

Technical details for those who are interested:

  • PNGs are being compressed using OptiPNG.
  • JPEGs are being compressed using jpegoptim.
  • The script we are using to do the compression will soon be available in the WordPress Code SVN repository.
  • We invalidate our CDN whenever static content is changed which means users will begin downloading optimized versions of these files shortly after the changes are deployed.
  • For those familiar with Trac Wiki syntax you probably will recognize the || separator. This creates a table layout in Trac, which we use internally for reviewing changes in some cases.

Enjoy and please leave your feedback/questions in the comments!