Using Gzip on Your Site to Speed Up Performance

Using Gzip on Your Site to Speed Up Performance

Using Gzip on Your Site to Speed Up Performance

Site to Speed Up Performance

You shouldn't compromise on image quality, but what do you do when you have high-quality images that load too slowly for your visitors? Gzip is a compression application that reduces the size of your images stored on your server. Compressed files take less bandwidth and resources to render on your user's browser. Every major browser supports the format, so you don't need to worry that any of your users won't be able to see your images.

Why Compress Images?

Maybe you think your site is fast enough. Maybe you haven't had any complaints and don't think it's worth the effort. The face of the web is changing from desktops to mobile, and bandwidth for mobile hasn't caught up with the increasing tablet and smartphone technology. You also shouldn't forget desktops for some users who might live in rural areas with smaller bandwidth. These users can't download large files without waiting several minutes. You should consider that your images put a heavy burden on mobile devices and users with smaller bandwidth capabilities.

Take a look at the size of your images. High-quality JPEG images are at least a megabyte. When you have very professional photos, they can be several more megabytes. You add several of these on one page on your site, and your users will wait several seconds for the site to load.

Google even announced several years ago that it would use site speed as a ranking factor. The search company then announced that mobile usability would be a ranking factor for mobile queries. No matter how much you want to avoid mobile compatibility, you can't if you want to drive as many potential leads as possible to your site.

What Does Compression Do?

When your visitors request a web page, the server processes the request and sends the site code, images, and external files to the browser. The speed in which these assets transfer to a user's browser depends on the speed of the server, the bandwidth of your host, and the user's bandwidth. You can't control the bandwidth of the user, which is usually the bottleneck when it comes to site speed. Since bandwidth is even worse for mobile devices, you need a way to send high-quality images without forcing the user to wait too long.

When you use Gzip, the utility compresses the images into smaller files. When a user requests a page from your server, it sends the compressed version of the images. Sending compressed images takes less bandwidth and improves the speed in which your site renders in the browser.

Once the images arrive on your user's computer, the browser extracts the content and displays the high-quality image on the screen. The only real bottleneck as this point is the user's computer and its video card. The process is good for mobile, desktop, and any other device used to display your web page.

How to Set Up Gzip Compression

Gzip is easy to set up. As long as you have access to the .htaccess file, you can set up compression. The .htaccess file is located at the root of your website. Even shared hosting accounts have access to this file. Open the file and copy and paste the following code.

# compress text, html, javascript, css, xml:

AddOutputFilterByType DEFLATE text/plain

AddOutputFilterByType DEFLATE text/html

AddOutputFilterByType DEFLATE text/xml

AddOutputFilterByType DEFLATE text/css

AddOutputFilterByType DEFLATE image/jpeg

AddOutputFilterByType DEFLATE image/png

AddOutputFilterByType DEFLATE application/xml

AddOutputFilterByType DEFLATE application/xhtml+xml

AddOutputFilterByType DEFLATE application/rss+xml

AddOutputFilterByType DEFLATE application/javascript

AddOutputFilterByType DEFLATE application/x-javascript

In the above code, any files with the listed extensions are compressed on the server and then deflated in the user's browser. You can add any other file extensions you include in your web application. The above code includes CSS, JavaScript, HTML, XML and image files. All of these files are typically included in a web application.

Once you set up the .htaccess file, save it and upload it to your web host. You can use a speed test to test your new settings. Google has the Page Speed tool. You can also use GTMetric's Website Speed and Performance tool.

Using Gzip greatly improves your site speed, and your users should be happy with the changes. If you have a significant increase in performance, you can even see some improvements in your search engine rank.  

Blog Author

Hassan Bawab

Hassan Bawab is the CEO of Magic Logix, a Dallas, Texas based transformative marketing agency specializing in customized web development solutions and digital strategies. Mr. Bawab is a trusted resource in the industry and often spends his free time as a consultant for Top 1000 Fortune companies. He is the author of “How to Work with a Digital Marketing Agency” and has written numerous articles on automation technologies that have become industry dogmas. Key to Hassan Bawab’s success is his passion for digital innovation and his ability to incorporate trend-setting technology into the field of web development and integrated marketing.