How To Enable Compression on Laravel Forge


Download PDF

Share


This article is part of a mini series where we explain how we brought leaderapps.xyz from being slow to having a 90+ score in Pagespeed.

If your using Laravel Forge and trying to optimize your website performance you’ve probably received the ‘Enable Compression’ warning from Google Pagespeed.

how-to-enable-compression-laravel-forge.png

For the exact code in our tutorial we just reused the HTML5 Boiler Plate Nginx Config as they had already found a good configuration.

To prove that this actually works, we are continuing with the optimization of leaderapps.xyz so you can see first hand How To Enable Compression on Laravel Forge.

Testing your site performance?

Try PageSpeed Plus. Like PageSpeed, but better

Contents

Measure Initial Page Speed

Our first step is to measure the current Pagespeed score by running the site through Google’s online tool. Our domain leaderapps.xyz scores a lowly 60 on mobile and one of the things that Google suggests we should do is Enable Compression.

enable-compression-pagespeed-score.png

Enable compression on Laravel Forge Explained

The only action required is make a simple edit in the nginx.conf file for your domain.

Go to sites > your site

select-site.png

Scroll to the bottom and go to Edit Files > Edit Nginx Configuration

edit-nginx-config.png

Inside the server block paste the following snippet:

    #GZIP
    # Enable gzip compression.
    gzip on;

    # Compression level (1-9).
    # 5 is a perfect compromise between size and CPU usage, offering about
    # 75% reduction for most ASCII files (almost identical to level 9).
    gzip_comp_level    5;

    # Don't compress anything that's already small and unlikely to shrink much
    # if at all (the default is 20 bytes, which is bad as that usually leads to
    # larger files after gzipping).
    gzip_min_length    256;

    # Compress data even for clients that are connecting to us via proxies,
    # identified by the "Via" header (required for CloudFront).
    gzip_proxied       any;

    # Tell proxies to cache both the gzipped and regular version of a resource
    # whenever the client's Accept-Encoding capabilities header varies;
    # Avoids the issue where a non-gzip capable client (which is extremely rare
    # today) would display gibberish if their proxy gave them the gzipped version.
    gzip_vary          on;

    # Compress all output labeled with one of the following MIME-types.
    gzip_types
      application/atom+xml
      application/javascript
      application/json
      application/ld+json
      application/manifest+json
      application/rss+xml
      application/vnd.geo+json
      application/vnd.ms-fontobject
      application/x-font-ttf
      application/x-web-app-manifest+json
      application/xhtml+xml
      application/xml
      font/opentype
      image/bmp
      image/svg+xml
      image/x-icon
      text/cache-manifest
      text/css
      text/plain
      text/vcard
      text/vnd.rim.location.xloc
      text/vtt
      text/x-component
      text/x-cross-domain-policy;
    # text/html is always compressed by gzip module

Here's a screenshot of our Forge Nginx config afterwards:

forge-config-screenshot.png

Click Save

Restarting

We have to restart Nginx so the config change is propagated. At the top of the page locate the dropdown for:

Servers > Your Server

Go to the bottom of the page and click:

Restart > Restart Nginx.

Quick Tip - For an even quicker boost, pass your web traffic through CloudFlare and see what it does.

Finished

Done! That’s everything needed to successfully Enable Compression of the static assets on your website. Refresh the front end to see if everything is good and make sure you haven’t left a syntax error in the config file.

PageSpeed Problems? Let us solve them. Talk to the pro's and speed up your site.

Contact

Test If Compression Is Enabled

For absolute certainty you should check if GZP Compression is enabled by running your site through Varvy’s useful GZIP Compression Test.

enable-compression-varvy-test-result.png

Measure The Improvement

Pagespeed caches results for 30 seconds so after that test your site again to see what difference it made to the score.

enable-caching-pagespeed-results.png

As you can see we jumped a massive 18 Pagespeed points to 78. This change alone takes our desktop ranking above 80 and into the green zone.

In comparison, just think of all the hours your spent trying to optimize images and improve CSS delivery for a minimal gains. With this change we have bypassed so much hard work and got ourselves a fast site.

How It Works

This code snippet will instruct Nginx to use gzip to compress files it serves on the fly. This means a smaller amount of data is transferred when a user requests a webpage from your server meaning it can get there quicker. When it arrives at the browser, the data is decompressed with no loss of quality and the code is rendered to display your site.

Why Is This Good

Adding this code to your Nginx config will instantly accelerate your website and reduce the load time for users on all devices. More importantly, it shows that you pay attention to the technical quality of your domain meaning Google will view it in a more positive light. The difference this makes to your ranking is impossible to predict but if you're meeting another one of Googles directives it will only bring benefits as opposed to not doing it.

If you want to see proof check out our article, why Does PageSpeed Matter

Conclusion

In this post you learned How To Enable Compression With Laravel Forge by adding a section to your Nginx config. This will boost your site speed and may elevate your position in the SERPs. To follow our story on boosting the pagespeed score of leaderapps.xyz join our newsletter and keep an eye on our blog for weekly updates.

Bonus Content

Enter your email to download our Web Performance Checklist. It contains proven techniques for creating blazing fast sites with high PageSpeed scores.

Posted in Web Performance on Apr 05, 2017

Comments


Empty

Leave a Comment: