如何減少HTTP請求？

Question

我分析了自己的網站，發現在使用此說明進行更少的HTTP請求方面，我的成績為F級：

該頁面有6個外部Java腳本腳本。 嘗試將它們組合成>個。 此頁面包含3個外部樣式表。 嘗試將它們組合成>個。 此頁面有18個外部背景圖像。 嘗試將它們>與C SS子畫面合並。

我怎么發燒？ 如何使用C SS子畫面合並圖像？

Answer 1

什么是CSS Sprite ？

圖像精靈是放在單個圖像中的圖像的集合。 包含許多圖像的網頁可能需要很長時間才能加載並生成多個服務器請求。 使用圖像精靈將減少服務器請求的數量並節省帶寬。

要制作精靈，請檢查此在線服務

對於您的javascript和css問題。 您需要的是compressor 。 如果您真的要按照說明進行操作。 這是css / javascript壓縮器的示例（快速Google可以幫您解決這個問題）

但是我個人將所有腳本放入一個文件時遇到了問題。 請記住，最好只添加頁面實際需要的外部腳本會更好。

和

我可以建議使用cdn來幫助加速靜態文件的提供。 Google提供了一項服務（ 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更改。 這是一項成本/收益分析，基於您節省了多少請求時間。