View Full Version: Forum Pageload Tips, Part Deux

Cyber Nations Forums > Suggestion Box > Forum Pageload Tips, Part Deux


Title: Forum Pageload Tips, Part Deux
Description: More Stuff for an Administrator


orioni - August 27, 2007 01:38 AM (GMT)
I ran another audit with the Pingdom Tools (test it here), and on average the mainpage needs 0.5 à 0.7 seconds to load, weighing about 121.8 KB. That's not bad, but it can always be improved.

>> Screenshot of test results (111.95 KB) <<


What can be done?
As the test shows, there are certain images not being loaded from the website rocky.ifsz.net/rocky/Gradients. Those image requests aren't generating any results, but the browsers is still wasting time on them every single time a page is loaded. Since the images are being linked to from inside the CSS, the best thing to do would be removing those unused gradients from the stylesheet.

Furthermore, I've taken the liberty to run the CSS through a free online 'compacter' which is available at CleanCSS dot com. Here is what I got as a result after 'compacting' the stylesheet: "Input: 7.076KB, Output: 5.915KB, Compression Ratio: 16.4% (-1161 Bytes)". By simple changing the way some properties are written, the size was reduced by over 15%. And as a bonus, all properties were sorted alphabetically, to make life easier for any admin who would want to make changes in the future.

Besides tweaking the CSS, I would also highly recommend converting the forum logo from JPG to GIF. The current JPG is 34.06 KB, while converting it to GIF would create an image of only 50% the original size. An easy task in Photoshop, so I have already done that job for you: forum.gif, now at 16.62 KB.

Last but not least, hosting the resized forum logo at the forum itself would be the best solution to make the image more responsive; and it would also save some bandwidth. *winks at Admin*

How do I do that?
Hosting the header here on this forum is easy: save the GIF to your computer and upload it again. An administrator need only go the what I assume is some hidden mod forum and attach the GIF to a new post, preferably titled "IMG: Logo", so you can still later. Next, the URL of that attached image would be copied and used to replace the current logo. Go to Admin CP >> Skinning & Styles >> Images. The first box says "Logo", this is where you need to be. Paste the URL of the GIF as a replacement for the current JPG. Mark the selector, scroll down and click "Submit" to finish.

To improve the CSS, simply go to the Admin CP >> Skinning & Styles >> Manage Style Sheets. Cut and paste everything you see on that box into WordPad or some other small application. (Always have a backup!) Next, copy/paste the following code into the now empty textbox. Scroll down and hit "Edit CSS" to finish.

Once you've done all of this, you can go ahead and test if the forum loads a millisecond faster. You can also run another test at Pingdom and compare the results to my screenshot of above.

I hope this was helpful.

Regards,
Orioni

CODE
html{overflow-x:hidden;overflow-y:auto}

