Mike Bricknell-Barlow

<p>This plugin helps to increase site speed, and helps to improve scores in Google’s Pagespeed Insights tool by addressing the common recommendation “Serve next-gen image formats”.</p>
<p>For the best speeds, Google recommends using new image formats such as .webp, which offer smaller file sizes than common formats such as .jpg or .png with no visible loss in quality. However, not all internet browsers support the .wepb image format, so only using that format would result in broken images in older browsers.</p>
<p>This plugin addresses that problem, and allows your site to use .webp images when it can. This plugin will convert images from .jpg or .png automatically, and save .webp versions of the image alongside the original. When a user visits the site in a compatible browser, they will be shown the .webp versions of all images, making your site load faster and improving your scores in Google Pagespeed Insights. Users on older browsers that aren’t compatible with .webp images will be shown the .jpg or .png versions of the images instead.</p>
<p>When first installing the plugin, run the Bulk Converter to convert all your existing images. See the Installation section for instructions.</p>
<p>After installation, any .jpg or .png image uploaded to the Media Library will be automatically converted.</p>
<h3>Settings</h3>
<ul>
<li>
<p>Conversion quality – Controls the level of compression on the generated .webp images. The lower the value, the smaller the file size of the generated images, but the more chance there is of a visual degradation of quality. The quality value to be entered is a percentage – by default, this is set at 80%. Most users won’t need to change this.</p>
</li>
<li>
<p>HTML Output Buffering – This allows the plugin to perform a find-and-replace on the HTML that WordPress has generated for output to the browser to replace image tags. This tends to perform the image tag replacement more reliably, but can cause issues with some themes. Users are advised to have this setting turned on, but they should check that the site is displaying as it should, and turn this option off if any issues arise.</p>
</li>
<li>
<p>Exclude pages from HTML output buffering – To specify pages that should be excluded from the HTML Output Buffering settings</p>
</li>
<li>
<p>Lazy loading – This improves the site speed further by not loading images that are further down the page until the user has scrolled down to them. This saves time downloading images that the user hasn’t got to yet, or might not get to at all. Users are advised to have this setting turned on, but they should check that the site is displaying as it should, and turn this option off if any issues arise.</p>
</li>
<li>
<p>Exclude image classes from lazy-loading – To specify images, by class name, that should not have the lazy-loading applied</p>
</li>
</ul>
<h3>Developers</h3>
<p>If using Simple Webp Images with your custom themes or plugins, there’s a couple of filters you can use, as below.</p>
<ul>
<li><code>simple-webp-images-exclude-from-output-buffering</code> filter</li>
</ul>
<p>Use this to exclude pages or posts from the HTML output buffering via <code>apply_filters</code>, using any critera you need. Call the filter, run any checks you need, and return ‘true’ to exclude the current page or post from the buffering.<br />
Example:</p>
<pre><code>apply_filters( 'simple-webp-images-exclude-from-output-buffering', 'exclude_page_with_id_100_from_output_buffering' );
function exclude_page_with_id_100_from_output_buffering( $is_excluded ) {
    if( get_the_id() == 100 ) {
        return true;
    }

    return false;
}
</code></pre>
<p>The example code could be placed in your <code>functions.php</code> file.</p>
<ul>
<li><code>simple-webp-images-exclude-from-lazy-loading</code> filter</li>
</ul>
<p>Use this to exclude pages or posts from the image lazy loading via <code>apply_filters</code>, using any critera you need. Call the filter, run any checks you need, and return ‘true’ to exclude the current page or post from the lazy loading.<br />
Example:</p>
<pre><code>apply_filters( 'simple-webp-images-exclude-from-lazy-loading', 'exclude_page_with_id_100_from_lazy_loading' );
function exclude_page_with_id_100_from_lazy_loading( $is_excluded ) {
    if( get_the_id() == 100 ) {
        return true;
    }

    return false;
}
</code></pre>
<p>The example code could be placed in your <code>functions.php</code> file.</p>


