It doesn't matter how amazing your SEO is, google ranks pages via its algorithm, which takes page insight score to its account as well.

So I had a time bringing my website to 100/100 on Google Page test. So I thought of sharing easy ways to do that for everyone. These might work on frameworks such as wordpress, Drupal and etc. But definitely will work on custom designed sites.

Optimize Images

First thing first let's finish off with image optimization. Go to Page Speed Insight. Enter your Website and you will see the results and below Passed Rules, Google will offer you with optimized images, js and css. (Thanks Google). Upload them accordingly and link them as well.

images

Although I'm pretty sure that's not gonna influence much, unless the images were higher resolution and png.

Minify JavaScript, Minify CSS

This is simple as image optimization, once you uploaded the files to the folders, make sure you link them on website's head.

Avoid landing page redirects

This is an avoidable scenario, but you might be able to access your .htaccess file on apache.

100

These codes will have to be placed right below RewriteEngine On, So anyway I'll include that too.

#Include only if you dont have another RewriteEngine On Line
RewriteEngine on 

#If you have and SSL certificate include the below to redirect to -> https://
RewriteCond %{HTTPS} off
RewriteRule (.*) https://%{HTTP_HOST}%{REQUEST_URI} [R,L]

#This is to not include www. infront of your domain!
RewriteCond %{HTTP_HOST} ^www\.azeemullah\.com [NC]
RewriteRule ^(.*)$ https://azeemullah.com/$1 [L,R=301]

If you are an nginx fella, here are some tools to convert apache codes for nginx ->.

Winginx
Anilcetin

You can apply only the needed for your website and avoid redirecting via plugins.

Enable compression

Gzip allows your files to be compressed and sent to the browser. There are 2 ways you can do this, using Gzip or Deflate.

gzip

Gzip is quite zimple if you have access to .htaccess file. Please avoid plugins to eliminate this problem.

<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>

if that didn't work out, (esp. hostgator servers) use the below instead

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

NGINX , apply the below to your config file ->

gzip on;
gzip_comp_level 2;
gzip_http_version 1.0;
gzip_proxied any;
gzip_min_length 1100;
gzip_buffers 16 8k;
gzip_types text/plain text/html text/css application/x-javascript text/xml application/xml application/xml+rss text/javascript;

# Disable for IE < 6 because there are some known problems
gzip_disable "MSIE [1-6].(?!.*SV1)";

# Add a vary header for downstream proxies to avoid sending cached gzipped files to IE6
gzip_vary on;

and you are good to go! if you wanna check whether it worked, visit gzip compression tool..

Browser caching

Browser caching stores webpage resource files on a local computer when a user visits a webpage.

lbc

I can give you a simple all in all code to be used on .htaccess file ->

## EXPIRES CACHING ##
<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 application/x-shockwave-flash "access 1 month"
ExpiresByType image/x-icon "access 1 year"
ExpiresDefault "access 1 month"
</IfModule>
## EXPIRES CACHING ##

If you want the files to be cached for a month you would simply replace "1 year" with "1 month", and vice versa. COOL???

Eliminate render-blocking JavaScript and CSS in above-the-fold content

Simply put; this happens when js and/or css files load before your page loads and blocks it. OK, Let's get right to the main topic, which is worse of all the causing problems to load page faster.

render

Eliminate Render Blocking JavaScript

The internet may provide you with the methods of inlining, placing scripts at the bottom, using "defer" or using "async". All do not accomplish the goal of letting the page load first then loading JS and they certainly do not work universally and cross browser.

The only method I would suggest is to "Defer loading javascript"; hence its kinda tricky. So basically you might have to bring all of your js into one file (eg: "defer.js"), and you can call them as mentioned below! Otherwise you might have to call them one by one. I will write another blog and link it here to show how to do that.

<script type="text/javascript">
function downloadJSAtOnload() {
var element = document.createElement("script");
element.src = "defer.js";
document.body.appendChild(element);
}
if (window.addEventListener)
window.addEventListener("load", downloadJSAtOnload, false);
else if (window.attachEvent)
window.attachEvent("onload", downloadJSAtOnload);
else window.onload = downloadJSAtOnload;
</script>

This code says wait for the entire document to load, then load the external file "defer.js".

  1. Copy above code.
  2. Paste code in your HTML just before the tag (near the bottom of your HTML file).
  3. Change the "defer.js" to the name of your external JS file.
  4. Ensure the path to your file is correct. Example: if you just put "defer.js", then the file "defer.js" must be in the same folder as your HTML file.

and you are good to go...

Eliminate Render Blocking CSS

I couldn't find a solution anywhere to solve this issue properly. All the suggestions were either using media queries or pretty complicating. And to add on to that, there's this @import CSS; please don't be lazy and ever do that.

But thanks to someone's out-of-the-box thinking, there is an easier way to handle this. And that's more like what we did with JavaScript as well. Make sure you have brought all the css files to ONE CSS file, and minified it. Then easily use the below query to call it.

<script type="text/rocketscript">
    var cb = function() {
    var l = document.createElement('link'); l.rel = 'stylesheet';
    l.href = 'yourfile.css';
    var h = document.getElementsByTagName('head')[0]; h.parentNode.insertBefore(l, h);
    };
    var raf = requestAnimationFrame || mozRequestAnimationFrame ||
    webkitRequestAnimationFrame || msRequestAnimationFrame;
    if (raf) raf(cb);
    else window.addEventListener('load', cb);
</script> 
  1. Copy above code.
  2. Paste code in your HTML just before the tag (near the top of your tag).
  3. Change the "yourfile.css" to the name of your CSS file.
  4. Ensure the path to your file is correct. Example: if you just put "yourfile.css", then the file "yourfile.css" must be in the same folder as your HTML file.

And you are done with that too.

I'm pretty sure you are going to have a time with Wordpress or Drupal sites. Please wait for sometime, I will come up with an easier solution.

Enable keep-alive

Keep alive is a method to allow the same tcp connection for HTTP conversation instead of opening a new one with each new request.

alive

If you are using .htaccess

<ifModule mod_headers.c> 
Header set Connection keep-alive 
</ifModule>

and apache

#
# KeepAlive: Whether or not to allow persistent connections (more than
# one request per connection). Set to "Off" to deactivate.
#
KeepAlive On

#
# MaxKeepAliveRequests: The maximum number of requests to allow
# during a persistent connection. Set to 0 to allow an unlimited amount.
# We recommend you leave this number high, for maximum performance.
#
MaxKeepAliveRequests 100

#
# KeepAliveTimeout: Number of seconds to wait for the next request from the
# same client on the same connection.
#
KeepAliveTimeout 100

========================

Alright, whatever below this doesn't have any special codes so that you can avoid them. But yet I have mentioned where you can read about them and easily understand.

========================

Reduce Server Response Time

So server response relies on four things;

Trust me you can learn about these from following the below link than I explain them.
How to improve server response time

Avoid Bad Requests

This happens when your page requests an unwanted file or resource. To avoid this you have to clean up the page. There are few tools to identify the bad requests. Read more on below shared link.

Avoid bad requests

Prioritize visible content

Visible content is the portion of a webpage users see on their screen before they scroll. Sometimes referred to as "above the fold".

Yeah I did copy that above content from another page. And here you can read the rest ->
Prioritize visible content

And that's pretty much you might need to bring it to the 100%. But if you have more to work on you can always reach me via my email.

Ciao!!

References:
varvy
developers.google.com