0

我分析了我的网站，发现我在使用以下描述减少 HTTP 请求时获得了 F 级：

此页面有 6 个外部 Java 脚本脚本。尝试将它们组合成 > 一个。此页面有 3 个外部样式表。尝试将它们组合成 > 一个。此页面有 18 个外部背景图像。尝试将它们 > 与 C SS 精灵组合。

我怎样才能发烧？如何使用 C SS sprite 组合图像？

4

3 回答 3

2

什么是CSS 精灵？

图像精灵是放入单个图像的图像集合。包含许多图像的网页可能需要很长时间才能加载并生成多个服务器请求。使用图像精灵将减少服务器请求的数量并节省带宽。

要制作精灵，请检查此在线服务

对于您的javascript问题css。你需要的是一个compressor. 如果您真的想按照说明进行操作。这是一个css/javascript 压缩器的示例（有替代方案，快速谷歌会有所帮助）

但是我个人在将所有脚本放入一个文件时遇到了问题。请记住，您最好只添加页面实际需要的外部脚本。

和

我可以建议使用 acdn来帮助加快静态文件的服务。谷歌有一项服务（谷歌 PageSpeed），但最后我只在受邀时检查它（刚刚检查它是 on Limited free trial）。另一种选择是cloudflare。

干杯!

于 2013-07-16T07:16:32.477 回答
1

将图像转换为base64也可以减少 HTTP 请求，如果您利用gzip或其他压缩方法，也可以帮助减少文件大小。不确定您在后端使用什么语言对网站进行编码，但如果您使用的是 PHP，以下函数可能会有所帮助。

<?php
# get base64 image and put into URL
$imgStr = base64_encode_image("img.jpg","jpeg");
echo "<img src='$imgStr'>";

function base64_encode_image($filename=string,$filetype=string) {
    # encodes an image in base64, returns formatted data
    $imgData = '';
    # check input is not null
    if ($filename) {
        # get path information
        $imgInfo = pathinfo($filename);
        # find out image extension
        $filetype = $imgInfo['extension'];
        # open and read image
        $imgbinary = fread(fopen($filename, "r"), filesize($filename));
        # convert binary image input into base64 encoding
        $imgData = 'data:image/' . $filetype . ';base64,' . base64_encode($imgbinary);
        # return formatted string
        return($imgData);
    }else{
        return(FALSE);
    }
}
?>

对于 CSS，正如其他人建议的那样，除了预先组合 CSS 文件之外，它还会有所帮助。例如，下面的代码连接所有相关的 CSS 文件，将其缩小，然后将其添加到页面（最好在页眉中）。

<?php
function stylesheets($cssFiles){
    # Load all relevant css files
    $css = '';
    # concatenate all relevant css files
    $cssFiles = array('home','about','etc');
    foreach ($cssFiles as $cssFile) {
        $css=$css.file_get_contents(YOUR_PATH."/$cssFile.css");
    }
    # minify all css
    $css=minifyCSS($css);
    echo "<style>$css</style>";
}
function minifyCSS($string){
    # minify CSS
    # Strips Comments
    $string = preg_replace('!/\*.*?\*/!s','', $string);
    $string = preg_replace('/\n\s*\n/',"\n", $string);
    # Minifies
    $string = preg_replace('/[\n\r \t]/',' ', $string);
    $string = preg_replace('/ +/',' ', $string);
    $string = preg_replace('/ ?([,:;{}]) ?/','$1',$string);
    # Remove semicolon
    $string = preg_replace('/;}/','}',$string);
    #Return Minified CSS
    return $string;
}
?>
于 2013-07-16T07:50:33.343 回答
0

您将需要研究使这项工作变得更容易的预处理器。预处理器可用于 javascript 外部文件以及 css（SASS 和 LESS 等）。另一种方法是自己组合样式表，但这些程序会自动完成，有些程序通常还会缩小样式表以提高速度。

https://code.google.com/p/jsmake-preprocessor/

http://sass-lang.com/

至于精灵图像，根据您的图像，将它们放入精灵中可能是不切实际的。它适用于图标和本质上很小的东西，但对于大背景图像等东西来说很麻烦。我之所以这么说是因为你每次都必须修改和调整精灵，而不是进行简单的 CSS 更改. 这是基于您节省多少请求时间的成本/收益分析。

于 2013-07-16T07:23:11.917 回答