VGMaps
Main Boards => VGMaps Social Board => Topic started by: avalanch on June 19, 2012, 10:20:04 am
-
Cloudflare does offer a free cdn (http://blog.cloudflare.com/cloudflares-free-cdn-and-you) and apparently it can serve as a cdn for png and other graphic files.
Seeing as how there are some huge images on this site, perhaps cloudflare can help a bit.
http://support.cloudflare.com/kb/top-frequently-asked-questions/which-kind-of-file-extensions-does-cloudflare-cache
Which kind of file extensions does CloudFlare cache?
CloudFlare caches the following types of static content:
css
js
jpg
jpeg
gif
ico
png
bmp
pict
csv
doc
pdf
pls
ppt
tif
tiff
eps
swf
midi
mid
ttf
eot
woff
svg
svgz
webp
Seeing as vgmaps is on godaddy hosting (http://www.networksolutions.com/whois-search/vgmaps.com)... here's cloudflare's article about godaddy (http://www.cloudflare.com/wiki/Go_Daddy_Registrar)..
-
A site redesign would probably increase speed (as well as usability) more than cloud sourcing the images. Right now you have to download large HTML pages just to get to a single game in the popular systems. Woe to those who need a game in the last part of the alphabet in the NES page. Cloudflare wouldn't help with that bottleneck as they don't cache text/html content types.
-
Thats not a problem if the custom htaccess file that I made for sites is used.
http://forums.digitalpoint.com/showthread.php?t=2501233
A site redesign would probably increase speed (as well as usability) more than cloud sourcing the images. Right now you have to download large HTML pages just to get to a single game in the popular systems. Woe to those who need a game in the last part of the alphabet in the NES page. Cloudflare wouldn't help with that bottleneck as they don't cache text/html content types.
In a nutshell, it just needs to be pasted into the .htaccess and covers gzip & caching for html pages & more. Forgot to mention, cloudflare I believe can auto minify html docs (strip away the excess un-necessary white space).
http://gtmetrix.com/reports/vgmaps.com/mU0yJxDp
Compressing the following resources with gzip could reduce their transfer size by 732.9KiB (91% reduction).
Also since there's so few html pages, one other thing that can be done is turn all those images on the nes page into a css sprite (combines multiple images into one image for way less requests.) I think the spriteme bookmarklet can cover this but I'll have to look into it & post back. Well apparently it can't because it says those images aren't "background images". The kind it works with.
-
The server is already set to use traditional browser/proxy caching using HTTP cache directives and the 304 response code for static files. HTTP compression would help, sure, and if GoDaddy allows Jon to configure that, he should do it for HTML, CSS and Javascript mime types.
I just don't think the load times are enough of an issue that Jon needs to go and change his name servers. That's no small thing. He'd be giving DNS control over to Cloudflare's machines. He would need to make sure he trusts Cloudflare enough to do that.
I'm still of the opinion that a site redesign would do more good than trying to do these optimizations. As I see it, the search engine crawling and navigation of the site are bigger obstacles than the loading time of the maps.
-
The caching that it's using and the 304's aren't really doing the job as you can see here.
http://gtmetrix.com/reports/vgmaps.com/D4vY2mYt
*webpage test agrees http://www.webpagetest.org/result/120620_WE_6958b4f4bf4da1606c58c372e843d79d/1/performance_optimization/#cache_static_content
Example from the report "https://www.vgmaps.com/System/Headers/NES.gif (expiration not specified)"
In otherwords, that will be re-downloaded instead of being cached on the users PC.
Godaddy does allow gzipping/caching, I do it myself at http://video-game-chat.com (without cloudflare enabled) http://gtmetrix.com/reports/video-game-chat.com/CTgjZWqc
Compare the Leverage browser caching & Enable gzip compression results between my site & his on those reports.
You're right about the gzipping from my htaccess helping for html css & javascript, just don't enable it for images.
The server is already set to use traditional browser/proxy caching using HTTP cache directives and the 304 response code for static files. HTTP compression would help, sure, and if GoDaddy allows Jon to configure that, he should do it for HTML, CSS and Javascript mime types.
Cloudflare doesn't have to be used at all, your right.
I just don't think the load times are enough of an issue that Jon needs to go and change his name servers. That's no small thing. He'd be giving DNS control over to Cloudflare's machines. He would need to make sure he trusts Cloudflare enough to do that.
I agree, and it's not all about "page loading time" but rather caching & saving resources & bandwith. That being said I wouldn't mind to see a redesign myself, perhaps game sorting with A-Z pages... a.html b.html c.html thru z..
I'm still of the opinion that a site redesign would do more good than trying to do these optimizations. As I see it, the search engine crawling and navigation of the site are bigger obstacles than the loading time of the maps.
-
Output from Live HTTP headers:
https://www.vgmaps.com/System/Headers/NES.gif
GET /System/Headers/NES.gif HTTP/1.1
Host: vgmaps.com
User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64; rv:13.0) Gecko/20100101 Firefox/13.0.1
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language: en-us,en;q=0.5
Accept-Encoding: gzip, deflate
Connection: keep-alive
Cookie: removed
If-Modified-Since: Mon, 22 Dec 2008 18:22:39 GMT
If-None-Match: "27ea6e6-5b-45ea6be72f565"
Cache-Control: max-age=0
HTTP/1.1 304 Not Modified
Date: Thu, 21 Jun 2012 04:41:52 GMT
Server: Apache
Connection: Keep-Alive
Keep-Alive: timeout=15, max=100
Etag: "27ea6e6-5b-45ea6be72f565"
----------------------------------------------------------
Yes, an HTTP request is still sent to the server, but only an HTTP header is sent in response, not the whole gif image. You can use other cache directives to tell a browser to hold onto a file for a period of time and not even bother checking to see if the file changes, but then if the file does change, the user won't see the new one until the cached file expires on his/her client. Which may or may not be desirable depending on the content. HTTP GET requests and 304 responses hardly take up any bandwidth. Yes, it is another connection that has to be opened, but with modern internet speeds and modern multi-core servers, it's a small overhead.
For the maps and title images, it probably wouldn't matter if they had an expiration of several hours, or even a day or two. But the HTML pages probably shouldn't carry an expiration.
-
For images you can specify anywhere from one day up to one year, I only gzip the html pages.
# Author: Final Kaoss (aka: Extreme-Gaming)
# Version 2.6
RewriteEngine on
#Deny attempts to view the Htaccess file.
<Files .htaccess>
Order allow,deny
Deny from all
</Files>
# BEGIN Browser Caching/Headers
<IfModule mod_mime.c>
AddType text/css .css
AddType text/richtext .rtf .rtx
AddType image/svg+xml .svg .svgz
AddType text/plain .txt
AddType text/xsd .xsd
AddType text/xsl .xsl
AddType video/asf .asf .asx .wax .wmv .wmx
AddType video/avi .avi
AddType image/bmp .bmp
AddType application/java .class
AddType video/divx .divx
AddType application/msword .doc .docx
AddType application/x-msdownload .exe
AddType image/gif .gif
AddType application/x-gzip .gz .gzip
AddType image/x-icon .ico
AddType image/jpeg .jpg .jpeg .jpe
AddType application/vnd.ms-access .mdb
AddType audio/midi .mid .midi
AddType video/quicktime .mov .qt
AddType audio/mpeg .mp3 .m4a
AddType video/mp4 .mp4 .m4v
AddType video/mpeg .mpeg .mpg .mpe
AddType application/vnd.ms-project .mpp
AddType application/vnd.oasis.opendocument.database .odb
AddType application/vnd.oasis.opendocument.chart .odc
AddType application/vnd.oasis.opendocument.formula .odf
AddType application/vnd.oasis.opendocument.graphics .odg
AddType application/vnd.oasis.opendocument.presentation .odp
AddType application/vnd.oasis.opendocument.spreadsheet .ods
AddType application/vnd.oasis.opendocument.text .odt
AddType audio/ogg .ogg
AddType application/pdf .pdf
AddType image/png .png
AddType application/vnd.ms-powerpoint .pot .pps .ppt .pptx
AddType audio/x-realaudio .ra .ram
AddType application/x-shockwave-flash .swf
AddType application/x-tar .tar
AddType image/tiff .tif .tiff
AddType audio/wav .wav
AddType audio/wma .wma
AddType application/vnd.ms-write .wri
AddType application/vnd.ms-excel .xla .xls .xlsx .xlt .xlw
AddType application/zip .zip
</IfModule>
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType text/css A2628000
ExpiresByType text/richtext A3600
ExpiresByType image/svg+xml A3600
ExpiresByType text/plain A3600
ExpiresByType text/xsd A3600
ExpiresByType text/xsl A3600
ExpiresByType video/asf A2628000
ExpiresByType video/avi A2628000
ExpiresByType image/bmp A2628000
ExpiresByType application/java A2628000
ExpiresByType video/divx A2628000
ExpiresByType application/msword A2628000
ExpiresByType application/x-msdownload A2628000
ExpiresByType image/gif A2628000
ExpiresByType application/x-gzip A2628000
ExpiresByType image/x-icon A2628000
ExpiresByType image/jpeg A2628000
ExpiresByType application/vnd.ms-access A2628000
ExpiresByType audio/midi A2628000
ExpiresByType video/quicktime A2628000
ExpiresByType audio/mpeg A2628000
ExpiresByType video/mp4 A2628000
ExpiresByType video/mpeg A2628000
ExpiresByType application/vnd.ms-project A2628000
ExpiresByType application/vnd.oasis.opendocument.database A2628000
ExpiresByType application/vnd.oasis.opendocument.chart A2628000
ExpiresByType application/vnd.oasis.opendocument.formula A2628000
ExpiresByType application/vnd.oasis.opendocument.graphics A2628000
ExpiresByType application/vnd.oasis.opendocument.presentation A2628000
ExpiresByType application/vnd.oasis.opendocument.spreadsheet A2628000
ExpiresByType application/vnd.oasis.opendocument.text A2628000
ExpiresByType audio/ogg A2628000
ExpiresByType application/pdf A2628000
ExpiresByType image/png A2628000
ExpiresByType application/vnd.ms-powerpoint A2628000
ExpiresByType audio/x-realaudio A2628000
ExpiresByType application/x-shockwave-flash A2628000
ExpiresByType application/x-tar A2628000
ExpiresByType image/tiff A2628000
ExpiresByType audio/wav A2628000
ExpiresByType audio/wma A2628000
ExpiresByType application/vnd.ms-write A2628000
ExpiresByType application/vnd.ms-excel A2628000
ExpiresByType application/zip A2628000
</IfModule>
<IfModule mod_deflate.c>
<IfModule mod_setenvif.c>
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
BrowserMatch \bMSI[E] !no-gzip !gzip-only-text/html
</IfModule>
<IfModule mod_headers.c>
Header append Vary User-Agent env=!dont-vary
</IfModule>
<IfModule mod_filter.c>
AddOutputFilterByType DEFLATE text/css application/x-javascript text/html text/richtext image/svg+xml text/plain text/xsd text/xsl text/xml image/x-icon
</IfModule>
</IfModule>
<FilesMatch "\.(css|CSS|)$">
<IfModule mod_headers.c>
Header set Pragma "public"
Header append Cache-Control "public, must-revalidate, proxy-revalidate"
</IfModule>
FileETag MTime Size
<IfModule mod_headers.c>
Header set X-Powered-By "Step by Step guide to speed up your VB4 (forum only)"
</IfModule>
</FilesMatch>
<FilesMatch "\.(rtf|rtx|svg|svgz|txt|xsd|xsl|RTF|RTX|SVG|SVGZ|TXT|XSD|XSL|)$">
<IfModule mod_headers.c>
Header set Pragma "public"
Header append Cache-Control "public, must-revalidate, proxy-revalidate"
</IfModule>
FileETag MTime Size
<IfModule mod_headers.c>
Header set X-Powered-By "Step by Step guide to speed up your VB4 (forum only)"
</IfModule>
</FilesMatch>
<FilesMatch "\.(asf|asx|wax|wmv|wmx|avi|bmp|class|divx|doc|docx|exe|gif|gz|gzip|ico|jpg|jpeg|jpe|mdb|mid|midi|mov|qt|mp3|m4a|mp4|m4v|mpeg|mpg|mpe|mpp|odb|odc|odf|odg|odp|ods|odt|ogg|pdf|png|pot|pps|ppt|pptx|ra|ram|swf|tar|tif|tiff|wav|wma|wri|xla|xls|xlsx|xlt|xlw|zip|ASF|ASX|WAX|WMV|WMX|AVI|BMP|CLASS|DIVX|DOC|DOCX|EXE|GIF|GZ|GZIP|ICO|JPG|JPEG|JPE|MDB|MID|MIDI|MOV|QT|MP3|M4A|MP4|M4V|MPEG|MPG|MPE|MPP|ODB|ODC|ODF|ODG|ODP|ODS|ODT|OGG|PDF|PNG|POT|PPS|PPT|PPTX|RA|RAM|SWF|TAR|TIF|TIFF|WAV|WMA|WRI|XLA|XLS|XLSX|XLT|XLW|ZIP)$">
<IfModule mod_headers.c>
Header set Pragma "public"
Header append Cache-Control "public, must-revalidate, proxy-revalidate"
</IfModule>
FileETag MTime Size
<IfModule mod_headers.c>
Header set X-Powered-By "Step by Step guide to speed up your VB4 (forum only)"
</IfModule>
</FilesMatch>
# End Browser Caching/Headers