Author Topic: Cloudflare for vgmaps?  (Read 29590 times)

0 Members and 1 Guest are viewing this topic.

Offline avalanch

  • Newbie
  • *
  • Posts: 25
Cloudflare for vgmaps?
« on: June 19, 2012, 10:20:04 am »
Cloudflare does offer a free cdn 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
Quote
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... here's cloudflare's article about godaddy..
« Last Edit: June 19, 2012, 10:28:03 am by avalanch »

Offline DarkWolf

  • Hero Member
  • *****
  • Posts: 640
Re: Cloudflare for vgmaps?
« Reply #1 on: June 19, 2012, 12:13:08 pm »
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.

Offline avalanch

  • Newbie
  • *
  • Posts: 25
Re: Cloudflare for vgmaps?
« Reply #2 on: June 19, 2012, 12:47:06 pm »
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
Quote
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.

« Last Edit: June 19, 2012, 01:37:04 pm by avalanch »

Offline DarkWolf

  • Hero Member
  • *****
  • Posts: 640
Re: Cloudflare for vgmaps?
« Reply #3 on: June 20, 2012, 03:23:01 pm »
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.

Offline avalanch

  • Newbie
  • *
  • Posts: 25
Re: Cloudflare for vgmaps?
« Reply #4 on: June 20, 2012, 04:12:00 pm »
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.
Quote
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..
Quote
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.
« Last Edit: June 20, 2012, 05:29:59 pm by avalanch »

Offline DarkWolf

  • Hero Member
  • *****
  • Posts: 640
Re: Cloudflare for vgmaps?
« Reply #5 on: June 20, 2012, 10:53:17 pm »
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.
« Last Edit: June 20, 2012, 10:56:15 pm by DarkWolf »

Offline avalanch

  • Newbie
  • *
  • Posts: 25
Re: Cloudflare for vgmaps?
« Reply #6 on: June 21, 2012, 07:51:42 am »
For images you can specify anywhere from one day up to one year, I only gzip the html pages.

Code: [Select]
# 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
« Last Edit: June 21, 2012, 07:54:52 am by avalanch »