| <!-- |
| Licensed to the Apache Software Foundation (ASF) under one |
| or more contributor license agreements. See the NOTICE file |
| distributed with this work for additional information |
| regarding copyright ownership. The ASF licenses this file |
| to you under the Apache License, Version 2.0 (the |
| "License"); you may not use this file except in compliance |
| with the License. You may obtain a copy of the License at |
| |
| http://www.apache.org/licenses/LICENSE-2.0 |
| |
| Unless required by applicable law or agreed to in writing, |
| software distributed under the License is distributed on an |
| "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY |
| KIND, either express or implied. See the License for the |
| specific language governing permissions and limitations |
| under the License. |
| --> |
| |
| <html> |
| <head> |
| <meta name="viewport" content="width=device-width, initial-scale=1"> |
| <title>Move CSS Above Scripts</title> |
| <link rel="stylesheet" href="doc.css"> |
| </head> |
| <body> |
| <!--#include virtual="_header.html" --> |
| |
| |
| <div id=content> |
| <h1>Move CSS Above Scripts</h1> |
| |
| |
| <h2>Configuration</h2> |
| <p> |
| The 'Move CSS Above Scripts' filter is enabled by specifying: |
| </p> |
| <dl> |
| <dt>Apache:<dd><pre class="prettyprint" |
| >ModPagespeedEnableFilters move_css_above_scripts</pre> |
| <dt>Nginx:<dd><pre class="prettyprint" |
| >pagespeed EnableFilters move_css_above_scripts;</pre> |
| </dl> |
| <p> |
| in the configuration file. |
| </p> |
| |
| <h2>Description</h2> |
| <p> |
| 'Move CSS Above Scripts' seeks to make sure scripts do not block the |
| loading of CSS resources. |
| </p> |
| <p> |
| This is based on the |
| <a target="_blank" href="https://developers.google.com/speed/docs/best-practices/rtt#PutStylesBeforeScripts"> |
| best practice for downloading resources early. |
| </a> |
| </p> |
| |
| <h2>Operation</h2> |
| <p> |
| The 'Move CSS Above Scripts' filter operates only on CSS |
| <code><link></code> and <code><style></code> tags found after the |
| first <code><script></code> tag and moves these tags above the first |
| <code><script></code>. |
| </p> |
| <p> |
| For example, if the HTML document looks like this: |
| </p> |
| <pre class="prettyprint"> |
| <html> |
| <head> |
| </head> |
| <body> |
| <script src="script.js" type="text/javascript"></script> |
| <div class="blue yellow big bold"> |
| Hello, world! |
| </div> |
| <style type="text/css"> |
| .foo { color: red; } |
| </style> |
| <link rel="stylesheet" type="text/css" href="styles/all_styles.css"> |
| </body> |
| </html> |
| </pre> |
| <p> |
| Then PageSpeed will rewrite it into: |
| </p> |
| <pre class="prettyprint"> |
| <html> |
| <head> |
| </head> |
| <body> |
| <style type="text/css"> |
| .foo { color: red; } |
| </style> |
| <link rel="stylesheet" type="text/css" href="styles/all_styles.css"> |
| <script src="script.js" type="text/javascript"></script> |
| <div class="blue yellow big bold"> |
| Hello, world! |
| </div> |
| </body> |
| </html> |
| </pre> |
| |
| <p> |
| In some browsers the original version will not even download the CSS file |
| until the JavaScript has been downloaded and run. This transformation will |
| make sure the CSS file is loaded first. |
| </p> |
| <p class="note"> |
| Note: You may also want to enable |
| the <a href="filter-css-to-head">move_css_to_head</a> filter to avoid a flash |
| of unstyled content. When both filters are enabled, stylesheets are moved |
| into the head and above the first script. |
| </p> |
| |
| <h3>Example</h3> |
| <p> |
| You can see the filter in action at <code>www.modpagespeed.com</code> on this |
| <a href="https://www.modpagespeed.com/examples/move_css_above_scripts.html?ModPagespeed=on&ModPagespeedFilters=move_css_above_scripts">example</a>. |
| </p> |
| |
| <h2>Limitations</h2> |
| <p> |
| This filter operates within the scope of a "flush window". Specifically, |
| large, or dynamically generated HTML files may be "flushed" by the |
| resource generator before they are complete. If the filter |
| encounters a flush after the first <code><script></code> tag, |
| subsequently encountered CSS elements will not be moved above it. |
| </p> |
| |
| <h2>Risks</h2> |
| <p> |
| This filter is considered low risk. However, JavaScript that is |
| executed before a CSS element will see a different view of the DOM in |
| the presence of this rewriter: the CSS element will now be in the head. |
| If there is such JavaScript embedded in the middle of a page then this |
| rewriter may change its behavior. |
| </p> |
| <p> |
| This filter may slow down your webpages for some browsers. Just as JavaScript |
| can block download of CSS in some browsers, some others will not execute |
| JavaScript until preceding CSS has been rendered. This filter is currently |
| considered experimental while we measure its effectiveness. |
| </p> |
| |
| |
| </div> |
| <!--#include virtual="_footer.html" --> |
| </body> |
| </html> |
