Compression & browser caching

I have been using Google’s PageSpeed Insights to optimize my page weight. Many of the things it flags are obvious and easily fixed.

However, two seemingly important steps are outstanding and I would be interested to know how others have dealt with these issues. My remaining issues are:

  1. “Enable compression”: according to PageSpeed Insights my application_hype_generated_script.js should be compressed and thereby get an 82% reduction in size. I looked at it and it seems heavily minified - not sure of its potential for further compression. Is there a way to compress this file and still have it be read properly by the browser?

  2. “Leverage browser caching” - Apparently PageSpeed insights expects many of the static resources in my project to come with a expiry date or maximum age - is there a way to configure this from within Hype? or in the html file produced during project export?

Both these can be done through the .htacess file on your hosting server. If one doesn’t exist, you can create it by adding the code in a plain text document and saving it “.htacess”.

NOTE: a “dot” extension makes the file hidden, so please rename the file only after you’ve uploaded it into the correct folder on your server.

You can compress your .js file externally, but I recommend you let the htacess file do the work.

   <IfModule deflate_module>
    # Enable compression for the following file types.
    AddOutputFilterByType            \
     DEFLATE                         \
      application/javascript         \
      text/css                       \
      text/html                      \
      text/javascript                \
      text/plain                     \
      text/xml
</IfModule>

And this is for caching:

<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "access plus 1 month"
ExpiresByType image/jpeg "access plus 1 month"
ExpiresByType image/gif "access plus 1 month"
ExpiresByType image/png "access plus 1 month"
ExpiresByType text/css "access plus 1 week"
ExpiresByType text/html "access plus 1 week"
ExpiresByType application/pdf "access plus 1 week"
ExpiresByType text/x-javascript "access plus 1 week"
ExpiresByType application/x-shockwave-flash "access plus 1 year"
ExpiresByType image/x-icon "access plus 1 year"
ExpiresDefault "access plus 1 month"
</IfModule>

You can change the time period based on your requirements, and how often you update the website.
time periods range are as follows"seconds,minutes,days,weeks,months,years"

I hope this helps!
Good luck!

EDIT **Its “.htaccess” not “.htacess”. Sorry about that

1 Like

@wadhi - Thanks for this insight!

There is some valuable info in there for those who know how to use it. A few more specifics would come in handy for those who don’t.

I have a range of sites, each of which has a lot of Hype content. Loading times with Hype is a serious issue for me. As Hype does not (or does not yet) have the ability to combine content into a shared resource folder, this means that there is a slowdown caused by loading duplicate files (such as, for example, images that are used by multiple animations).

If I were to create a .htaccess file, would I be able to use this to speed up loading by preventing the duplication? If so, how would I do it? Thanks.

Theoretically you could use a rule that instead of returning the file does a 301 redirect to a canonical location.

In some cases you could use the inner html to have an <img> tag with a src that is a static location, but I know that’s not quite what you’re asking.

(I do think it is a valid feature request for Hype to help solve this problem).