One of the high-impact criteria of a fast web page is whether image dimensions have been specified in html or not. Without image dimensions, web browsers must "reflow" and "repaint" the image once it is reloaded.
The problem is that specifying image dimensions can be tedious. One would be required to edit each template and insert dimensions manually. To make matters worst, there are hundreds (if not thousands) of images in vbulletin, some of which aren't even used. Conventionally, one could run a get image sizes script to pull all images and respective dimensions from vbulletin. This method returns thousands of results, most of which are images with no need to be optimized.
I found a very easy solution using VBSEO. If you don't use VBSEO, this article won't be of much help.
Open up 3 instances of GTmetrix.com.
The first should point to your CMS (if applicable), the 2nd to your forum root, and the third to any PUBLICLY viewable thread.
GTmetrix then grades your site speed against several criteria.
Click on the "specify image dimensions" criteria. Odds are you scored 0 on this.
A list of images come up for each instance of GTmetrix. These are the images that load up on your most popular pages (CMS, FORUMHOME and SHOWTHREAD). You can use GTmetrix to find images on other pages, if you wish, like blogs etc.
Copy paste each list of images into notepad and make sure there are no duplicates.
Log into VBSEO.
Navigate to VBSEO "Other Enhancements" and click on "Image Size Attributes".
Select "Yes". Paste the list of images from your clipboard.
Next, you have to format the list so that VBSEO can understand it. It's relatively simple. For example http://www.example.com/forum/images/smile.png (Dimensions: 728 x 90) would become 'smile.png'=>'728x90'
Note: if you have multiple styles with the same image in each, this will work so long as the image has the same dimensions. Otherwise you will screw up your style.
Note2: Be careful with avatars and other resized images, since they can appear in various sizes throughout your forum. You shouldn't be specifying dimensions for these.
Run GTmetrix to make sure the image dimensions no longer need to be specified.
I haven't figured out how to do google adsense and external images with this method yet.
I have used this and managed to remove some of the images from the list, yet i'm still getting an F (0) result for this test.
Some of the files I hadn't removed were avatars/avatar thumbnails (As instructed). I've also not managed to specify sizes of files which do not sit on my website.
Any idea as to why this is?
I can give you my url in private to have a look if you want
Thanks!
The way GTMetrix grades this criteria is weird. If you have a few images without dimensions, you will grade poorly, even if 99% of your images are OK. I imagine your avatars are screwing up the page. Maybe try a page without avatars.
You can do avatars and profile pictures, but it's a somewhat futile exercise because there are thousands (for me, at least) cycling through your pages.
01-12-2012, 11:00 PM
02-28-2013, 05:46 PM
