How to increase Page Speed

Google Page Speed addon for Firebug

Says me for this page /pg/groups/world/
   
   
Specify image dimensions
A width and height should be specified for all images in order to speed up page display. Specifying image dimensions prevents the browser from having to re-position the contents of the page.

The following image(s) are missing a width and/or height:

# /community/pg/groupicon/4893/small/default.jpg
# /community/pg/groupicon/3388/small/default.jpg
# /community/pg/groupicon/3012/small/default.jpg
# /community/pg/groupicon/2444/small/default.jpg






And here are the results for elgg community for grouppage
/pg/groups/world/

[Score: 0%]
   
   
Specify image dimensions
A width and height should be specified for all images in order to speed up page display. Specifying image dimensions prevents the browser from having to re-position the contents of the page.

The following image(s) are missing a width and/or height:

    * /_graphics/elgg_toolbar_logo.gif
    * /pg/groupicon/212846/small/default.jpg
    * /pg/groupicon/212067/small/default.jpg (3 uses)
    * /pg/groupicon/211069/small/default.jpg
    * /pg/groupicon/184041/small/default.jpg (2 uses)
    * /pg/groupicon/20578/small/default.jpg
    * /pg/groupicon/12/small/default.jpg (8 uses)
    * /pg/groupicon/165444/small/default.jpg (2 uses)
    * /mod/groups/graphics/defaultsmall.gif (8 uses)
    * /pg/groupicon/7/small/default.jpg (3 uses)
    * /pg/groupicon/19/small/default.jpg
    * /pg/groupicon/15815/small/default.jpg (6 uses)
    * /pg/groupicon/52477/small/default.jpg (3 uses)
    * /pg/groupicon/23300/small/default.jpg (2 uses)
    * /pg/groupicon/323/small/default.jpg (2 uses)
    * /pg/groupicon/215680/small/default.jpg (2 uses)
    * /pg/groupicon/179063/small/default.jpg
    * /_graphics/powered_by_elgg_badge_drk_bckgnd.gif

 

My question is: Wher can I specify image dimensions for small, tiny, large... icons for groups and users?

 

  • an eye opener -- things to overcome :)

    bravo, overcomer!

  • @overcomer - Claps for you.

    Thats great discovery,...

  • topbar    16,16 tiny    25,25 small    40,40 medium    100,100 large    200,200 master    550,550
    $imgsizearray = getimagesize($input_name);
    $width = $imgsizearray[0];
    $height = $imgsizearray[1];

  • Hi Dhrup in html the output should be like this

    <img src="/graphics/icon.gif" width="20" height="21" border="0" />

    it is done by variables $width and $height ?

    source code of elgg.org/pg/groups shows for default.jpg

    <img src="http://community.elgg.org/pg/groupicon/212846/small/default.jpg" border="0"  title=""  />

    there is no height and width specified

    ...

     

    • That was just the diff img sizes for topbar.. master & the code snippet from iconupload.php for the php code which does the resizing.
    • Patching in the <img W and H values could be done via diff methods
    • You could try extra JS  in the head to do this dynamically ==>
            var el = $('#id');
    el.html(el.html().replace(/old img code/ig, "new img code width w & H "));
    -- scanning for topbar.. master. (jQuery ptr -> courtesy of AlfaLive..) )

  • overcomer is alfalive :)  I has not noticed that I use my testaccount

    I can add this issue to track. as enhancement for new versions

  • in Elgg 1.6 group plugin

    icon.php

    <div class="groupicon">
    <a href="<?php echo $vars['entity']->getURL(); ?>" class="icon" ><img src="<?php echo $vars['entity']->getIcon($vars['size']); ?>" border="0" <?php echo $align; ?> title="<?php echo $name; ?>" <?php echo $vars['js']; ?> /></a>
    </div>

     

    i think it is already done by this code <?php echo $vars['js']; ?>

  • @Alfa=Over !!!
    LOLZ ;-O
    Trac - yes... best place to do this *is when fetching an image.. I might look into code to see if it might be easy to write a temp hack... But for now --> you can add JS into <head> too lok for the <img code
    /small/xxxxx.jpg and use (your;) jQuery to replace by xxx,jpg width="" height="" .... checking for /small, etc ;-)

  • I tested the demo page http://demo.elgg.com/pg/groups/world/

     

    the same issue

    [Score: 40%]
       
       
    Specify image dimensions
    A width and height should be specified for all images in order to speed up page display. Specifying image dimensions prevents the browser from having to re-position the contents of the page.

    The following image(s) are missing a width and/or height:

        * elgg_toolbar_logo.gif
        * /mod/groups/graphics/defaultsmall.gif (6 uses)
        * /pg/groupicon/320/small/default.jpg
        * /pg/groupicon/229/small/default.jpg
        * /pg/groupicon/211/small/default.jpg
        * /pg/groupicon/111/small/default.jpg
        * /_graphics/powered_by_elgg_badge_drk_bckgnd.gif

  • tested my site with http://tools.pingdom.com

    Simple Cache Disabled 5.1 Seconds

    Simple Cache Enabled 6.1 Seconds

    that is funny :)))))

    and once more total differencies. sometimes faster sometimes slower...