Site load times

[MPC]

Question about specifying image dimmensions: If an image should load at 100x100 for example, I always created the image at that size thinking I wouldnt' need to specify heigh and width. Wouldn't adding the height and width parametters in the IMG tag re redundant in this case? How is it better?

[sipka]

Question about specifying image dimmensions: If an image should load at 100x100 for example, I always created the image at that size thinking I wouldnt' need to specify heigh and width. Wouldn't adding the height and width parametters in the IMG tag re redundant in this case? How is it better?

Not redundant because when a browser starts to load your page if you don't specify image dimensions then it has to calculate it while loading the page making your page looks like it is "jumping around" while the browser draws everything. And after the images are downloaded it has to "re-draw" the page again.

You can find here more info:
Optimize browser rendering

[MPC]

My site uses Thesis to manage my custom themes. Thesis just confuses me! lol! That was probably not the best option when I had the template made, but I didn't know any better. I can add all my stuff into one css file, that's easy. But I can't figure out how I can remove the various stylesheets I won't need anymore. Thesis is weird.

edit: found it

[DonEgon]

Hey MPC,

can you please tell us where you found it?

Thanks

[MPC]

Certainly! From your thesis folder, go into lib/classes/head.php and look for:

function stylesheets() {
        global $thesis;

        // Main stylesheet
        // $date_modified = filemtime(TEMPLATEPATH . '/style.css');
        // $styles['core'] = array(
        //    'url' => get_bloginfo('stylesheet_url') . '?' . date('mdy-Gms', $date_modified),
        //    'media' => 'screen, projection'
        // );

        // $date_modified = filemtime(THESIS_LAYOUT_CSS);
        // $styles['layout'] = array(
        //    'url' => get_bloginfo('template_url') . '/layout.css?' . date('mdy-Gms', $date_modified),
        //    'media' => 'screen, projection'
        // );
        
        // $styles['ie'] = array(
        //    'url' => THESIS_CSS_FOLDER . '/ie.css',
        //    'media' => 'screen, projection'
        // );

        // Custom stylesheet, if applicable
        if ($thesis['style']['custom']) {
            if (file_exists(THESIS_CUSTOM . '/custom.css'))
                $date_modified = filemtime(THESIS_CUSTOM . '/custom.css');
            
            $styles['custom'] = array(
                'url' => THESIS_CUSTOM_FOLDER . '/custom.css?' . date('mdy-Gms', $date_modified),
                'media' => 'screen, projection'
            );
        } 

Comment out the lines for those CSS files you don't want (in orange above).I just copied all that CSS stuff into my own custom css. Also, I copied a few images from theses/images to thesis/custom/images. That way I didn't have to bother adjusting all the URLs in the thesis core css files.

[MPC]

Check out this easy to use css compressor. It's just a web form. Past your current CSS code in, hit the button and it spits out a compressed version of your code. Clean CSS - A Resource for Web Designers - Optmize and Format your CSS

[MPC]

Interesing page on css sprites. CSS Sprites: What They Are, Why They’re Cool, and How To Use Them | CSS-Tricks

Also useful is this firefox add-on that can crawl your sitemap.xml and tell you what CSS selectors are not used in your site. Easy way to clean up the excess CSS: Dust-Me Selectors

[JTJagger]

Great work, MPC, I'm sure your research is useful to a lot of people. Keep it up, and please do feel free to ask any questions if I can be of any help.

[MPC]

For those interested, I created a blog post that explains all the tweaks I did. see http://www.pokeraffiliatelistings.co...r-website.html