SEO、PHP MasterPage 和渲染阻止 Javascript/CSS答案

【问题标题】：SEO, PHP MasterPage and render-blocking Javascript/CSSSEO、PHP MasterPage 和渲染阻止 Javascript/CSS
【发布时间】：2015-01-29 18:54:57
【问题描述】：

我有一个用 PHP 构建的网站，我想实现类似于 ASP 母版页的东西。所以我构建了这样的东西：

<!DOCTYPE hmtl>
<html>
  <head>
    //Generated from PHP (meta,css,javascript,title)
    //Can be modified in the controller before page display
  </head>
  <body>
     //Include the page content 
     //Includes page specific javascript
    <?php include $page ?>       
  </body>
</html>

我的问题是这会使控制器混乱并使 SEO 分析器非常不高兴。所以这里列出了我面临的问题并想知道如何解决。

是否有任何其他方法可以将特定于页面/插件的 css 包含到标题标签中，而无需在我的控制器中使用一堆 $config->addCSS(//Tag goes here//)？
Google 说要从标题中删除 jQuery 和 Bootstrap 脚本，但我有需要 jQuery 的页面特定脚本（把手）。如何将 jQuery 移动到 body 标记的底部，但在 $page 中包含的页面脚本之前？

我不太喜欢的可能解决方案：

使用 javascript 在 $page 变量中包含页面特定的 css。这是可能的，但我不会得到 FOUT("Flash of Unstyled Text") 吗？

2.1 在 $page 变量的底部包含 jQuery/Bootstrap。这很好，直到新版本出来并且所有页面都必须更新。

2.2 对于每一个页面，在我包含所需脚本 (jQuery/Boostrap) 之后，在母版页中包含脚本和包含该脚本的另一个页面。

【问题讨论】：

我通过在每个页面的底部包含我的 $config 对象（它包含有关我需要的所需 javascripts 的信息）解决了问题 2，这意味着虽然我必须在每个页面上包含该对象，我只需要在最初创建对象时更新我的 javascripts。

标签： javascript php css seo master-pages

【解决方案1】：

输出缓冲为我解决了这个问题。

  <? ob_start(); ?>
    <html>
    <head>
        <link rel="stylsheet" type="text/CSS" href="my-main.css" />
        <!--no-custom-app-css-yet-->
        <title>Balloon App</title>
    </head>
    <body>

        <p>I write content until I introduce my app below</p>

        <div class="balloon-app"></div>
        <!--my-app-css-->
        <style type="text/CSS">
            .balloon-app {
                color: green;
            }
        </style>
        <!--/my-app-css-->

        <!--my-app-js-->
        <script type="text/javascript">
            document.writeln('jQuery has been called before balloon app script. Hooray!');  
        </script>
        <!--/my-app-js-->

        <script type="text/javascript" src="jquery-file.min.js"></script>
        <!--no-custom-app-js-yet-->

    </body>
</html>

在下面添加以下内容以存储输出缓冲区。然后我们可以改变周围的东西......

<?
// Get output buffer
$content = ob_get_clean();

// A function for finding the stuff in between [tag]*[/tag]
function get_string_between($string, $start, $end){
    $string = " ".$string;
    $ini = strpos($string,$start);
    if ($ini == 0) return "";
    $ini += strlen($start);
    $len = strpos($string,$end,$ini) - $ini;
    return substr($string,$ini,$len);
}

// Here's where it re-places everything...

// Get app JS & CSS stuff
$appDataJS = get_string_between($content, '<!--my-app-js-->', "<!--/my-app-js-->");
$appDataCSS = get_string_between($content, '<!--my-app-css-->', "<!--/my-app-css-->");

// Move the stuff to these locations
$JSMoved = str_replace('<!--no-custom-app-js-yet-->', $appDataJS, $content);
$CSSMoved = str_replace('<!--no-custom-app-css-yet-->', $appDataCSS, $JSMoved); // (JS already re-placed)

// Clear the old script/stylesheet locations in body tags
$ClearOldJS = preg_replace('#<!--my-app-js-->(.*?)<!--/my-app-js-->#is', '', $CSSMoved);
$ClearOldCSS = preg_replace('#<!--my-app-css-->(.*?)<!--/my-app-css-->#is', '', $ClearOldJS); // (old JS already removed)

$FinalBuffer = $ClearOldCSS;

echo $FinalBuffer;

这是我的源代码现在的样子：

<html>
    <head>
        <link rel="stylsheet" type="text/CSS" href="my-main.css" />
        <style type="text/CSS">
            .balloon-app {
                color: green;
            }
        </style>
        <title>Balloon App</title>
    </head>
    <body>

        <p>I write content until I introduce my app below</p>
        <div class="balloon-app"></div>

        <script type="text/javascript" src="jquery-file.min.js"></script>
        <script type="text/javascript">
            document.writeln('jQuery has been called before balloon app script. Hooray!');  
        </script>

    </body>
</html>

【讨论】：