Compression & browser caching

knowledgebase

(drewbullen) #1

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?


(Tanuj) #2

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


Video tutorial: Uploading your Tumult Hype document to a Web Server and Embedding Within Another HTML Page
(drewbullen) #3

@wadhi - Thanks for this insight!


(Trey Yancy) #4

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.


(Jonathan Deutsch) #5

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