SEO，PHP MasterPage和渲染阻塞Javascript/CSS

SEO, PHP MasterPage and render-blocking Javascript/CSS

本文关键字：Javascript CSS PHP MasterPage SEO 更新时间：2023-09-26

我有一个用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//）？
谷歌说要从标题中删除jQuery和Bootstrap脚本，但我有页面特定的脚本（车把）需要jQuery。如何将 jQuery 移动到 body 标签的底部，但在包含在$page中的页面脚本之前？

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

使用 javascript 将特定于页面的 css 包含在 $page 变量中。这是可能的，但我不会得到一个FOUT（"无样式文本的闪光"）吗？

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

2.2 对于每个页面，都有另一个包含脚本的页面，并在母版页中包含所需的脚本（jQuery/Boostrap）。

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

  <? 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>