How I boosted my Laravel project Page Speed with 3 code snippets

Below are three easy code snippets you can use to boost your Laravel project page speed…

Using the Google Page Speed test tool, my Laravel app was slow loading, potentially that could affect my indexing speed and ranking due to poor user experience…

So I did a bit of searching and found a great combination that boosted me in the high 90’s for pagespeed…

Pay close attention to step #3 as it is a two step process to make it work…

Enable GZip in .htaccess

Although they say that enabling GZip will increase CPU usage on your server, most of us are not pulling in thousands of requests per second to create a bottleneck using GZip…

So screw it, worry about that once you get the traffic right?

What you will want to do is add the following code in your .htaccess file:

<ifmodule mod_deflate.c>
SetOutputFilter DEFLATE
AddOutputFilterByType DEFLATE text/text text/html text/plain text/xml text/css application/x-javascript application/javascript
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch \bMSIE !no-gzip !gzip-only-text/html

Enable Browser Caching in .htaccess

This seems like a no brainer, but in the end, I didn’t really think about it either…

Again we are adding code to the .htaccess file that will cache files like css and javascript in the users browser to reduce or iliminate the need to make requests to the server and download files that are the same across several views in your Laravel application…

Here is the code to add to your .htaccess file ( source StackOverflow )

########## Begin - ETag Optimization
## This rule will create an ETag for files based only on the modification
## timestamp and their size.
## Note: It may cause problems on your server and you may need to remove it
## Note: See comments above about why you might want to set the following to FileETag none
#FileETag MTime Size
FileETag none
# AddOutputFilterByType is now deprecated by Apache. Use mod_filter in the future.
AddOutputFilterByType DEFLATE text/plain text/html text/xml text/css application/xml application/xhtml+xml application/rss+xml application/javascript application/x-javascript
# Enable expiration control
ExpiresActive On
# Default expiration: 1 hour after request
ExpiresDefault "now plus 1 hour"
# CSS and JS expiration: 1 week after request
ExpiresByType text/css "now plus 1 week"
ExpiresByType application/javascript "now plus 1 week"
ExpiresByType application/x-javascript "now plus 1 week"

# Image files expiration: 1 month after request
ExpiresByType image/bmp "now plus 1 month"
ExpiresByType image/gif "now plus 1 month"
ExpiresByType image/jpeg "now plus 1 month"
ExpiresByType image/jp2 "now plus 1 month"
ExpiresByType image/pipeg "now plus 1 month"
ExpiresByType image/png "now plus 1 month"
ExpiresByType image/svg+xml "now plus 1 month"
ExpiresByType image/tiff "now plus 1 month"
ExpiresByType image/ "now plus 1 month"
ExpiresByType image/x-icon "now plus 1 month"
ExpiresByType image/ico "now plus 1 month"
ExpiresByType image/icon "now plus 1 month"
ExpiresByType text/ico "now plus 1 month"
ExpiresByType application/ico "now plus 1 month"
ExpiresByType image/vnd.wap.wbmp "now plus 1 month"
ExpiresByType application/vnd.wap.wbxml "now plus 1 month"

ExpiresByType application/smil "now plus 1 month"
# Audio files expiration: 1 month after request
ExpiresByType audio/basic "now plus 1 month"
ExpiresByType audio/mid "now plus 1 month"
ExpiresByType audio/midi "now plus 1 month"
ExpiresByType audio/mpeg "now plus 1 month"
ExpiresByType audio/x-aiff "now plus 1 month"
ExpiresByType audio/x-mpegurl "now plus 1 month"
ExpiresByType audio/x-pn-realaudio "now plus 1 month"
ExpiresByType audio/x-wav "now plus 1 month"

# Movie files expiration: 1 month after request
ExpiresByType application/x-shockwave-flash "now plus 1 month"
ExpiresByType x-world/x-vrml "now plus 1 month"
ExpiresByType video/x-msvideo "now plus 1 month"
ExpiresByType video/mpeg "now plus 1 month"
ExpiresByType video/mp4 "now plus 1 month"
ExpiresByType video/quicktime "now plus 1 month"
ExpiresByType video/x-la-asf "now plus 1 month"
ExpiresByType video/x-ms-asf "now plus 1 month"

Lazy Loading CSS

Pay attention to the instruction below as this requires a two step process due to browser compatibility…

When loading CSS, it is considered a render blocking act, meaning the page cannot render until the CSS files download…

First Part:

Here is the work around, find your CSS link tag in your header and modify to look like this…

<link href="/path/to/your/css/file" rel="preload" onload="this.rel='stylesheet'" as="style">
<noscript><link rel="stylesheet" href="/path/to/your/css/file"></noscript>

Second Part:

The second part requires a bit of javascript in order to trigger the rendering of the CSS that was lazy loaded for non-compliant browsers…

You can cut and paste this code just under the CSS link tag in the header or in the footer…

Note: There will be a second before your CSS loads and your page looks a bit wonky, this should only happen the very first time a user loads your site, every page load after will pull from cached files and be faster.

Here is the javascript to cut and paste ( source gitHub )


/*! loadCSS. [c]2017 Filament Group, Inc. MIT License */
!function(a){"use strict";var b=function(b,c,d){function e(a){return h.body?a():void setTimeout(function(){e(a)})}function f(){i.addEventListener&&i.removeEventListener("load",f),||"all"}var g,h=a.document,i=h.createElement("link");if(c)g=c;else{var j=(h.body||h.getElementsByTagName("head")[0]).childNodes;g=j[j.length-1]}var k=h.styleSheets;i.rel="stylesheet",i.href=b,"only x",e(function(){g.parentNode.insertBefore(i,c?g:g.nextSibling)});var l=function(a){for(var b=i.href,c=k.length;c--;)if(k[c].href===b)return a();setTimeout(function(){l(a)})};return i.addEventListener&&i.addEventListener("load",f),i.onloadcssdefined=l,l(f),i};"undefined"!=typeof exports?exports.loadCSS=b:a.loadCSS=b}("undefined"!=typeof global?global:this);

 /*! loadCSS rel=preload polyfill. [c]2017 Filament Group, Inc. MIT License */
 !function(a){if(a.loadCSS){var b=loadCSS.relpreload={};if({try{return a.document.createElement("link").relList.supports("preload")}catch(b){return!1}},b.poly=function(){for(var b=a.document.getElementsByTagName("link"),c=0;c<b.length;c++){var d=b[c];"preload"===d.rel&&"style"===d.getAttribute("as")&&(a.loadCSS(d.href,d,d.getAttribute("media")),d.rel=null)}},!{b.poly();var c=a.setInterval(b.poly,300);a.addEventListener&&a.addEventListener("load",function(){b.poly(),a.clearInterval(c)}),a.attachEvent&&a.attachEvent("onload",function(){a.clearInterval(c)})}}}(this);


Post Your Results

Test the code out in your Laravel project and post your results below or a link to your blog post results below in the comments, would be cool to see how much your Laravel project page speed increased.


what do you think?