vb.org Archive

vb.org Archive (https://vborg.vbsupport.ru/index.php)
-   vBulletin 4.x Add-ons (https://vborg.vbsupport.ru/forumdisplay.php?f=245)
-   -   Board Optimization - United-Forum CSS Sprites - ludicrous speed - NOW! (https://vborg.vbsupport.ru/showthread.php?t=266696)

final kaoss 07-18-2011 10:53 AM

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:

Originally Posted by Osbes (Post 2221819)
Hello extreme-gaming,

no problem, i putted up the template changes in codeboxes again :)

The extra > and < is to indicate what should be replaced by what, but i understand that it is a little unhandy, if you want to select-copy-replace multiple lines.

I am adding icons step by step. Thats why the Logo is currently not added.

It is weird, that you didnt noticed a significant drop in the requests, using the addon. Can you send me a link, so i can try your implementation in the test skin?


I think you set the expires entity-header and cache-control header in your htaccess for images, right? This should behave totally independent to my addon.

I just double checked this an its working correct on our forum.

My Browsers sends:
Code:

GET /images/sprites/sprite.png HTTP/1.1
If-Modified-Since: Sun, 17 Jul 2011 21:49:42 GMT

and gets as response
Code:

HTTP/1.1 304 Not Modified
and then he loads the file from the browser-cache.

So that this isnt working on your forum seems also a little bit weird. Please send me a link, so i can check this in your test skin and the corresponding .httacces file, so i can check your cache settings.

Best regards
Sebastian

Without it installed.

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

Osbes 07-18-2011 11:30 AM

I didnt unterstand the Grading behind webpagetest.org, but as you can see, you gained alot of Performance using this addon.

Without addon
  • First View
    Load Time: 5.161s
    Requests: 78
  • Repeat View
    Load Time: 2.405s
    Requests: 8


With addon
  • First View
    Load Time: 3.759s
    Requests: 59
  • Repeat View
    Load Time: 2.387s
    Requests: 8

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
,but this isnt coming from our addon. Maybe you gained additional google ad since the forum is faster, using adaptiv ad strategies? This would be a big bonus.

giorgino 07-18-2011 02:28 PM

Quote:

Originally Posted by Mooff (Post 2221857)
@giorgino

In the ACP go to
-> Forum Manager
-> search for the forum you want to edit
-> edit forum
-> scroll down to 'Style Options'
-> Prefix for Forum Status Images --> add your forum prefix there (you can have a different one for each forum - and you need to add the prefix in your subforums as well, if you want the special icons to show up there). For forums which should use the default icons - do nothing.

you then need icons which are named accordingly
So if your forum prefix is, let's say, 'sc2_'
you need the following additional icons
sc2_forum_new-48.png
sc2_forum_old-48.png
sc2_subforum_new-48.png
sc2_subforum_old-48.png

In your ../statusicons folder.

GREAT! Work perfect!!! :)

Osbes 07-18-2011 04:12 PM

If someone of you are using CDNs, please update to the latest version (0.6.2) :)

final kaoss 07-20-2011 04:26 PM

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

For showforum:

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

Add these to the next update?

giorgino 07-20-2011 04:34 PM

I've a big problem. My attachments aren's visible anymore (error 404) :(
Can you help me?

Osbes 07-20-2011 08:41 PM

Hello extreme-gaming,
i have currently added icons from FORUMHOME to the sprite, but yes the next step will be adding icons from SHOWFORUM.

----------------------------------
  • /images/misc/forum_stats.png

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">
with

Code:

<span class="sprite_misc_forum_stats" title="Spam-O-Matic Statistics" ></span>
but be aware that "Spam-O-Matic Statistics" could be an phrase, so look first in your template.

Do this also for "Visitors found this page by searching for:" and "Video Game Chat - Vbulletin Statistics"

----------------------------------
  • /images/buttons/search.png
  • /images/misc/arrow.png
  • /images/misc/navbit-home.png

These images will be supportet in the next bigger addon with a lot of icons from SHOWFORUM (0.7.0 or maybe earlier).

----------------------------------
  • /images/misc/tab-collapsed.png
  • /images/misc/tab-expanded.png

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.

----------------------------------
  • /images/buttons/collapse_40b.png
  • /images/buttons/collapse_40b_collapsed.png

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.

----------------------------------
  • /images/misc/blog/top-highlight.png

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

Osbes 07-20-2011 08:56 PM

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

Mooff 07-20-2011 11:25 PM

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.

Makaveli007 07-21-2011 06:57 PM

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?


All times are GMT. The time now is 02:33 PM.

Powered by vBulletin® Version 3.8.12 by vBS
Copyright ©2000 - 2025, vBulletin Solutions Inc.

X vBulletin 3.8.12 by vBS Debug Information
  • Page Generation 0.01251 seconds
  • Memory Usage 1,793KB
  • Queries Executed 10 (?)
More Information
Template Usage:
  • (1)ad_footer_end
  • (1)ad_footer_start
  • (1)ad_header_end
  • (1)ad_header_logo
  • (1)ad_navbar_below
  • (8)bbcode_code_printable
  • (2)bbcode_quote_printable
  • (1)footer
  • (1)gobutton
  • (1)header
  • (1)headinclude
  • (6)option
  • (1)pagenav
  • (1)pagenav_curpage
  • (4)pagenav_pagelink
  • (2)pagenav_pagelinkrel
  • (1)post_thanks_navbar_search
  • (1)printthread
  • (10)printthreadbit
  • (1)spacer_close
  • (1)spacer_open 

Phrase Groups Available:
  • global
  • postbit
  • showthread
Included Files:
  • ./printthread.php
  • ./global.php
  • ./includes/init.php
  • ./includes/class_core.php
  • ./includes/config.php
  • ./includes/functions.php
  • ./includes/class_hook.php
  • ./includes/modsystem_functions.php
  • ./includes/class_bbcode_alt.php
  • ./includes/class_bbcode.php
  • ./includes/functions_bigthree.php 

Hooks Called:
  • init_startup
  • init_startup_session_setup_start
  • init_startup_session_setup_complete
  • cache_permissions
  • fetch_threadinfo_query
  • fetch_threadinfo
  • fetch_foruminfo
  • style_fetch
  • cache_templates
  • global_start
  • parse_templates
  • global_setup_complete
  • printthread_start
  • pagenav_page
  • pagenav_complete
  • bbcode_fetch_tags
  • bbcode_create
  • bbcode_parse_start
  • bbcode_parse_complete_precache
  • bbcode_parse_complete
  • printthread_post
  • printthread_complete