The Arcive of Official vBulletin Modifications Site.It is not a VB3 engine, just a parsed copy! |
|
United-Forum CSS Sprites - ludicrous speed - NOW! Details »» | ||||||||||||||||||||||||||||||||||||||||||||||
United-Forum CSS Sprites - ludicrous speed - NOW!
Developer Last Online: Feb 2013
tl;dr Makes your forum faster.
Want an easy one-click installation for this addon? . Vote for this jira-entry Add on currently is in beta stage When visiting a website, speed is a very important factor not only for users but crawlers as well. Long loading times are a nuisance since your time is basically wasted during the waiting period. Hence, we are trying everything we can in order to speed up our site. One great way to improve loading times is by the use of css sprites. Unfortunately these are not implemented by vBulletin. We therefore decided to develop our own css-sprite add on for vBulletin boards and want to share this code with the worldwide vBulletin community. Live demo The add on is permanently running in our vBulletin board ( > 2.000.000 posts), take a look:vBulletin performance using css sprites Our tests are based on version 0.7.0. We used the analytic tools firebug network utility and the googlelabs.com page speed sitecss sprites - what are they? The intention behind css sprites is the bundling of many small graphics into one large graphic in order to decrease the number of required http requests. This shortens the loading times of the given website. In addition, the the accumulated size of all small graphics is higher than the size of the sprite due to reasons of compression.What is the gain in using css sprites? Aside from the technical implementation, the question on how much one actually does gain by using css sprites is of the most interest. Obviously they decrease loading times - but how important are small loading times and what is the impact on vBulletin overall loading times?Add on features In the current released beta version 0.7.2, sprites are available for FORUMHOME and FORUMDISPLAY. Coming up next SHOWTHREAD.Installation First of all, if you didnt want to change the templates manually, install the Template Modification System (TMS). Now proceed with the installation:
Download Now
Screenshots
Supporters / CoAuthors Show Your Support
|
17 благодарности(ей) от: | ||
archet1337, baktabul, doctorsexy, Fuhrmann, Gnoll, iask, Juggernaut, Kolbi, mathforum, misericorde, neil00027, rodriiverduguez, Skaut, smsma.net, SWSUSA, xorex, yilmaz |
Comments |
#42
|
|||
|
|||
No, I never did set expires, I'm using this in my htaccess. If you want to compare the load times on my site, select the df2 skin at the bottom left.
Code:
# Author: Matty Asia
# Version 1.6
# Downloaded from: http://www.vbulletin.com/forum/showthread.php?325798
RewriteEngine On
RewriteCond %{HTTP_USER_AGENT} "Mozilla/4\.76 \[en\] \(Windows NT 5\.0; U\)"
RewriteRule .* - [F,L]
Options +FollowSymLinks
### THIS IS A LITTLE EXTRA SECURITY AND CAN BE REMOVED
#RewriteRule ^includes/(.*) index.php
#RewriteRule ^vb/(.*) index.php
#RewriteRule ^packages/(.*) index.php
### THIS IS THE ACTUAL REWRITE
RewriteRule ^threads/([0-9]+)(?:/?$|(?:-[^/]+))(?:/?$|(?:/page([0-9]+)?)) showthread.php?t=$1&page=$2&%{QUERY_STRING}
RewriteRule ^members/([0-9]+) member.php?u=$1&%{QUERY_STRING}
RewriteRule ^forums/([0-9]+)(?:/?$|(?:-[^/]+))(?:/?$|(?:/page([0-9]+)?)) forumdisplay.php?f=$1&page=$2&%{QUERY_STRING}
RewriteRule ^blogs/([0-9]+)(?:/?$|(?:-[^/]+))(?:/?$|(?:/page([0-9]+)?)) blog.php?u=$1&page=$2&%{QUERY_STRING}
RewriteRule ^entries/([0-9]+)(?:/?$|(?:-[^/]+))(?:/?$|(?:/page([0-9]+)?)) entry.php?b=$1&page=$2&%{QUERY_STRING}
RewriteRule ^list/([^/]*/)([0-9]+) list.php?r=$1$2&%{QUERY_STRING}
RewriteRule ^content/(.*) content.php?r=$1&%{QUERY_STRING}
RewriteRule ^widget/config/([0-9]+) widget.php?r=config/$1&%{QUERY_STRING}
RewriteRule ^((urllist|sitemap).*\.(xml|txt)(\.gz)?)$ vbseo_sitemap/vbseo_getsitemap.php?sitemap=$1 [L]
RewriteCond %{REQUEST_FILENAME} -s [OR]
RewriteCond %{REQUEST_FILENAME} -l [OR]
RewriteCond %{REQUEST_FILENAME} -d
RewriteRule ^.*$ - [NC,L]
RewriteRule ^$ $1.php?r=$2 [QSA]
####Gzip
<IfModule mod_rewrite.c>
RewriteCond %{REQUEST_FILENAME} -f
RewriteRule ^(.*)(js|css|php)$ redir.php?file=$1$2&type=$2 [L]
</IfModule>
## Rewrites
RewriteEngine on
Options +FollowSymlinks
RewriteCond %{REQUEST_FILENAME} -s [OR]
RewriteCond %{REQUEST_FILENAME} -l [OR]
RewriteCond %{REQUEST_FILENAME} -d
RewriteRule ^.*$ - [NC,L]
# Forum
RewriteRule ^threads/.* showthread.php [QSA]
RewriteRule ^forums/.* forumdisplay.php [QSA]
RewriteRule ^members/.* member.php [QSA]
RewriteRule ^blogs/.* blog.php [QSA]
ReWriteRule ^entries/.* entry.php [QSA]
RewriteCond %{REQUEST_FILENAME} -s [OR]
RewriteCond %{REQUEST_FILENAME} -l [OR]
RewriteCond %{REQUEST_FILENAME} -d
RewriteRule ^.*$ - [NC,L]
# MVC
RewriteRule ^(?:(.*?)(?:/|$))(.*|$)$ $1.php?r=$2 [QSA]
ErrorDocument 404 /404.php
ErrorDocument 403 /404.php
ErrorDocument 500 /404.php
# Cache static content for 1 MONTH
<FilesMatch "\.(ico|pdf|flv|jpg|jpeg|png|gif|swf|mp3|mp4|css|js|txt|xml)$">
Header set Cache-Control "max-age=2592000, public, must-revalidate"
</FilesMatch>
# Remove ETag headers
Header unset Pragma
FileETag None
Header unset ETag
# compress text, html, javascript, css, xml:
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript
Quote:
http://www.webpagetest.org/result/110718_F8_12XTQ/ Page Speed 1.9 Score: 80/100 Load time 3.018 seconds on second load Requests 8 KB's 35 F A A B B With it installed. http://www.webpagetest.org/result/110718_5T_12XVE/ Page Speed 1.9 Score: 80/100 Load time 2.935 seconds on second load Requests 8 KB's 64 F A A B C So I wind up losing a grade and on the forum refresh, it's noticeable that the images reload on the test skin |
#43
|
|||
|
|||
I didnt unterstand the Grading behind webpagetest.org, but as you can see, you gained alot of Performance using this addon.
Without addon
With addon
So the performance is better in any aspect using this addon. Your Load Time dropped significant 1.5 seconds on the first view. As far as i can see, your grading only dropped cause on the second test (with addon) there is an additional Code:
http://pagead2.googlesyndication.com/pagead/images/ad_choices_en.png |
#44
|
|||
|
|||
Quote:
|
#45
|
|||
|
|||
If someone of you are using CDNs, please update to the latest version (0.6.2)
|
#46
|
|||
|
|||
with this installed. This get's reported
Code:
The following images served from vgchat.info should be combined into as few images as possible using CSS sprites.
/images/buttons/collapse_40b.png
/images/buttons/search.png
/images/misc/arrow.png
/images/misc/blog/top-highlight.png
/images/misc/forum_stats.png
/images/misc/navbit-home.png
/images/misc/tab-collapsed.png
Code:
The following images served from vgchat.info should be combined into as few images as possible using CSS sprites.
/images/buttons/collapse_40b.png
/images/buttons/lastpost-right.png
/images/buttons/search.png
/images/buttons/sortarrow-asc.png
/images/misc/arrow.png
/images/misc/black_downward_arrow.png
/images/misc/navbit-arrow-right.png
/images/misc/navbit-home.png
/images/misc/tag.png
/images/site_icons/forum.png
/images/site_icons/homepage.png
/images/site_icons/profile.png
/images/statusicon/thread-16-right.png
/images/statusicon/thread_dot-16-right.png
/images/statusicon/thread_hot-16.png
/images/statusicon/thread_hot-30.png
/images/statusicon/thread_hot_new-16.png
/images/statusicon/thread_lock-16.png
/images/statusicon/thread_new-16.png
/images/statusicon/thread_old-30.png
|
#47
|
|||
|
|||
I've a big problem. My attachments aren's visible anymore (error 404)
Can you help me? |
#48
|
|||
|
|||
Hello extreme-gaming,
i have currently added icons from FORUMHOME to the sprite, but yes the next step will be adding icons from SHOWFORUM. ----------------------------------
This image is replaced in the last version. I see, that you are using some additional stats, so these add this image antoher time. Please replace Code:
<img alt="Spam-O-Matic Statistics" src="images/misc/forum_stats.png" title="Spam-O-Matic Statistics"> Code:
<span class="sprite_misc_forum_stats" title="Spam-O-Matic Statistics" ></span> Do this also for "Visitors found this page by searching for:" and "Video Game Chat - Vbulletin Statistics" ----------------------------------
These images will be supportet in the next bigger addon with a lot of icons from SHOWFORUM (0.7.0 or maybe earlier). ----------------------------------
These images could be replaced within this addon, but not in the near future, since i have to modify an vBulletin-Javascript what will increase my workload to support this addon a lot with every vBulletin Update just to save 2 images. ----------------------------------
These images will never be replaced within this addon, since it is used by many other addons and as long as you didnt change everything to using sprites it will need a second Javascript-file just to manipulate the className-attribute instead of the scr-attribute. vBulletin has to do this. ----------------------------------
I am not sure whether or not i will add this icon, since it looks like an gradient and i am not sure whether or not i will create an second sprite for gradients. I would advise using CSS3 for gradients (just like digital point did with his addon for gradients): https://vborg.vbsupport.ru/showthread.php?t=263393 Best regards Sebastian |
#49
|
|||
|
|||
Hello giorgino,
i haven't added anything in connection to the attachment-system in this addon, so i didnt belive, that this problem has to do anything with it. as far as i can see, you are using nginx and vbseo rewrite for attachments? an am i correct, that you problem is, that attachment-urls like http://www.propit.it/attachments/f66...-.4.09-005.jpg resolve into an 404 error? since our forum use nginx and vbseo too, i think i can help you anyway. vbseo will rewirte the url of yout attachments to something like "attachments/f66/372d1280162113-firma-nostro-libro-ospiti-stlegdv14-1-1-.4.09-005.jpg". in our nginx configuration, nginx deliver jpeg directly and doesnt check each time if they exists, so it could use vbseo if it didnt exists. since we didnt wanted to change this behavior of nginx we drop the rewrite of attachments with vbseo. hope this could help you. Best regards Sebastian |
#50
|
|||
|
|||
Another quick word on gradients.
I'm not so sure whether we should implement them at all. Those gradients are mostly used for background manipulation and in the styles i made for our board i used those gradients in many places. Places they weren't used in the default vb version and i removed them in a lot of backgrounds where vbulletin has them. I personally think it will be impossible for us to create the addon in a way that we will automatically find all the places where you have used this one particular gradient - and will end up in serving the background some times via sprite and some times via icon. But you can add those gradients in the sprite yourself. Since 0.6.0 we have added the posibility to add custom icons into the sprite via the plugin-hook sprite_add_icon. Be aware that this option is meant for experienced users and will probably stay that way for a long time. That aside, if you are using a modded style it gives the style designer the opportunity to offer a plugin to our addon, which includes all his additional graphics. |
#51
|
|||
|
|||
i receive the following on vb4.1.4 when clicking refresh
Call to undefined function imagecreatetruecolor() in /home/makaveli/public_html/admincp/sprite.php on line 653 any ideas? |
|
|
X vBulletin 3.8.12 by vBS Debug Information | |
---|---|
|
|
More Information | |
Template Usage:
Phrase Groups Available:
|
Included Files:
Hooks Called:
|