Question

我分析了我的网站，发现我有一个F级关于使用此描述减少HTTP请求的次数：

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

我怎么发烧？如何使用C SS精灵组合图像？

Answer 1

什么是CSS Sprites？

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

要精灵检查此online service

针对您的javascript和css问题。你需要的是compressor。如果你真的想按照说明进行操作。以下是css/javascript compressor的示例（有快速google的替代方案可以提供帮助）

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

和

我建议使用cdn来加速提供静态文件。谷歌有一项服务（Google PageSpeed），但最后我还是仅在邀请时检查它（刚才检查了它Limited free trial）。另一种选择是cloudflare。

干杯！

Answer 2

将图像转换为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;
}
?>

Answer 3

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

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

http://sass-lang.com/

对于精灵图像，根据你的图像，将它们放入精灵中可能是不现实的。它适用于图标和自然界中的小东西，但对于像大背景图像等事情是很麻烦的。我之所以说这是因为你必须每次修改和调整精灵，而不是简单的改变CSS 。这是根据您节省的请求时间进行成本/收益分析。

如何减少HTTP请求？

3 个答案: