How i boost my Google Pagespeed to 90+ (SEO)

Last week i finished my new Website and it perfomed not very well on Google Page Speed Insights. Here i want to tell you how i optimized my content and what was the biggest performance boost.

  1. Optimized and minify Content … First of all of you go to Google Page Speed Insights and run the Website check with your URL. You maybe get a score between 70 and 80. Lets improve this score in some steps … To get your images and css files optimized the easiest way is to download your optimized HTML, CSS, JS and Pictures on the Google Page speed site (Underneath your Report). No big deal.

2. Webfonts… The next step is a big one — I’m sure some of you use a Webfont like i did. In my case Source sans Pro from Googlefonts. No matter which font you use — Download the Font and Upload your font on your own server and included it via CSS like this:

@font-face {font-family: ‘Source Sans Pro’;font-style: normal;font-weight: 300;src: local(‘Source Sans Pro’), local(‘SourceSansPro-Light’),url(http://www.yourdomain/SourceSansPro-Light.otf.woff) format(‘woff’);}

3. Use Browser Caching! Your browser loads your website content every time you open the site. You can save loading time if you set expires in your htaccess.
Open your .htaccess file (or create a new one with any text editor).
Paste these few lines into the file.

<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg “access 1 year”
ExpiresByType image/jpeg “access 1 year”
ExpiresByType image/gif “access 1 year”
ExpiresByType image/png “access 1 year”
ExpiresByType text/css “access 1 month”
ExpiresByType text/html “access 1 month”
ExpiresByType application/pdf “access 1 month”
ExpiresByType text/x-javascript “access 1 month”
ExpiresByType text/css “access plus 1 year”
ExpiresByType application/x-shockwave-flash “access 1 month”
ExpiresByType image/x-icon “access 1 year”
ExpiresDefault “access 1 month”
</IfModule>

4. above the fold… This problem really killed my time but i finally found a solution which is quite handy. The thing is that your browser renders everything but when we open the website we only need the content rendered which is visible. Sounds logical. So … you have to detect which part of your css is needed to render the first visible content. You can also google “detect critical path”. There are some generators which create the css for you but in my case these generators didn’t work well. So i grabbed my css for the first section (which is visible first) and pasted the css inline into the <head></head> of my HTML code using the <style> Tag. The rest of the stylesheed will be loaded later with javascript.

First add a data-prefix to your linked css stylesheet — in my case it looks like this:

<link class=”mediaquerydependent” data-href=style_mobile.min.css rel=stylesheet type=”text/css” data-media=”screen and (max-width:800px)”>

at the end of your site you add this little piece of javascript which removes the data attribute from the linked css stylesheet in the head section and loads the rest of your css after the site is loaded:

<script>(function(){ var queries = document. querySelectorAll(‘.mediaquerydependent’), all = queries.length, cur = null, attr = null; while (all — ) { cur = queries[all]; if (cur.dataset.media && window.matchMedia(cur.dataset.media).matches) { for (attr in cur.dataset) { if (attr !== ‘media’) { cur.setAttribute(attr, cur.dataset[attr]); } } } }
}());
</script>

5. Activate Web Server Compression (gzip) — this one i have to explain. I don’t use gzip compression because sometimes a well coded script is faster than a compressed File. If you have a small site (no big e-commerce system) you can leave this point and focus on the first 4 points. If you want to use it you can enable server compression like this in your .htdocs file:

<ifModule mod_gzip.c>
mod_gzip_on Yes
mod_gzip_dechunk Yes
mod_gzip_item_include file .(html?|txt|css|js|php|pl)$
mod_gzip_item_include handler ^cgi-script$
mod_gzip_item_include mime ^text/.*
mod_gzip_item_include mime ^application/x-javascript.*
mod_gzip_item_exclude mime ^image/.*
mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
</ifModule>

on Apache Webservers you can use this instead in your .htaccess file

AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript

Well thats it — if you do all this steps you should get a proper Page Speed like 90+.

Also don’t forget the mobile site score — it’s quite the same here but Google also detects the size of your fonts and buttons. You should style them mobile -friendly otherwise you don’t get the 100% Score in User Experience.

Hope i helped some of you dealing with the same Problems like me.

EAT SLOW — THINK QUICK

Benjamin Lindner
(
www.multimedia-artworks.de)