form{display:inline}
img{border:0;vertical-align:middle}
BODY{background-color:#fff;color:#000;font-family:Verdana, Tahoma, Arial, sans-serif;font-size:11px;margin:0 10px}
TABLE,TR,TD{color:#000;font-family:Verdana, Tahoma, Arial, sans-serif;font-size:10px}
a:link,a:visited,a:active{color:#000;text-decoration:underline}
a:hover{color:#125381;text-decoration:none}

fieldset.search{line-height:150%;padding:6px}
label{cursor:pointer}

img.attach{border:2px outset #EEF2F7;padding:2px}

.googleroot{line-height:130%;padding:6px}
.googlechild{line-height:130%;margin-left:30px;padding:6px}
.googleparent{color:#24164;line-height:130%;margin-left:30px;padding:6px}
.googlebottom,.googlebottom a:link,.googlebottom a:visited,.googlebottom a:active{color:#3A4F6C;font-size:11px}
.googlish,.googlish a:link,.googlish a:visited,.googlish a:active{color:#00D;font-size:14px;font-weight:700}
.googlepagelinks{font-size:1.1em;letter-spacing:1px}
.googlesmall,.googlesmall a:link,.googlesmall a:active,.googlesmall a:visited{color:#434951;font-size:10px}

li.helprow{margin:0 0 10px;padding:0}
ul#help{padding:0 0 0 15px}

option.cat{font-weight:700}
option.sub{color:#555;font-weight:700}
.caldate{color:#125381;font-size:10px;font-weight:700;margin:0;padding:4px;text-align:right}

.warngood{color:green}
.warnbad{color:red}

#padandcenter{margin-left:auto;margin-right:auto;padding:14px 0;text-align:center}

#profilename{font-size:28px;font-weight:700}
#calendarname{font-size:22px;font-weight:700}

#photowrap{padding:6px}
#phototitle{border-bottom:1px solid #000;font-size:24px}
#photoimg{margin-top:15px;text-align:center}

#ucpmenu{background-color:#F7F7F7;border:1px solid #E4E4E4;line-height:150%;width:22%}
#ucpmenu p{margin:0;padding:2px 5px 6px 9px}
#ucpcontent{background-color:#F7F7F7;border:1px solid #E4E4E4;line-height:150%;width:auto}
#ucpcontent p{margin:0;padding:10px}

#ipsbanner{position:absolute;right:5%;top:1px}
#logostrip{background-color:#fff;border:1px solid #fff;margin:0;padding:0}
#submenu{border:1px solid #fff;color:#125381;font-size:10px;font-weight:700;margin:3px 0}
#submenu a:link,#submenu a:visited,#submenu a:active{color:#125381;font-size:10px;font-weight:700;text-decoration:none}
#submenu A:hover{border-bottom:#125381 1px boxed;color:#125381}
#userlinks{border:1px solid #E4E4E4}

#navstrip{font-weight:700;padding:6px 0}

.activeuserstrip{padding:6px}

.pformstrip{color:#125381;font-weight:700;margin-top:1px;padding:7px}
.pformleft{background-color:#F7F7F7;border-right:1px solid #E4E4E4;border-top:1px solid #E4E4E4;margin-top:1px;padding:6px;width:25%}
.pformleftw{background-color:#F7F7F7;border-right:1px solid #E4E4E4;border-top:1px solid #E4E4E4;margin-top:1px;padding:6px;width:40%}
.pformright{background-color:#F7F7F7;border-top:1px solid #E4E4E4;margin-top:1px;padding:6px}

.post1,.post2{background-color:#fff}
.postlinksbar{background-color:#D1DCEB;font-size:10px;margin-top:1px;padding:7px}

.row1,.row2,.row3,.row4{background-color:#F7F7F7}

.darkrow1{background-color:#F7F7F7;color:#F7F7F7}
.darkrow2,.darkrow3{color:#3A4F6C}

.hlight{background-color:#DFE6EF}
.dlight{background-color:#EEF2F7}

.titlemedium{color:#125381;font-weight:700;margin:0;padding:7px}
.titlemedium a:link,.titlemedium a:visited,.titlemedium a:active{color:#125381;text-decoration:underline}

.maintitle{background-color:navy;color:#FFF;font-weight:700;letter-spacing:1px;padding:8px 0 8px 5px;vertical-align:middle}
.maintitle a:link,.maintitle a:visited,.maintitle a:active{color:#FFF;text-decoration:none}
.maintitle a:hover{text-decoration:underline}

.plainborder{background-color:#E4E4E4;border:1px solid #E4E4E4}
.tableborder{background-color:#E4E4E4;border:1px solid #E4E4E4;margin:0;padding:0;width:100%}
.tablefill{background-color:#F7F7F7;border:1px solid #E4E4E4;padding:6px}
.tablepad{background-color:#F7F7F7;padding:6px}
.tablebasic{border:0;margin:0;padding:0;width:100%}

.wrapmini{float:left;line-height:1.5em;width:25%}
.pagelinks{float:left;line-height:1.2em;width:35%}

.desc{color:#A6A5A5;font-size:10px}
.edit{font-size:9px}

.signature{color:#339;font-size:10px}
.postdetails{font-size:10px}
.postcolor{font-size:12px;line-height:160%}

.normalname{color:#003;font-size:12px;font-weight:700}
.normalname a:link,.normalname a:visited,.normalname a:active{font-size:12px}
.unreg{color:#900;font-size:11px;font-weight:700}

.searchlite{background-color:#FF0;color:red;font-weight:700}

#QUOTE{background-color:#F7F7F7;border:1px solid #E4E4E4;color:#000;font-family:Verdana, Arial;font-size:11px;padding:2px}
#CODE{background-color:#F7F7F7;border:1px solid #E4E4E4;color:#000;font-family:Courier, Courier New, Verdana, Arial;font-size:11px;padding:2px}

.copyright{font-family:Verdana, Tahoma, Arial, Sans-Serif;font-size:9px;line-height:12px}

.codebuttons{font-family:verdana, helvetica, sans-serif;font-size:10px;vertical-align:middle}
.forminput,.textinput,.radiobutton,.checkbox{font-family:verdana, helvetica, sans-serif;font-size:11px;vertical-align:middle}

.thin{border-bottom:1px solid #E4E4E4;border-top:1px solid #E4E4E4;line-height:140%;margin:2px 0;padding:6px 0}

.purple{color:purple;font-weight:700}
.red{color:red;font-weight:700}
.green{color:green;font-weight:700}
.blue{color:blue;font-weight:700}
.orange{color:#F90;font-weight:700}


Edit for early morning spelling.

admin - August 27, 2007 02:26 AM (GMT)
Did anyone ever tell you that you're awesome? I'll look into making the recommended changes.

orioni - August 27, 2007 02:30 AM (GMT)
Thanks, nice quote to put in my sig. ^_^

Lord Caedus - August 27, 2007 02:30 AM (GMT)
QUOTE (admin @ Aug 26 2007, 08:26 PM)
Did anyone ever tell you that you're awesome? I'll look into making the recommended changes.

Your so awesome.

orioni - August 28, 2007 01:05 AM (GMT)
Friendly reminder.

Thund3rbird - August 28, 2007 01:10 AM (GMT)
QUOTE (orioni @ Aug 27 2007, 07:05 PM)
Friendly reminder.

Awsome Job!!!! Amazing!

You're A True Cyber Nations Patriot

put that^^^^ in your sig :ehm:

Moderation - August 28, 2007 03:42 AM (GMT)
Thank you.

I am implementing some of your changes now.

Although, on my computer it only takes the pages here .04 seconds to load. ;)

EDIT: With your changes it is not just under .03 seconds for my pages to load here. If everyone gets a 25% boost then it is well worth it. Thanks.

orioni - August 28, 2007 11:19 PM (GMT)
@ Moderation:
The image in the header is still hosted by ImageShack now. ImageShack is slow, you should save the image to your computer, and upload it to the forum by attaching the file to a post, usually in the hidden admin section.

On the boards I manage, all images are attached to the forum itself. This ensure faster loading, paid for by IF ;) and makes sure you never lose any of the images.

orioni - August 30, 2007 07:55 PM (GMT)
Bringing up my post, because.

Haflinger - August 30, 2007 08:14 PM (GMT)
I recompressed the GIF as a PNG, and got a whopping 50-byte improvement.

Still, PNGs as a patent-free file format are better. So if admin wants mine, I'll upload it somewhere.

Republic of Umar - August 30, 2007 08:33 PM (GMT)
your a friggin genius...thats all Greek to me lol

Great Lord, Moth - August 30, 2007 10:04 PM (GMT)
Brilliant! I bet the difference will be noticeable to everyone. =D

orioni - September 1, 2007 03:21 PM (GMT)
Bringing up my post, because.

LorNightmare - September 1, 2007 03:30 PM (GMT)
yeh

sparta - September 1, 2007 03:32 PM (GMT)
QUOTE (orioni @ Aug 26 2007, 07:38 PM)
I ran another audit with the Pingdom Tools (test it here), and on average the mainpage needs 0.5 à 0.7 seconds to load, weighing about 121.8 KB. That's not bad, but it can always be improved.



What can be done?
As the test shows, there are certain images not being loaded from the website rocky.ifsz.net/rocky/Gradients. Those image requests aren't generating any results, but the browsers is still wasting time on them every single time a page is loaded. Since the images are being linked to from inside the CSS, the best thing to do would be removing those unused gradients from the stylesheet.

Furthermore, I've taken the liberty to run the CSS through a free online 'compacter' which is available at CleanCSS dot com. Here is what I got as a result after 'compacting' the stylesheet: "Input: 7.076KB, Output: 5.915KB, Compression Ratio: 16.4% (-1161 Bytes)". By simple changing the way some properties are written, the size was reduced by over 15%. And as a bonus, all properties were sorted alphabetically, to make life easier for any admin who would want to make changes in the future.

Besides tweaking the CSS, I would also highly recommend converting the forum logo from JPG to GIF. The current JPG is 34.06 KB, while converting it to GIF would create an image of only 50% the original size. An easy task in Photoshop, so I have already done that job for you: forum.gif, now at 16.62 KB.

Last but not least, hosting the resized forum logo at the forum itself would be the best solution to make the image more responsive; and it would also save some bandwidth. *winks at Admin*

How do I do that?
Hosting the header here on this forum is easy: save the GIF to your computer and upload it again. An administrator need only go the what I assume is some hidden mod forum and attach the GIF to a new post, preferably titled "IMG: Logo", so you can still later. Next, the URL of that attached image would be copied and used to replace the current logo. Go to Admin CP >> Skinning & Styles >> Images. The first box says "Logo", this is where you need to be. Paste the URL of the GIF as a replacement for the current JPG. Mark the selector, scroll down and click "Submit" to finish.

To improve the CSS, simply go to the Admin CP >> Skinning & Styles >> Manage Style Sheets. Cut and paste everything you see on that box into WordPad or some other small application. (Always have a backup!) Next, copy/paste the following code into the now empty textbox. Scroll down and hit "Edit CSS" to finish.

Once you've done all of this, you can go ahead and test if the forum loads a millisecond faster. You can also run another test at Pingdom and compare the results to my screenshot of above.

I hope this was helpful.

Regards,
Orioni

CODE
html{overflow-x:hidden;overflow-y:auto}

form{display:inline}
img{border:0;vertical-align:middle}
BODY{background-color:#fff;color:#000;font-family:Verdana, Tahoma, Arial, sans-serif;font-size:11px;margin:0 10px}
TABLE,TR,TD{color:#000;font-family:Verdana, Tahoma, Arial, sans-serif;font-size:10px}
a:link,a:visited,a:active{color:#000;text-decoration:underline}
a:hover{color:#125381;text-decoration:none}

fieldset.search{line-height:150%;padding:6px}
label{cursor:pointer}

img.attach{border:2px outset #EEF2F7;padding:2px}

.googleroot{line-height:130%;padding:6px}
.googlechild{line-height:130%;margin-left:30px;padding:6px}
.googleparent{color:#24164;line-height:130%;margin-left:30px;padding:6px}
.googlebottom,.googlebottom a:link,.googlebottom a:visited,.googlebottom a:active{color:#3A4F6C;font-size:11px}
.googlish,.googlish a:link,.googlish a:visited,.googlish a:active{color:#00D;font-size:14px;font-weight:700}
.googlepagelinks{font-size:1.1em;letter-spacing:1px}
.googlesmall,.googlesmall a:link,.googlesmall a:active,.googlesmall a:visited{color:#434951;font-size:10px}

li.helprow{margin:0 0 10px;padding:0}
ul#help{padding:0 0 0 15px}

option.cat{font-weight:700}
option.sub{color:#555;font-weight:700}
.caldate{color:#125381;font-size:10px;font-weight:700;margin:0;padding:4px;text-align:right}

.warngood{color:green}
.warnbad{color:red}

#padandcenter{margin-left:auto;margin-right:auto;padding:14px 0;text-align:center}

#profilename{font-size:28px;font-weight:700}
#calendarname{font-size:22px;font-weight:700}

#photowrap{padding:6px}
#phototitle{border-bottom:1px solid #000;font-size:24px}
#photoimg{margin-top:15px;text-align:center}

#ucpmenu{background-color:#F7F7F7;border:1px solid #E4E4E4;line-height:150%;width:22%}
#ucpmenu p{margin:0;padding:2px 5px 6px 9px}
#ucpcontent{background-color:#F7F7F7;border:1px solid #E4E4E4;line-height:150%;width:auto}
#ucpcontent p{margin:0;padding:10px}

#ipsbanner{position:absolute;right:5%;top:1px}
#logostrip{background-color:#fff;border:1px solid #fff;margin:0;padding:0}
#submenu{border:1px solid #fff;color:#125381;font-size:10px;font-weight:700;margin:3px 0}
#submenu a:link,#submenu a:visited,#submenu a:active{color:#125381;font-size:10px;font-weight:700;text-decoration:none}
#submenu A:hover{border-bottom:#125381 1px boxed;color:#125381}
#userlinks{border:1px solid #E4E4E4}

#navstrip{font-weight:700;padding:6px 0}

.activeuserstrip{padding:6px}

.pformstrip{color:#125381;font-weight:700;margin-top:1px;padding:7px}
.pformleft{background-color:#F7F7F7;border-right:1px solid #E4E4E4;border-top:1px solid #E4E4E4;margin-top:1px;padding:6px;width:25%}
.pformleftw{background-color:#F7F7F7;border-right:1px solid #E4E4E4;border-top:1px solid #E4E4E4;margin-top:1px;padding:6px;width:40%}
.pformright{background-color:#F7F7F7;border-top:1px solid #E4E4E4;margin-top:1px;padding:6px}

.post1,.post2{background-color:#fff}
.postlinksbar{background-color:#D1DCEB;font-size:10px;margin-top:1px;padding:7px}

.row1,.row2,.row3,.row4{background-color:#F7F7F7}

.darkrow1{background-color:#F7F7F7;color:#F7F7F7}
.darkrow2,.darkrow3{color:#3A4F6C}

.hlight{background-color:#DFE6EF}
.dlight{background-color:#EEF2F7}

.titlemedium{color:#125381;font-weight:700;margin:0;padding:7px}
.titlemedium a:link,.titlemedium a:visited,.titlemedium a:active{color:#125381;text-decoration:underline}

.maintitle{background-color:navy;color:#FFF;font-weight:700;letter-spacing:1px;padding:8px 0 8px 5px;vertical-align:middle}
.maintitle a:link,.maintitle a:visited,.maintitle a:active{color:#FFF;text-decoration:none}
.maintitle a:hover{text-decoration:underline}

.plainborder{background-color:#E4E4E4;border:1px solid #E4E4E4}
.tableborder{background-color:#E4E4E4;border:1px solid #E4E4E4;margin:0;padding:0;width:100%}
.tablefill{background-color:#F7F7F7;border:1px solid #E4E4E4;padding:6px}
.tablepad{background-color:#F7F7F7;padding:6px}
.tablebasic{border:0;margin:0;padding:0;width:100%}

.wrapmini{float:left;line-height:1.5em;width:25%}
.pagelinks{float:left;line-height:1.2em;width:35%}

.desc{color:#A6A5A5;font-size:10px}
.edit{font-size:9px}

.signature{color:#339;font-size:10px}
.postdetails{font-size:10px}
.postcolor{font-size:12px;line-height:160%}

.normalname{color:#003;font-size:12px;font-weight:700}
.normalname a:link,.normalname a:visited,.normalname a:active{font-size:12px}
.unreg{color:#900;font-size:11px;font-weight:700}

.searchlite{background-color:#FF0;color:red;font-weight:700}

#QUOTE{background-color:#F7F7F7;border:1px solid #E4E4E4;color:#000;font-family:Verdana, Arial;font-size:11px;padding:2px}
#CODE{background-color:#F7F7F7;border:1px solid #E4E4E4;color:#000;font-family:Courier, Courier New, Verdana, Arial;font-size:11px;padding:2px}

.copyright{font-family:Verdana, Tahoma, Arial, Sans-Serif;font-size:9px;line-height:12px}

.codebuttons{font-family:verdana, helvetica, sans-serif;font-size:10px;vertical-align:middle}
.forminput,.textinput,.radiobutton,.checkbox{font-family:verdana, helvetica, sans-serif;font-size:11px;vertical-align:middle}

.thin{border-bottom:1px solid #E4E4E4;border-top:1px solid #E4E4E4;line-height:140%;margin:2px 0;padding:6px 0}

.purple{color:purple;font-weight:700}
.red{color:red;font-weight:700}
.green{color:green;font-weight:700}
.blue{color:blue;font-weight:700}
.orange{color:#F90;font-weight:700}


Edit for early morning spelling.

i don't get it?




* Hosted for free by InvisionFree