Performance optimization, download sizes and load times

[bjorn.syse]

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: (PlayCanvas | HTML5 Game Engine)
   

   

2. one.com hosted. (SIMS cube)
   

   

What’s going on here? gzip compression?

Here are the headers from one.com request:

[bjorn.syse]

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

https://checkgzipcompression.com/?url=http%3A%2F%2Fwww.simsmining.eu%2Fplaycanvas

[will]

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

How to enable Gzip compression in Apache

[bjorn.syse]

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.

[bjorn.syse]

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

[bjorn.syse]

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

[will]

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

[bjorn.syse]

bumping this thread to troubleshoot a large performance difference of playcanvas apps while hosted on playcanvas/AWS vs. hosting them as static web apps over at azure.

see the size difference reported by chrome devtools on the top two glb-files.

Is this a gzip-enabling issue you reckon @will ? anyoneelse have any experience with this?

[LeXXik]

This is a server configuration issue, and depends from server to server. This is not something PlayCanvas can do for you or some setting in the project. You should probably google it, or ask AI by specifying your server stack and how to enable compression on static assets.

PS

If you have some questions regarding performance, or load times of assets from the engine perspective, feel free to create a new topic. I will close this old one.

[will]

Did you resolve this? As @LeXXik says, this is a server configuration issue. On playcanv.as, we have configured the server to serve GLB file with GZIP encoding. You need to set up the same for your Azure host.

[bjorn.syse]

Have not yet delved into that config over at Azure static web apps, but that sounds like it could be the issue yes!

[will]

I’m sure ChatGPT can guide you through enabling that very easily. Good luck!