Performance optimization, download sizes and load times


#1

Hi

We’re about to launch a playcanvas app and host it ourselves combined in a wordpress site. I’m in the process of optimizing performance. I’ve measured with the profiler but also with Chrome development tools on the networking tab. Brilliant tool indeed!

I got the app down to about 6 MB download for the client when on launch.playcanvas.com, however as soon as I launched it on my own service provider the size of individual assets bumbed a lot. Look at this particular json model for example:

  1. playcanvas hosted: (https://launch.playcanvas.com/643574)

  2. one.com hosted. (http://www.simsmining.eu/playcanvas/)

What’s going on here? gzip compression?

Here are the headers from one.com request:


#2

I’m checking with this site tool which seems to report gzip compression is enabled. Perhaps not for all content type headers?


#3

Yeah, you need to configure your web server to GZIP your files (ideally JSON and JS at the very least). e.g. for Apache:


#4

Great, thanks! I’m chatting to my shared host support now. He says I should be able to enable it using .htaccess files only. Trying to figure out the code to use now. I wonder if it’s enabled broadly on all content types or If I need/should have to specify specific ones.


#5

Darn, I can’t get this to work properly. I add the code listed in the link you provided (which is the same one.com support talked bout. However, when I add i to a the .htaccess file allready present (with some previous wordpress code in there) I get a 500 Internal server error

this is my .htaccess

<Directory /var/www/html/>
   <IfModule mod_mime.c>
	AddType application/x-javascript .js
	AddType application/json .json
    AddType text/css .css
   </IfModule>
   <IfModule mod_deflate.c>
	AddOutputFilterByType DEFLATE text/css application/x-javascript text/x-component text/html text/plain text/xml application/javascript application/json 
	<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
	</IfModule>
    </IfModule>
    Header append Vary User-Agent env=!dont-vary
</Directory>


# BEGIN WordPress
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>

# END WordPress


#6

In the end I removed that Directory-tag and now I don’t get the error anymore. However, I’m not sure I get the compression either. I’ve tried a couple of other setups for .htaccess I found across the web including this one below. However, while https://checkgzipcompression.com/?url=http%3A%2F%2Fwww.simsmining.eu%2F reports I do have Gzip compression (which I allready got before changing anything in .htaccess), the fact remains that the app is a lot larger when hosted on one.com than on playcanvas. That 7MB for the json model compared to 1.5MB difference is still there when measured with the network tab/chrome development tools. What am I missing?

#  WEB PERFORMANCE #

# | Compression

<IfModule mod_deflate.c>

    # Force compression for mangled `Accept-Encoding` request headers
    # https://developer.yahoo.com/blogs/ydn/pushing-beyond-gzipping-25601.html

    <IfModule mod_setenvif.c>
        <IfModule mod_headers.c>
            SetEnvIfNoCase ^(Accept-EncodXng|X-cept-Encoding|X{15}|~{15}|-{15})$ ^((gzip|deflate)\s*,?\s*)+|[X~-]{4,13}$ HAVE_Accept-Encoding
            RequestHeader append Accept-Encoding "gzip,deflate" env=HAVE_Accept-Encoding
        </IfModule>
    </IfModule>

    # - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

    # Compress all output labeled with one of the following media types.
    #
    # (!) For Apache versions below version 2.3.7 you don't need to
    # enable `mod_filter` and can remove the `<IfModule mod_filter.c>`
        # and `</IfModule>` lines as `AddOutputFilterByType` is still in
    # the core directives.
    #
    # https://httpd.apache.org/docs/current/mod/mod_filter.html#addoutputfilterbytype

    <IfModule mod_filter.c>
        AddOutputFilterByType DEFLATE "application/atom+xml" \
        "application/javascript" \
        "application/json" \
        "application/ld+json" \
        "application/manifest+json" \
        "application/rdf+xml" \
        "application/rss+xml" \
        "application/schema+json" \
        "application/vnd.geo+json" \
        "application/vnd.ms-fontobject" \
        "application/x-font-ttf" \
        "application/x-javascript" \
        "application/x-web-app-manifest+json" \
        "application/xhtml+xml" \
        "application/xml" \
        "font/eot" \
        "font/opentype" \
        "image/bmp" \
        "image/svg+xml" \
        "image/vnd.microsoft.icon" \
        "image/x-icon" \
        "text/cache-manifest" \
        "text/css" \
        "text/html" \
        "text/javascript" \
        "text/plain" \
        "text/vcard" \
        "text/vnd.rim.location.xloc" \
        "text/vtt" \
        "text/x-component" \
        "text/x-cross-domain-policy" \
        "text/xml"

    </IfModule>

    # - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

    # Map the following filename extensions to the specified
    # encoding type in order to make Apache serve the file types
    # with the appropriate `Content-Encoding` response header
    # (do note that this will NOT make Apache compress them!).
    #
    # If these files types would be served without an appropriate
    # `Content-Enable` response header, client applications (e.g.:
    # browsers) wouldn't know that they first need to uncompress
    # the response, and thus, wouldn't be able to understand the
    # content.
    #
    # https://httpd.apache.org/docs/current/mod/mod_mime.html#addencoding

    <IfModule mod_mime.c>
        AddEncoding gzip              svgz
    </IfModule>

</IfModule>
# BEGIN WordPress
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>

# END WordPress


#7

I wish I could give some good advice here - I just don’t have the practical experience configuring web servers. :confused: