Messages

Most of the files are in .png format anyways.  Also, I prefer these tools even though they convert to png, pngoptimizer does it automatically anways.... and it sends gif files to .apng format.

If WebP had a GUI for windows, then I would definitely be looking forward to that.  I have found some converters that do convert to webp format, albeit an earlier version of webp before google optimized it later on for better file size & quality.  If I could find a webp converter to the updated webp image format, I'd love to try that out.

I've been using PngOptimizer a bit lately and like pnggauntlet it optimizes png's to a lossless format while cleansing out bad/unneeded data.
http://psydk.org/PngOptimizer.php

Since this program doesn't handle jpg files, I use jstrip first, then convert them to png with pnggauntlet & finally use pngoptimizer on them.  I find pngoptimizer to be much faster than pnggauntlet.

I've grabbed roughly 25,527 files, mostly images from this site using softbytelabs blackwidow to test these tools on.

Right now the images are using a total of 8.37 GB (8,990,199,585 bytes).  I'll post back the results of optimizing them all with the above tools.

After clearing out some trash files (blackwidow made a bunch of copies of index pages) and running the tools on some files in the atlas folder, it's now at:
21,593 files
6.53 GB (7,021,207,557 bytes)

Even still I'm nowhere close to being finished yet especially with the super large maps in the PC folder... one is over 70 MB!

For images you can specify anywhere from one day up to one year, I only gzip the html pages.

Code Select Expand

# 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

[(expiration not specified)]

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.

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.

[free]

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

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..

Yep that would save space but they have to be unzipped (sure a zipped package can be emailed to the admin but it'll have to be unizpped first) for submission onto this site (for the actual "live" game pages, discounting the forums).

Nice work there with all of the level images but... "Optimizing the following images could reduce their size by 2.8MiB (54% reduction)."

Here... go ahead & grab em or use smushit or something on them.  http://gtmetrix.com/reports/www.vgmaps.com/Kpezs5JR

Just be sure to zip em up & burn them first   That or try to salvage the HDD into the new machine.

Also, there's about 15KB shaved from those imageshack images.

Click on the optimize images tab to grab em.

http://gtmetrix.com/reports/www.vgmaps.com/b7CRp6E5

Updated first post with Green Hill Zone Act 3.

I normally would be farther along on this project but my computer has been slowly dying over the last few weeks and increasingly frequent crashes from overheating are really driving my productivity into the ground. Hopefully I'll have a new machine by the end of the week so I can actually get more work done.

Ah moving it to mediafire helped ton's as well.  Instead of

1.5MB after running it through PNGGauntlet with full compression options!

It's only 75KB as a jpeg... although I do realize that the preferred image by the admin here is png.

The filesize limit for the forums is 1024KB. I uploaded it to my MediaFire account. No idea why Imgur converted it to a jpg. I didn't even notice it.

http://www.mediafire.com/i/?l60d1z4fhtqegka