Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

Development Tools Front End Web Optimization Workflow Optimization Best Practices Making JavaScript Faster

Brendan Whiting
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Brendan Whiting
Front End Web Development Techdegree Graduate 84,738 Points
Posted by Brendan Whiting
.a{fill-rule:evenodd;}techdegree seal-36
Brendan Whiting
Front End Web Development Techdegree Graduate 84,738 Points

I don't understand gzip

This video discusses gzip but I don't really understand what's going on. How can I make my code even smaller than the already minified and uglified code? How can you compress something without losing information? How do browser know how do deal with the gzipped file instead of the normal file?

1 Answer

Steven Parker
Steven Parker
231,184 Points
Steven Parker
Steven Parker
231,184 Points

gzip is one of many file compression tools available that convert text into binary codes to reduce storage space. The method used can be reversed to restore the original file with no data loss. These compacted formats are only for storage and direct file transmission. They are not used to serve files to browsers, and a browser generally can only download a compacted file to be handled by an external program.

Browser-compatible reduction methods like "minify" work very differently in three major ways. First, they make the file a bit smaller, but they are not nearly as efficient in size reduction as a program like gzip. And secondly, the minified file is intended to be used as-is, where the a file compacted with gzip must be "unpacked" by a reversing process before it can be used again. Finally, the minified file cannot be completely restored to the original source, but once the gzip process is reversed, the file is exactly as it started.

Brendan Whiting
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Brendan Whiting
Front End Web Development Techdegree Graduate 84,738 Points
Brendan Whiting
.a{fill-rule:evenodd;}techdegree seal-36
Brendan Whiting
Front End Web Development Techdegree Graduate 84,738 Points

It seems like we are serving the gzipped file to the browser. 5:17 in the video shows js and css files with an extra gz extension as assets in the network tab.

Steven Parker
Steven Parker
231,184 Points
Steven Parker
Steven Parker
231,184 Points

I notice that when the gzip compression was used, the instructor switched to a different local server. I can only assume that server internally converts the file format and serves the file to the browser uncompressed.

I tried using a workspace to serve a .gz file to my Chrome browser and the browser had no idea what to do with the compressed file. So as far as I can tell the gzip step only saves some storage space on the server and requires a special server app to handle. The transmission/loading times to the browser would not be improved.