CODEWITHSUNDEEP
phpjavascripthtmlcssjoomla2.5
mr.sohrab
mr.sohrab

Reputation: 51

How can I Make fewer HTTP requests?

I analyzed my site and I found I have a Grade F on Make fewer HTTP requests with this description :

This page has 6 external Java script scripts. Try combining them into > one. This page has 3 external style sheets. Try combining them into > one. This page has 18 external background images. Try combining them > with C SS sprites.

How can I Make fever? How can I combine images using C SS sprites?

Upvotes: 0

Views: 6622

Answers (3)

gaara42
gaara42

Reputation: 112

Converting images into base64 can also reduce HTTP request and if you take advantage of gzip or other compression methods, can help reduce file-sizes as well. Not sure what langauge you use in the back-end to code the website, but if you are using PHP, the following function might be helpful.

<?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);
    }
}
?>

For the CSS, as other suggested minifying it would help in addition to combining the CSS files beforehand. For example, the below code concatenates all relevant CSS files, minifies it, then adds it to the page (preferably in the header).

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

Upvotes: 1

AdamSchuld
AdamSchuld

Reputation: 863

You'll want to look in to preprocessors that make this job a lot easier. Preprocessors are available for javascript external files as well as css (SASS and LESS among others). The alternative is combining the stylesheets yourself, but these programs will automatically do it and some often minify your stylesheets as well to improve speed.

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

http://sass-lang.com/

As for the sprite images, depending on your images it could be unrealistic to put them into sprites. It works well for icons and things small in nature, but is a hassle for things like large background images, etc. The reason I say that is because you will have to modify and adjust the sprite every time as opposed to making a simple CSS change. It's a cost / benefit analysis based on how much request time you save.

Upvotes: 0

Joe
Joe

Reputation: 8292

What are CSS Sprites?

An image sprite is a collection of images put into a single image. A web page with many images can take a long time to load and generates multiple server requests. Using image sprites will reduce the number of server requests and save bandwidth.

To make sprites check this online service

For your javascript and css problems. What you need is a compressor. If you really want to follow the instructions that is. Here is a sample of a css/javascript compressor (there are alternatives to this a quick google will help)

But I personally have problems when putting all scripts in to just one file. Just remember that it would be better that you just simply add external scripts that the page will actually need.

AND

May I suggest using a cdn to help speed up serving of static files. Google has a service (Google PageSpeed) but last I check its still on invitation only (checked it just now its on Limited free trial). Another alternative would be cloudflare.

Cheers!

Upvotes: 2

Related Questions