Simple Webp Images

Generates webp images from uploaded images, and outputs webp images in content in compatible browsers. Optionally provides lazy-load functionality.

Matt Keys

<p>Google Pagespeed Insights is a tool that empowers you to make decisions that increase the performance of your website. Recommendations from Google Pagespeed are based upon current industry best practices for desktop and mobile web performance.</p>
<p>Through the addition of advanced data visualization, tagging, filtering, and snapshot technology, Insights from Google PageSpeed provides a comprehensive solution for any webmaster looking to increase their site performance, their search engine ranking, and their visitors browsing experience.</p>
<h4>Detailed Page Reporting</h4>
<p>Sort your page reports by their Page Speed Score to prioritize the largest areas of opportunity on your site. Page reports utilize easy to read visualizations that allow you to quickly focus in on the most important data to improve your sites performance.</p>
<h4>Report Summaries</h4>
<p>Report Summaries are a powerful and exclusive feature of Insights from Google PageSpeed. Summaries display your average Page Score, largest areas for improvement across ALL reports, as well as best and lowest performing pages. Report summaries can be filtered to narrow results by: Pages, Posts, Categories, Custom URLs, and Custom Post Types.</p>
<p>Using Report Summaries allows you to ‘zoom out’ from the page-level and better understand the big picture of your sites performance.</p>
<h4>Desktop and Mobile Page Reports</h4>
<p>Best practices for site performance differ greatly between Desktop and Mobile device usage. Configure Insights from Google PageSpeed to generate Desktop reports, Mobile reports, or both!</p>
<p>Toggle back and forth between report types to see specific suggestions for improving the performance and experience on each platform.</p>
<h4>Report Snapshots</h4>
<p>The Report Snapshot tool builds on the power of Report Summaries, to provide historical “Point In Time” data about your website.</p>
<p>Take a snapshot of any Report Summary screen to store that data for future retrieval. Add comments to your snapshots to provide additional meaning, such as “Before Installing W3 Total Cache.” Additionally, filter a Report Summary before taking a Snapshot to save a summary of the filtered data.</p>
<h4>Snapshot Comparison Tool</h4>
<p>The Snapshot Comparison Tool is an amazing utility that lets you visualize side-by-side results from any two similar Report Snapshots.</p>
<p>Take a Report Snapshot before installing new plugins, or before implementing performance recommendations. Take another snapshot when you are finished and compare your results to measure the effect of your changes.</p>
<h4>Add/Import Custom URLs</h4>
<p>Easily add additional URLs for inclusion in Pagespeed Reports. Even add URLs for non-WordPress sites, even if they are not hosted on your server. URLs can be added manually, or upload a properly formatted XML sitemap to add multiple pages at once.</p>
<p>Custom URLs can be tagged and filtered in Report Summaries. Take Report Snapshots of your Custom URLs just like you would with any other report type.</p>
<h4>Scheduled Report Checks</h4>
<p>Configure Insights from Google PageSpeed to automatically recheck your site on a Daily, Weekly, Bi-Monthly, or Monthly basis.</p>
<p>With each scan, any new pages or posts will be discovered, and existing reports will be updated to reflect any changes to your site, as well as any changes in the Pagespeed recommendations.</p>
<h4>Additional Languages</h4>
<ul>
<li>(v1.x translation) Russian Translation provided by: Ivanka from <a href="http://coupofy.com" rel="nofollow ugc">coupofy.com</a></li>
<li>(v1.x translation) Spanish Translation provided by: Ogi Djuraskovic from <a href="http://firstsiteguide.com" rel="nofollow ugc">firstsiteguide.com</a></li>
<li>(v1.x translation) Serbian Translation provided by: Ogi Djuraskovic from <a href="http://firstsiteguide.com" rel="nofollow ugc">firstsiteguide.com</a></li>
</ul>
<h3>Troubleshooting</h3>
<p><strong>Please find the below list of potential issues that you may encounter, and the recommended next steps.</strong></p>
<h4>I entered my API Key and saved the Options, but no Reports are showing up in the Report List.</h4>
<ul>
<li>Google Pagespeed needs to be able to load each page to create its report. Make sure that your pages are publicly accessible over the internet.</li>
<li>Ensure that your API key is entered correctly, and that you have enabled the “PageSpeed Insights API” from the Google API Console.</li>
<li>In the Options page, under “Advanced Configuration” there is a checkbox called “Log API Exceptions”. Any API exception that is not caught and handled automatically will be stored for up to 7 days. This log information can be very helpful when diagnosing issues.</li>
</ul>
<h4>Page report checks never finish all of the way, I have to press “Start Reporting” again and again to get it to finish checking all of my pages.</h4>
<ul>
<li>If the reports seem to always run for a certain length of time before stopping unexpectedly, you may be exceeding your servers Max Execution time. Try increasing the value in Options->Advanced Configuration “Maximum Execution Time”.</li>
<li>Some web hosting providers do not allow the Maximum Execution Time to be overridden or increased. In that case you can try setting the Maximum Script Run Time. This will make the script run for the set period of time, then stop and spawn a new script, to get around timeout issues. Start with a low value, and test. Increase the value one step at a time until you find the largest value that allows your scans to finish successfully.</li>
</ul>
<h4>An error was reported while trying to check one of my pages, and it has been added to the Ignored Pages section.</h4>
<ul>
<li>Navigate to the Ignored Pages tab, find the page, and click “reactivate” to try it again.</li>
<li>If the page fails again, ensure that the page is publicly accessible from the internet. Non-public pages cannot be checked.</li>
<li>In some rare cases, pages are not able to be scanned by the Pagespeed API. Try checking your page manually here: https://developers.google.com/speed/pagespeed/insights/. If the page fails to be checked, report the issue to Google so that they can diagnose further.</li>
</ul>
<h4>I received a Javascript or PHP error.</h4>
<ul>
<li>If the error appeared while Google Pagespeed was checking pages, you may have loaded the page while it was storing data. Refresh the page in a couple seconds to see if the issue has gone away.</li>
<li>If issues persist please report the problem with as much information as you can gather, including: What page you were on, the exact text of the error, or a screenshot of the error.</li>
<li>In the Options page, under “Advanced Configuration” there is a checkbox called “Log API Exceptions”. Any API exception that is not caught and handled automatically will be logged for up to 7 days. This log information can be very helpful when diagnosing issues</li>
</ul>
<h4>My Page Scores seem really low. When I click “Recheck Results” when viewing Report Details, the score jumps up dramatically.</h4>
<ul>
<li>Your server may have been responding slowly when the first report was generated. A slow server response time can have a large impact on your Page Speed Score. If these problems happen frequently you may want to talk with your hosting provider about the problem, or look into alternative hosting providers.</li>
</ul>
<h4>I want to clear out all of the current page reports and start over.</h4>
<ol>
<li>Navigate to the “Options” tab</li>
<li>Expand the “Advanced Configuration” section.</li>
<li>Find the “Delete Data” Dropdown</li>
<li>Select “Delete Reports Only” to remove all Page Reports</li>
<li>Or Select “Delete EVERYTHING” to remove all Page Reports, Custom URLs, Snapshots, and Ignored Pages</li>
</ol>


Insights from Google PageSpeed

Amazing plugin. Had some initial issues getting it activated. Reached out to Matt who suggested that because it was installed by a bulk installer (MainWp management control panel) that the database tables may not have been correctly created. He suggested deactivating and activating the plugin again which worked perfectly. I've since upgraded to the Premium version and look forward to seeing what V2 brings.  Thanks Matt! 

Fantastic Plugin

Proper support of this plug-in! Great features as well :)

Proper Support

Use Insights from Google PageSpeed to increase your sites performance, your search engine ranking, and your visitors browsing experience.

Simple Webp Images vs Insights from Google PageSpeed