- Joined
- Sep 15, 2009
- Messages
- 3,478
- Reaction score
- 1,189
Keeping up with the changes to Google's search algorithm can have a significant impact on the ranking of your website. It is true that content is king, but you must also tell Google which part of that content is the best in order to rank high for it (as many of us already know, also .com is king 
- though I did rank an exact low competition .info to #2 with these methods :approve.
I stumbled across PageSpeed; another small ranking factor out of the 200+ that they have, and did everything from compressing images, minifying CSS, HTML and JavaScript as well as all the little nitpicking that they did to run my own tests.
My initial speed was on average 73 for desktop. After doing this all of these suggestions below, I got up to 86. I still had one more suggested fix to do and that was to inline above the fold CSS and render the rest in the footer of the document. Although this method doesn't pass W3 validator, it did the magic. It brought my test website from 86 to 95- there is nothing else that I can do because Google suggests me minifying THEIR AdSense code.
Even though I inlined the important CSS, I still havenât cross-referenced it with my CSS file and remove the duplicate entries as I havenât found a method to do that yet (still playing around with a couple of *nix commands and if that doesn't work, Iâll do it manually by unminifying). Hopefully, removing the duplicates will reduce the overall page size by a couple bytes and I achieve one additional point.
Below is the method of how I did it in Chrome:
First you press CTRL+SHIFT+I and you come up with a bar at the bottom of the screen, quite possibly showing you the elements and HTML of the page. Click the âSourcesâ tab from above. I donât know of a shortcut key for showing the navigator, so if it doesn't come up automatically, click the little âplayâ button under the tabs to the left. This will show all the sources that a website uses. Click on âSnippetsâ in that window, right click the white space and click âNewâ. Name it âanything-you-want.jsâ and paste the below code that I got off of Github into the box:
Next step is to press CTRL+ENTER. Out will come the above the fold CSS. I did this on DNForum's index (PageSpeed Mobile: 46, Desktop: 58) as I saw it was suggested by Google here, the results I got are minified below:
Inlining this in the header and putting the rest of the CSS in the footer explained by this Google PageSpeed FAQ would eliminate this error and bring the PageSpeed score up.
That is the most pesky one to solve (and if anyone here has a suggestion of removing duplicate CSS, please tell).
Here are some additional tips for those running Apache that will drastically improve your PageSpeed. Add them to the bottom of your .htaccess file.
Leverage browser caching:
It would also behoove you to get a caching plugin if you're running WordPress to serve up static pages (unsure if the code above or similar code is added to your .htaccess with them).
Enable compression:
Optimize Images - Long and tedious task unless you are running a WordPress blog which this plugin will do for you in bulk. It's in beta and wouldn't run it if you had more than 20 images on shared hosting. If you happen to have a VPS or dedicated server, changing the maximum execution time for PHP would allow you to run it until it's complete. I prefer running a script from the command prompt in the background than this method though. I haven't tried executing the bulk script in the background, so I don't know if it would work (any takers?). Additionally, this may not solve the problem. Some images will not pass. For these, it's best to export them in Photoshop/GIMP with a higher compression ratio that looks good and seeing if they pass. If they don't pass the second time around, running it through Smush should do the final trick.
All-in-One Minifier - If you use this one, I would make a backup of your old HTML, CSS and JavaScript and run each code at a time, updating it and checking if it still functions correctly.
Minify CSS - I like this tool to minify CSS as it allows you advanced options of minifying, which still pass Google's rule. I have chosen the smallest and non-readable option for my sites.
As you fix all these issues, the server response time will reduce (0.83 seconds on DNF), increasing the overall PageSpeed figure too.
I'm not 100% done with everything as I've stripped my sites and made them Chrome-ready only (since they have more than half the market share), so I'd like to see your before/after results for PageSpeed and rankings or additional tips that I haven't posted. I'm in the process of supporting other browsers, but don't really see a point as Google is becoming the unseen monopoly for both products and organic traffic (a little from Bing, but most from Google).
It would be great if cPanel/WHM caught up with the times and made mod_pagespeed an RPM that you can install. Unfortunately, with the latest update there is no surefire way of installing this without it being signed. Having mod_pagespeed would save us all time as it does all of this for us.
By updating all these (probably along with adding content and time), I went from a 7.4 to 5.3 average ranking for the keywords that I'm targeting in 2 weeks.
Thanks,
David
Edit: If any of these tips helped you achieve even 1 more point in PageSpeed, smack that dog gon like button!
- though I did rank an exact low competition .info to #2 with these methods :approve.I stumbled across PageSpeed; another small ranking factor out of the 200+ that they have, and did everything from compressing images, minifying CSS, HTML and JavaScript as well as all the little nitpicking that they did to run my own tests.
My initial speed was on average 73 for desktop. After doing this all of these suggestions below, I got up to 86. I still had one more suggested fix to do and that was to inline above the fold CSS and render the rest in the footer of the document. Although this method doesn't pass W3 validator, it did the magic. It brought my test website from 86 to 95- there is nothing else that I can do because Google suggests me minifying THEIR AdSense code.
Even though I inlined the important CSS, I still havenât cross-referenced it with my CSS file and remove the duplicate entries as I havenât found a method to do that yet (still playing around with a couple of *nix commands and if that doesn't work, Iâll do it manually by unminifying). Hopefully, removing the duplicates will reduce the overall page size by a couple bytes and I achieve one additional point.
Below is the method of how I did it in Chrome:
First you press CTRL+SHIFT+I and you come up with a bar at the bottom of the screen, quite possibly showing you the elements and HTML of the page. Click the âSourcesâ tab from above. I donât know of a shortcut key for showing the navigator, so if it doesn't come up automatically, click the little âplayâ button under the tabs to the left. This will show all the sources that a website uses. Click on âSnippetsâ in that window, right click the white space and click âNewâ. Name it âanything-you-want.jsâ and paste the below code that I got off of Github into the box:
Code:
(function() {
var CSSCriticalPath = function(w, d, opts) {
var opt = opts || {};
var css = {};
var pushCSS = function(r) {
if(!!css[r.selectorText] === false) css[r.selectorText] = {};
var styles = r.style.cssText.split(/;(?![A-Za-z0-9])/);
for(var i = 0; i < styles.length; i++) {
if(!!styles[i] === false) continue;
var pair = styles[i].split(": ");
pair[0] = pair[0].trim();
pair[1] = pair[1].trim();
css[r.selectorText][pair[0]] = pair[1];
}
};
var parseTree = function() {
// Get a list of all the elements in the view.
var height = w.innerHeight;
var walker = d.createTreeWalker(d, NodeFilter.SHOW_ELEMENT, function(node) { return NodeFilter.FILTER_ACCEPT; }, true);
while(walker.nextNode()) {
var node = walker.currentNode;
var rect = node.getBoundingClientRect();
if(rect.top < height || opt.scanFullPage) {
var rules = w.getMatchedCSSRules(node);
if(!!rules) {
for(var r = 0; r < rules.length; r++) {
pushCSS(rules[r]);
}
}
}
}
};
this.generateCSS = function() {
var finalCSS = "";
for(var k in css) {
finalCSS += k + " { ";
for(var j in css[k]) {
finalCSS += j + ": " + css[k][j] + "; ";
}
finalCSS += "}\n";
}
return finalCSS;
};
parseTree();
};
var cp = new CSSCriticalPath(window, document);
var css = cp.generateCSS();
console.log(css);
})();Next step is to press CTRL+ENTER. Out will come the above the fold CSS. I did this on DNForum's index (PageSpeed Mobile: 46, Desktop: 58) as I saw it was suggested by Google here, the results I got are minified below:
Code:
html{color:#000;background-color:#e0e2e7;background-position:0 0;background-repeat:repeat no-repeat;background-image:url(http://www.dnforum.com/images/dnforum/header/bg.png)}blockquote,body,button,code,dd,div,dl,dt,fieldset,form,h1,h2,h3,h4,h5,h6,input,legend,li,ol,p,pre,td,textarea,th,ul{margin:0;padding:0}body{font-style:normal;font-variant:normal;font-weight:400;font-size:13px;line-height:1.23;width:auto;min-width:650px;margin:0;color:#3e3e3e}body,legend{font-family:Verdana,Tahoma,Calibri,Arial,Geneva,sans-serif}#footer,#header,#subhead{min-width:1160px}#header{background-image:url(http://www.dnforum.com/images/dnforum/header/header.png);background-color:#1a253c;height:138px;position:relative;background-position:0 50%;background-repeat:repeat no-repeat}#header .right{background-image:url(http://www.dnforum.com/images/dnforum/header/header-right.png);right:0;background-position:100% 0;background-repeat:no-repeat no-repeat}.container{margin:0 55px;min-width:1050px}body a{color:#32488f;text-decoration:none}fieldset,img{border:0}#subhead{height:105px;margin-top:-20px;margin-bottom:14px}#subhead .container{background-image:url(http://www.dnforum.com/images/dnforum/header/nav.png);position:relative;z-index:2;background-position:50% 0;background-repeat:no-repeat no-repeat}#subhead .left,#subhead .right{display:block;height:113px;width:307px;position:absolute;top:0}#subhead .left{background-image:url(http://www.dnforum.com/images/dnforum/header/nav-left.png);left:-30px;background-position:0 0;background-repeat:no-repeat no-repeat}#subhead .right{background-image:url(http://www.dnforum.com/images/dnforum/header/nav-right.png);right:-30px;background-position:100% 0;background-repeat:no-repeat no-repeat}#subhead .right2{background-image:url(http://www.dnforum.com/images/dnforum/header/nav-right-2.png);background-position:100% 0;background-repeat:no-repeat no-repeat}#nav{height:66px}#nav ul{float:left;margin-left:17px;margin-top:13px;position:relative}li{list-style:none}#nav li{background-image:url(http://www.dnforum.com/images/dnforum/header/navlink.gif);float:left;height:53px;margin-right:4px;padding-right:10px;background-position:100% 20px;background-repeat:no-repeat no-repeat}#nav a{color:#fff;display:block;float:left;font-style:normal;font-variant:normal;font-weight:400;font-size:16px;line-height:41px;font-family:Arial;height:53px;text-shadow:#08090b 1px 1px 0}#nav a span{display:block;float:left;height:41px;padding:0 15px;border-top-left-radius:7px;border-top-right-radius:7px;border-bottom-right-radius:7px;border-bottom-left-radius:7px}#nav li.last{background-image:none;background-position:initial initial;background-repeat:initial initial}#dn-search{background-image:url(http://www.dnforum.com/images/dnforum/header/search.gif);float:right;height:39px;margin:9px 9px 0 0;padding:8px 0 0 11px;position:relative;width:280px;background-position:50% 50%;background-repeat:no-repeat no-repeat}#dn-search .input{background-image:url(http://www.dnforum.com/images/dnforum/header/searchinput.gif);background-color:#fff;display:block;float:left;height:31px;padding-left:28px;width:203px;background-position:0 0;background-repeat:no-repeat no-repeat}button,input,optgroup,option,select,textarea{font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit}button,input,select,textarea{font-style:normal;font-variant:normal;font-weight:400;font-size:99%;line-height:normal;font-family:Tahoma,Calibri,Verdana,Geneva,sans-serif}#dn-search .input input{background-image:none;border:0;color:#303030;font-style:normal;font-variant:normal;font-weight:400;font-size:12px;line-height:normal;font-family:Arial;padding:9px 9px 0;width:172px;background-position:initial initial;background-repeat:initial initial}#dn-search .go{background-image:url(http://www.dnforum.com/images/dnforum/header/searchgo.gif);border:0;cursor:pointer;float:left;height:25px;margin:3px 0 0 5px;text-indent:-9999px;text-transform:uppercase;width:36px;background-position:50% 50%;background-repeat:no-repeat no-repeat}#subhead .head-lower{background-image:url(http://www.dnforum.com/images/dnforum/header/subnav.png);background-color:#b0b5c1;height:39px;background-position:0 0;background-repeat:repeat no-repeat}#subnav{float:left;padding:11px 0 0 25px;position:relative}#subnav .navItem{background-image:url(http://www.dnforum.com/images/dnforum/header/bullet2.gif);display:inline;margin-right:10px;padding-right:20px;background-position:100% 50%;background-repeat:no-repeat no-repeat}#subnav .navLink{color:#000;font-size:11px}.popupmenu{position:relative}.popupmenu a.popupctrl{background-image:url(http://www.dnforum.com/images/dnforum/misc/black_downward_arrow.png);padding-right:15px;background-position:100% 50%;background-repeat:no-repeat no-repeat}.popupbody{font-style:normal;font-variant:normal;font-weight:400;font-size:11px;line-height:normal;font-family:Tahoma,Calibri,Verdana,Geneva,sans-serif;color:#3e3e3e;padding:2px;background-image:none;background-color:#e1e1e1;border:1px solid #e1e1e1;position:absolute;z-index:1000;top:1.5em;left:0;display:none;min-width:200px;background-position:initial initial;background-repeat:initial initial}.popupbody li{border-top-style:solid;border-top-width:1px;border-top-color:#e1e1e1}.popupbody>li:first-child{border-top-style:none}.popupbody li a,.popupbody li label{display:block;color:#3e3e3e;background-image:none;background-color:#fff;padding:6.235px 10px;text-decoration:none;text-align:left;white-space:nowrap;background-position:initial initial;background-repeat:initial initial}#subnav .navItem:last-child{background-image:none;background-position:initial initial;background-repeat:initial initial}#login{float:right;position:relative}#userLinks{padding:11px 25px 0 0}#login .userItem{display:inline;margin-left:12px}#login .userLink{color:#000;font-size:11px}.notifications{font-size:11px;color:#fff;border-bottom-left-radius:5px;border-bottom-right-radius:5px}.notifications a{text-decoration:none}.notifications a.popupctrl:link,.notifications a.popupctrl:visited,.toplinks a:link,.toplinks a:visited{color:#fff;text-decoration:none}address,caption,cite,code,dfn,em,optgroup,strong,th,var{font-style:inherit;font-weight:inherit}.notifications .popupbody{color:#000;background-image:none;background-color:#fff;background-position:initial initial;background-repeat:initial initial}#lower{background-color:#fff;-webkit-box-shadow:#b6c2d8 0 0 20px;box-shadow:#b6c2d8 0 0 20px;border-top-left-radius:4px;border-top-right-radius:4px;border-bottom-right-radius:4px;border-bottom-left-radius:4px;background-position:initial initial;background-repeat:initial initial}#lower .content-inner{padding:18px}#foursixeight{height:60px}#foursixeight .ad{float:left;width:50%}#foursixeight .inner{margin:0 auto;width:468px}.breadcrumb{margin-top:10px}.floatcontainer,.formcontrols .blockrow,dl.stats{display:block;font-weight:400}.breadcrumb .navbithome{float:left;padding:3.5px 0}.breadcrumb .navbit{float:left;background-image:url(http://www.dnforum.com/images/dnforum/misc/navbit-arrow-right.png);padding-right:10px;padding-left:3px;background-position:100% 50%;background-repeat:no-repeat no-repeat;padding-top:4px}.breadcrumb .lastnavbit>span,.breadcrumb .navbit>a{display:block;padding:2px 4px;float:left;background-color:transparent;border:1px solid transparent;border-top-left-radius:5px;border-top-right-radius:5px;border-bottom-right-radius:5px;border-bottom-left-radius:5px}.breadcrumb .navbit a{text-decoration:none}.breadcrumb .navbit.lastnavbit{background-color:transparent;background-position:initial initial;background-repeat:initial initial}.breadcrumb .navbit.lastnavbit span{float:left;background-color:transparent;padding-right:10px;padding-left:3px;background-position:initial initial;background-repeat:initial initial}.breadcrumb hr{display:none}.popupbody li.formsubmit{text-align:right;padding:0;background-image:none;background-color:#e1e1e1;background-position:initial initial;background-repeat:initial initial}.pagination li.jumptopage{text-align:center}.popupbody li.formsubmit.jumptopage>label{display:inline;background-image:none;background-position:initial initial;background-repeat:initial initial}.button{padding:2px;font-weight:700;font-style:normal;font-variant:normal;font-size:11px;line-height:normal;font-family:Tahoma,Calibri,Verdana,Geneva,sans-serif;border:1px solid #e0e2e7;color:#424242;background-image:none;background-color:#f6f8fd;border-top-left-radius:0;border-top-right-radius:0;border-bottom-right-radius:0;border-bottom-left-radius:0;background-position:0 0;background-repeat:repeat no-repeat}.popupbody li.formsubmit input[type=button],.popupbody li.formsubmit input[type=reset],.popupbody li.formsubmit input[type=submit]{font-style:normal;font-variant:normal;font-weight:400;font-size:12px;line-height:normal;font-family:Tahoma,Calibri,Verdana,Geneva,sans-serif;padding:2px 2px 1px}.hidden{display:none!important}.pagination dt.label{display:none}.pagination span{display:block;float:left;clear:right}.pagination .elipsis,.pagination .separator{background-image:none;border:0;background-position:initial initial;background-repeat:initial initial}#footer div,#footer li{position:relative;z-index:101}Inlining this in the header and putting the rest of the CSS in the footer explained by this Google PageSpeed FAQ would eliminate this error and bring the PageSpeed score up.
That is the most pesky one to solve (and if anyone here has a suggestion of removing duplicate CSS, please tell).
Here are some additional tips for those running Apache that will drastically improve your PageSpeed. Add them to the bottom of your .htaccess file.
Leverage browser caching:
Code:
<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>It would also behoove you to get a caching plugin if you're running WordPress to serve up static pages (unsure if the code above or similar code is added to your .htaccess with them).
Enable compression:
Code:
SetOutputFilter DEFLATE
AddOutputFilterByType DEFLATE text/html text/css text/plain text/xml application/x-javascript application/x-httpd-php
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
BrowserMatch \bMSI[E] !no-gzip !gzip-only-text/html
SetEnvIfNoCase Request_URI \.(?:gif|jpe?g|png)$ no-gzip
Header append Vary User-Agent env=!dont-varyOptimize Images - Long and tedious task unless you are running a WordPress blog which this plugin will do for you in bulk. It's in beta and wouldn't run it if you had more than 20 images on shared hosting. If you happen to have a VPS or dedicated server, changing the maximum execution time for PHP would allow you to run it until it's complete. I prefer running a script from the command prompt in the background than this method though. I haven't tried executing the bulk script in the background, so I don't know if it would work (any takers?). Additionally, this may not solve the problem. Some images will not pass. For these, it's best to export them in Photoshop/GIMP with a higher compression ratio that looks good and seeing if they pass. If they don't pass the second time around, running it through Smush should do the final trick.
All-in-One Minifier - If you use this one, I would make a backup of your old HTML, CSS and JavaScript and run each code at a time, updating it and checking if it still functions correctly.
Minify CSS - I like this tool to minify CSS as it allows you advanced options of minifying, which still pass Google's rule. I have chosen the smallest and non-readable option for my sites.
As you fix all these issues, the server response time will reduce (0.83 seconds on DNF), increasing the overall PageSpeed figure too.
I'm not 100% done with everything as I've stripped my sites and made them Chrome-ready only (since they have more than half the market share), so I'd like to see your before/after results for PageSpeed and rankings or additional tips that I haven't posted. I'm in the process of supporting other browsers, but don't really see a point as Google is becoming the unseen monopoly for both products and organic traffic (a little from Bing, but most from Google).
It would be great if cPanel/WHM caught up with the times and made mod_pagespeed an RPM that you can install. Unfortunately, with the latest update there is no surefire way of installing this without it being signed. Having mod_pagespeed would save us all time as it does all of this for us.
By updating all these (probably along with adding content and time), I went from a 7.4 to 5.3 average ranking for the keywords that I'm targeting in 2 weeks.
Thanks,
David
Edit: If any of these tips helped you achieve even 1 more point in PageSpeed, smack that dog gon like button!
Last edited:
