{"id":34522,"date":"2015-02-13T13:54:33","date_gmt":"2015-02-13T13:54:33","guid":{"rendered":"https:\/\/wordpress.org\/plugins-wp\/above-the-fold-optimization\/"},"modified":"2018-03-28T06:15:43","modified_gmt":"2018-03-28T06:15:43","slug":"above-the-fold-optimization","status":"closed","type":"plugin","link":"https:\/\/wordpress.org\/plugins\/above-the-fold-optimization\/","author":14214741,"comment_status":"closed","ping_status":"closed","template":"","meta":{"version":"2.9.19","stable_tag":"2.9.19","tested":"4.9.29","requires":"4.0","requires_php":"5.3","requires_plugins":"","header_name":"Page Speed Optimization","header_author":"Optimization.Team","header_description":"","assets_banners_color":"fcfbf6","last_updated":"2018-03-28 06:15:43","external_support_url":"","external_repository_url":"","donate_link":"https:\/\/optimization.team\/","header_plugin_uri":"","header_author_uri":"https:\/\/optimization.team\/","rating":3.7,"author_block_rating":0,"active_installs":1000,"downloads":498202,"num_ratings":0,"support_threads":10,"support_threads_resolved":1,"author_block_count":0,"sections":["description","installation","changelog","faq"],"tags":[],"upgrade_notice":{"2.4":"<p>The server side critical path CSS generator has been removed.<\/p>","2.0":"<p>The upgrade requires a new configuration of Critical Path CSS. The configuration from version 1.0 will not be preserved.<\/p>"},"ratings":{"1":"21","2":"4","3":"7","4":"2","5":"51"},"assets_icons":{"icon-128x128.jpg":{"filename":"icon-128x128.jpg","revision":"1702674","resolution":"128x128","location":"assets"},"icon-256x256.jpg":{"filename":"icon-256x256.jpg","revision":"1702674","resolution":"256x256","location":"assets"}},"assets_banners":{"banner-772x250.jpg":{"filename":"banner-772x250.jpg","revision":"1702674","resolution":"772x250","location":"assets"}},"assets_blueprints":{},"all_blocks":[],"tagged_versions":["2.9.10","2.9.11","2.9.12","2.9.13","2.9.14","2.9.15","2.9.16","2.9.17","2.9.18","2.9.19","2.9.8","2.9.9"],"block_files":[],"assets_screenshots":{"screenshot-1.png":{"filename":"screenshot-1.png","revision":"1809621","resolution":"1","location":"assets"},"screenshot-10.png":{"filename":"screenshot-10.png","revision":"1809622","resolution":"10","location":"assets"},"screenshot-2.png":{"filename":"screenshot-2.png","revision":"1809621","resolution":"2","location":"assets"},"screenshot-3.png":{"filename":"screenshot-3.png","revision":"1809621","resolution":"3","location":"assets"},"screenshot-4.png":{"filename":"screenshot-4.png","revision":"1809621","resolution":"4","location":"assets"},"screenshot-5.png":{"filename":"screenshot-5.png","revision":"1809621","resolution":"5","location":"assets"},"screenshot-6.png":{"filename":"screenshot-6.png","revision":"1809621","resolution":"6","location":"assets"},"screenshot-7.png":{"filename":"screenshot-7.png","revision":"1809621","resolution":"7","location":"assets"},"screenshot-8.png":{"filename":"screenshot-8.png","revision":"1809877","resolution":"8","location":"assets"},"screenshot-9.png":{"filename":"screenshot-9.png","revision":"1809621","resolution":"9","location":"assets"}},"screenshots":{"1":"HTML Optimization","2":"CSS Optimization","3":"Google Web Font Optimization","4":"Javascript Optimization","5":"Critical CSS Optimization","6":"Critical CSS Quality Test","7":"Critical CSS Editor","8":"Google PWA Optimization","9":"HTTP\/2 Optimization","10":"Gulp.js Critical CSS Generator"}},"plugin_section":[],"plugin_tags":[187,5896,247,77057,186],"plugin_category":[48,52,59],"plugin_contributors":[153343,79802],"plugin_business_model":[],"class_list":["post-34522","plugin","type-plugin","status-closed","hentry","plugin_tags-optimization","plugin_tags-page-speed","plugin_tags-performance","plugin_tags-pwa","plugin_tags-seo","plugin_category-language-tools","plugin_category-performance","plugin_category-utilities-and-tools","plugin_contributors-o10n","plugin_contributors-optimalisatie","plugin_committers-optimalisatie"],"banners":[],"icons":{"svg":false,"icon":"https:\/\/s.w.org\/plugins\/geopattern-icon\/above-the-fold-optimization_fcfbf6.svg","icon_2x":false,"generated":true},"screenshots":[{"src":"https:\/\/ps.w.org\/above-the-fold-optimization\/assets\/screenshot-1.png?rev=1809621","caption":"HTML Optimization"},{"src":"https:\/\/ps.w.org\/above-the-fold-optimization\/assets\/screenshot-2.png?rev=1809621","caption":"CSS Optimization"},{"src":"https:\/\/ps.w.org\/above-the-fold-optimization\/assets\/screenshot-3.png?rev=1809621","caption":"Google Web Font Optimization"},{"src":"https:\/\/ps.w.org\/above-the-fold-optimization\/assets\/screenshot-4.png?rev=1809621","caption":"Javascript Optimization"},{"src":"https:\/\/ps.w.org\/above-the-fold-optimization\/assets\/screenshot-5.png?rev=1809621","caption":"Critical CSS Optimization"},{"src":"https:\/\/ps.w.org\/above-the-fold-optimization\/assets\/screenshot-6.png?rev=1809621","caption":"Critical CSS Quality Test"},{"src":"https:\/\/ps.w.org\/above-the-fold-optimization\/assets\/screenshot-7.png?rev=1809621","caption":"Critical CSS Editor"},{"src":"https:\/\/ps.w.org\/above-the-fold-optimization\/assets\/screenshot-8.png?rev=1809877","caption":"Google PWA Optimization"},{"src":"https:\/\/ps.w.org\/above-the-fold-optimization\/assets\/screenshot-9.png?rev=1809621","caption":"HTTP\/2 Optimization"},{"src":"https:\/\/ps.w.org\/above-the-fold-optimization\/assets\/screenshot-10.png?rev=1809622","caption":"Gulp.js Critical CSS Generator"}],"raw_content":"<!--section=description-->\n<p>This plugin is a toolkit for WordPress Optimization with a focus on SEO. The plugin enables to achieve a 100 score in the <a href=\"https:\/\/developers.google.com\/speed\/pagespeed\/insights\/\">Google PageSpeed Insights<\/a> test and an Excellent score in Google's latest AI based <a href=\"https:\/\/testmysite.thinkwithgoogle.com\/\">Mobile Performance Benchmark test<\/a>.<\/p>\n\n<p>This plugin is compatible with most optimization, minification and full page cache plugins and can be made compatible with other plugins by creating a module extension.<\/p>\n\n<p>Some of the supported plugins include:\n* <a href=\"https:\/\/wordpress.org\/plugins\/autoptimize\/\">Autoptimize<\/a>\n* <a href=\"https:\/\/wordpress.org\/plugins\/w3-total-cache\/\">W3 Total Cache<\/a>\n* <a href=\"https:\/\/wordpress.org\/plugins\/wp-super-cache\/\">WP Super Cache<\/a>\n* <a href=\"https:\/\/wordpress.org\/plugins\/wp-fastest-cache\/\">WP Fastest Cache<\/a>\n* <a href=\"https:\/\/wordpress.org\/plugins\/cache-enabler\/\">Cache Enabler (KeyCDN.com)<\/a>\n* <a href=\"https:\/\/wordpress.org\/plugins\/bwp-minify\/\">Better WordPress Minify<\/a>\n* <a href=\"https:\/\/wordpress.org\/plugins\/wp-super-minify\/\">WP Super Minify<\/a>\n* <a href=\"https:\/\/github.com\/optimalisatie\/above-the-fold-optimization\/tree\/master\/trunk\/modules\/plugins\/\">Click here<\/a> for a list with supported plugins.<\/p>\n\n<p><strong>Warning:<\/strong> <em>This plugin is not a simple 'on\/off' plugin. It is a tool for optimization professionals and advanced WordPress users to achieve a Google PageSpeed 100 Score.<\/em><\/p>\n\n<h3>Critical CSS Tools<\/h3>\n\n<p>The plugin contains tools to manage Critical Path CSS.<\/p>\n\n<p>Some of the features:<\/p>\n\n<ul>\n<li>Conditional Critical CSS (apply tailored Critical CSS to specific pages based on WordPress conditions and filters)<\/li>\n<li>Management via text editor and FTP (critical CSS files are stored in the theme directory)<\/li>\n<li>Full CSS Extraction: selectively export CSS files of a page as a single file or as raw text for use in critical CSS generators.<\/li>\n<li>Quality Test: test the quality of Critical CSS by comparing it side-by-side with the full CSS display of a page. This tool can be used to detect a flash of unstyled content (<a href=\"https:\/\/en.wikipedia.org\/wiki\/Flash_of_unstyled_content\">FOUC<\/a>).<\/li>\n<li>A <a href=\"https:\/\/github.com\/optimalisatie\/above-the-fold-optimization\/blob\/master\/admin\/js\/css-extract-widget.js\">javascript widget<\/a> to extract simple critical CSS with a click from the WordPress admin bar.<\/li>\n<li>A live critical CSS editor.<\/li>\n<\/ul>\n\n<p>Read more about Critical CSS in the <a href=\"https:\/\/developers.google.com\/speed\/docs\/insights\/PrioritizeVisibleContent\">documentation by Google<\/a>. \n<a href=\"https:\/\/github.com\/addyosmani\/critical-path-css-tools\">This article<\/a> by a Google engineer provides information about the available methods for creating critical CSS.<\/p>\n\n<h3>CSS Load Optimization<\/h3>\n\n<p>The plugin contains tools to optimize the delivery of CSS in the browser.<\/p>\n\n<p>Some of the features:<\/p>\n\n<ul>\n<li>Async loading via <a href=\"https:\/\/github.com\/filamentgroup\/loadCSS\">loadCSS<\/a> (enhanced with <code>requestAnimationFrame<\/code> API following the <a href=\"https:\/\/developers.google.com\/speed\/docs\/insights\/OptimizeCSSDelivery\">recommendations by Google<\/a>)<\/li>\n<li>Remove CSS files from the HTML source.<\/li>\n<li>Capture and proxy (script injected) external stylesheets to load the files locally or via a CDN with optimized cache headers. This feature enables to pass the \"<a href=\"https:\/\/developers.google.com\/speed\/docs\/insights\/LeverageBrowserCaching\">Leverage browser caching<\/a>\" rule from Google PageSpeed Insights.<\/li>\n<\/ul>\n\n<p><strong>The plugin does not provide CSS code optimization, minification or concatenation.<\/strong><\/p>\n\n<h3>Javascript Load Optimization<\/h3>\n\n<p>The plugin contains tools to optimize the loading of javascript.<\/p>\n\n<p>Some of the features:<\/p>\n\n<ul>\n<li>Robust async script loader based on <a href=\"https:\/\/github.com\/walmartlabs\/little-loader\">little-loader<\/a> by Walmart Labs (<a href=\"https:\/\/formidable.com\/blog\/2016\/01\/07\/the-only-correct-script-loader-ever-made\/\">reference<\/a>)<\/li>\n<li>HTML5 Web Worker and Fetch API based script loader with localStorage cache and fallback to little-loader for old browsers.<\/li>\n<li>jQuery Stub that enables async loading of jQuery.<\/li>\n<li>Abiding of WordPress dependency configuration while loading files asynchronously.<\/li>\n<li>Lazy Loading Javascript (e.g. Facebook or Twitter widgets) based on <a href=\"https:\/\/github.com\/ressio\/lazy-load-xt#widgets\">jQuery Lazy Load XT<\/a>.<\/li>\n<li>Capture and proxy (script injected) external javascript files to load the files locally or via a CDN with optimized cache headers. This feature enables to pass the \"<a href=\"https:\/\/developers.google.com\/speed\/docs\/insights\/LeverageBrowserCaching\">Leverage browser caching<\/a>\" rule from Google PageSpeed Insights.<\/li>\n<\/ul>\n\n<p>The HTML5 script loader offers the following advantages when configured correctly:<\/p>\n\n<ul>\n<li>0 javascript file download during navigation<\/li>\n<li>0 javascript file download for returning visitors (e.g. from Google search results, leading to a reduced bounce rate)<\/li>\n<li>faster script loading than browser cache, especially on mobile (according to a <a href=\"https:\/\/addyosmani.com\/basket.js\/\">proof of concept<\/a> by a Google engineer)<\/li>\n<\/ul>\n\n<p><strong>The plugin does not provide Javascript code optimization, minification or concatenation.<\/strong><\/p>\n\n<h3>Google PWA Optimization<\/h3>\n\n<p>The plugin contains tools to achieve a 100 \/ 100 \/ 100 \/ 100 score in the <a href=\"https:\/\/developers.google.com\/web\/tools\/lighthouse\/\">Google Lighthouse Test<\/a>. Google has been promoting <a href=\"https:\/\/developers.google.com\/web\/progressive-web-apps\/\">Progressive Web Apps<\/a> (PWA) as the future of the internet: a combination of the flexability and openness of the existing web with the user experience advantages of native mobile apps. In essence: a mobile app that can be indexed by Google and that can be managed by WordPress.<\/p>\n\n<p>This plugin provides an advanced <a href=\"https:\/\/developers.google.com\/web\/fundamentals\/getting-started\/primers\/service-workers\">HTML5 Service Worker<\/a> based solution to create a PWA with any website.<\/p>\n\n<p>Some of the features:<\/p>\n\n<ul>\n<li>JSON based request and cache policy that includes regular expressions and numeric operator comparison for request and response headers.<\/li>\n<li>Offline availability management: default offline page, image or resource.<\/li>\n<li>Prefetch\/preload resources in the Service Worker for fast access and\/or offline availability.<\/li>\n<li>Event\/click based offline cache (e.g. \"click to read this page offline\")<\/li>\n<li>HTTP HEAD based cache updates.<\/li>\n<li>Option to add <code>offline<\/code> class on <code>&lt;body&gt;<\/code> when the connection is offline.<\/li>\n<li><a href=\"https:\/\/developers.google.com\/web\/fundamentals\/engage-and-retain\/web-app-manifest\/\">Web App Manifest<\/a> management: add website to home screen on mobile devices, track app launches and more.<\/li>\n<\/ul>\n\n<h3>Google Web Font Optimization<\/h3>\n\n<p>The plugin contains tools to optimize <a href=\"https:\/\/fonts.google.com\/\">Google Web Fonts<\/a>.<\/p>\n\n<p>Some of the features:<\/p>\n\n<ul>\n<li>Load Google Web Fonts via <a href=\"https:\/\/github.com\/typekit\/webfontloader\">Google Web Font Loader<\/a>.<\/li>\n<li>Auto-discovery of Google Web Fonts using:\n\n<ul>\n<li>Parse <code>&lt;link rel=\"stylesheet\"&gt;<\/code> in HTML source.<\/li>\n<li>Parse <code>@import<\/code> links in minified CSS from minification plugins (e.g. Autoptimize).<\/li>\n<li>Parse existing <code>WebFontConfig<\/code> javascript configuration.<\/li>\n<\/ul><\/li>\n<li>Remove fonts to enable local font loading.<\/li>\n<li>Upload Google Web Font Packages from <a href=\"https:\/\/google-webfonts-helper.herokuapp.com\/\">google-webfonts-helper<\/a> to the theme directory.<\/li>\n<\/ul>\n\n<h3>Gulp.js Critical CSS Creator<\/h3>\n\n<p>The plugin contains a tool to create Critical CSS based on <a href=\"https:\/\/gulpjs.com\/\">Gulp.js<\/a> tasks. The tool is based on <a href=\"https:\/\/github.com\/addyosmani\/critical\">critical<\/a> (by a Google engineer).<\/p>\n\n<!--section=installation-->\n<h3>WordPress plugin installation<\/h3>\n\n<ol>\n<li>Upload the <code>above-the-fold-optimization\/<\/code> directory to the <code>\/wp-content\/plugins\/<\/code> directory.<\/li>\n<li>Activate the plugin through the 'Plugins' menu in WordPress.<\/li>\n<li>Navigate to the plugin settings page.<\/li>\n<li>Configure Critical CSS and tune the options for a Google PageSpeed 100 Score.<\/li>\n<\/ol>\n\n<!--section=changelog-->\n<h4>2.9.19<\/h4>\n\n<ul>\n<li>Upgrade to new HTML optimization plugin.<\/li>\n<\/ul>\n\n<h4>2.9.18<\/h4>\n\n<ul>\n<li>Upgrade to new PWA \/ Service Worker optimization plugin.<\/li>\n<\/ul>\n\n<h4>2.9.16<\/h4>\n\n<ul>\n<li>New PWA Optimization and HTML optimization plugins availability.<\/li>\n<\/ul>\n\n<h4>2.9.15<\/h4>\n\n<ul>\n<li>Improved compatibility with new optimization plugins by excluding ABTF client.<\/li>\n<\/ul>\n\n<h4>2.9.14<\/h4>\n\n<ul>\n<li>Upgrade to new optimization plugins.<\/li>\n<\/ul>\n\n<h4>2.9.13<\/h4>\n\n<ul>\n<li>Javascript Optimization module upgrade.<\/li>\n<\/ul>\n\n<h4>2.9.12<\/h4>\n\n<ul>\n<li>Disable old CSS and Web Font optimization when new optimization modules are installed.<\/li>\n<\/ul>\n\n<h4>2.9.11<\/h4>\n\n<ul>\n<li>CSS and Web Font Optimization module upgrade.<\/li>\n<\/ul>\n\n<h4>2.9.10<\/h4>\n\n<ul>\n<li>Informative update.<\/li>\n<\/ul>\n\n<h4>2.9.9<\/h4>\n\n<ul>\n<li>Name change.<\/li>\n<\/ul>\n\n<h4>2.9.8<\/h4>\n\n<ul>\n<li>Improved: Synchronized scroll option in Critical CSS Quality Test.<\/li>\n<\/ul>\n\n<h4>2.9.7<\/h4>\n\n<ul>\n<li>Improved: Critical CSS Quality Test (Split View).<\/li>\n<li>Added: Critical CSS Live Editor.<\/li>\n<\/ul>\n\n<h4>2.9.6<\/h4>\n\n<ul>\n<li>Added: Simple Critical CSS extraction javascript widget from admin menu bar. (@alexlii)<\/li>\n<li>Added: Full CSS extraction javascript widget from admin menu bar. (@bhagawadkrishna)<\/li>\n<li>Added: Search a page by URL (@Emilybkk)<\/li>\n<\/ul>\n\n<h4>2.9.5<\/h4>\n\n<ul>\n<li>Added: option to require preloading of assets to complete in Service Worker installation (before activation).<\/li>\n<li>Added: Progressive Web App preload filter <code>abtf_pwa_preload<\/code>.<\/li>\n<li>Added: Service Worker sends identifying HTTP header <code>X-PAGESPEED-SW<\/code> in requests to allow server side modification for SW.<\/li>\n<\/ul>\n\n<h4>2.9.4<\/h4>\n\n<ul>\n<li>Repair of previous incomplete update.<\/li>\n<\/ul>\n\n<h4>2.9.3<\/h4>\n\n<ul>\n<li>Bugfix: PHP 5.3 compatibility (@thowden)<\/li>\n<li>Bugfix: Older webfont.js version <code>v1.6.26<\/code> on Google CDN. (@jimwalczak)<\/li>\n<li>Bugfix: Global CDN URL not applied. (@supernovae)<\/li>\n<li>Bugfix: Service Worker file not removed upon uninstallation.<\/li>\n<li>Bugfix: Google Lighthouse fails <code>start_url<\/code> audit. (@sirtaptap)<\/li>\n<li>Added: option to preload navigation requests in Service Worker on mousdown event to prevent 300ms tap delay.<\/li>\n<\/ul>\n\n<h4>2.9.2<\/h4>\n\n<ul>\n<li>Added: HTTP\/2 Server Push for Critical CSS.<\/li>\n<\/ul>\n\n<h4>2.9.1<\/h4>\n\n<ul>\n<li>Bugfix: Service Worker JSON config from query parameter not persistent after browser restart.<\/li>\n<\/ul>\n\n<h4>2.9.0<\/h4>\n\n<ul>\n<li>Added: HTTP\/2 Server Push optimization.<\/li>\n<li>Added: <a href=\"https:\/\/calendar.perfplanet.com\/2016\/cache-digests-http2-server-push\/\">Cache Digest<\/a> hash computation in PWA Service Worker for HTTP\/2 pushed resources.<\/li>\n<li>Added: HTTP\/2 test in admin menu.<\/li>\n<li>Added: PageSpeed admin menu.<\/li>\n<li>Improved: location of PWA config json file sent to Service Worker as a query parameter. (<a href=\"https:\/\/github.com\/optimalisatie\/above-the-fold-optimization\/issues\/66\">@16patsle<\/a>)<\/li>\n<li>Improved: plugin disabled for REST API requests.<\/li>\n<li>Improved: Service Worker cache cleanup in idle time.<\/li>\n<\/ul>\n\n<p>Older changes have been moved to changelog.txt.<\/p>\n\n<!--section=faq-->\n<dl>\n<dt>Installation Instructions<\/dt>\n<dd><h3>WordPress plugin installation<\/h3>\n\n<ol>\n<li>Upload the <code>above-the-fold-optimization\/<\/code> directory to the <code>\/wp-content\/plugins\/<\/code> directory.<\/li>\n<li>Activate the plugin through the 'Plugins' menu in WordPress.<\/li>\n<li>Navigate to the plugin settings page.<\/li>\n<li>Configure Critical CSS and tune the options for a Google PageSpeed 100 Score.<\/li>\n<\/ol><\/dd>\n\n<\/dl>","raw_excerpt":"WordPress optimization toolkit with a focus on SEO. This plugin enables to achieve a Google PageSpeed 100 Score. Supports most optimization, minificat &hellip;","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin\/34522","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin"}],"about":[{"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/types\/plugin"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/comments?post=34522"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wporg\/v1\/users\/optimalisatie"}],"wp:attachment":[{"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/media?parent=34522"}],"wp:term":[{"taxonomy":"plugin_section","embeddable":true,"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_section?post=34522"},{"taxonomy":"plugin_tags","embeddable":true,"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_tags?post=34522"},{"taxonomy":"plugin_category","embeddable":true,"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_category?post=34522"},{"taxonomy":"plugin_contributors","embeddable":true,"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_contributors?post=34522"},{"taxonomy":"plugin_business_model","embeddable":true,"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_business_model?post=34522"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}