Google PageSpeed for Noobs and the clueless Part 1

When I first encounter Google PageSpeed, and tested it out I felt like such  Noob. If you’re one of those folks who’ve heard of this thing called Webmaster tools and you’ve been afraid to commit figuring it’s too complex, you’re not alone! But we’ll see what we can do to help soften the learning curve a bit.

I’ve read many articles on Google Page Speed now, but none have addressed the issues that face those of us that were raised on Web Editors and Web Templates. This article is for anyone who:

  • has built their website using a web template in Dreamweaver, Expression Web, FrontPage or SharePoint Designer
  • relies upon the Design Window of Dreamweaver or Expression web to edit their content
  • finds the information provided by Google’s Page Speed web page to be a bit over their head
  • want’s some help with improving their page speed ranking

So what is Google PageSpeed?

It’s one of Google many tools or metrics that may help to determine the over all placement of your web pages in Google’s search rankings when compared to the other pages displayed for the same search terms .. also known as your competition.

I said “may help to determine” as the only people who really know the exact formula’s are currently working for google and probably buried under a pile of non disclosure agreements, so they’ll never tell. Everything you read in this article will be my opinion.  And my opinion is google changes or updates their algorithm on a regular basis and one of the latest “tools” they have released is PageSpeed Insights.

Insights is a tool that determines how fast your web pages load. And gives suggestions on how you can improve the load time.

Why is this important?

How fast your pages load may have an impact on how well you rank in the search results. There are many factors that go into how google determines where your web pages will rank for a given search query.  If you are relying upon google for search results, as in this is your business and you need good rankings you’ll probably want to hire a reputable SEO firm to help out as Insights is just a tool to help with one of the ‘thousand’ ( according to google ) of ranking factors in their search algorithms. How important a factor is unknown to me, and no one at google is willing to share.

NOTE: Page Speed is not the ONLY factor that affects your search rankings. If you’re in a situation where your search results are falling and you’re looking for every advantage you can find,  hiring a good SEO firm can be very VERY expensive. Some things to consider if this is your business is:

Google Adwords: Advertising is part of doing business, often the most expensive part but Google Adwords is often a less expensive option for getting better listings with Google, and it’s faster.

Get Social: If you’re not interacting with your web visitors via social engagement, good luck. You may as well give up now and see if your competitors are hiring. I mentioned that Page Speed is one of the many factors that help google to determine how well your pages rank for a given search term, another factor is how much chatter there is about your website through social networks. Just as ‘links’ to your website are important the new kid on the block is social media and how it impacts the importance of your website. I’ll be writing an article about this in more detail soon.

Our own experiments and results

When we first learned of Google PageSpeed Insights we did our own experiments on our own website, and our own web templates and thought we’d share.

When we first loaded up www.i3dthemes.com into Google Page Insights ( https://developers.google.com/speed/pagespeed/insights/ ) .. the tool used to determine how fast your page loads, and gives it a ranking we scored a whopping 23/100 for Desktop or something as abysmal as that, and worse for Mobile. You probably will too on your first attempt. There’s a lot of things that go into Page Speed as you’ll learn about shortly, and a good chunk of that is server side. We tinkered and tweaked until we were able to hit 89/100 for Desktop and in the high 80’s for mobile, in other words we got the green light. And since then, the key pages that we were monitoring, have had 0 effect on search results. Zero effect. We used the search term “Dreamweaver Templates” which averages about 220, 000 search results. So not a lot of competition but enough to test with. And we haven’t budged in the results.

We were position 6 before we optimized the site / pages for Google Page Speed and now we’ve actually dropped to position 10. Many things have changed with Google in the past few months, and I can’t attribute dropping 4 positions to actually trying to improve our page loading speed, but it hasn’t seemed to have had the positive impact we were striving for.

To continue with the experiment, we also tested the 9 websites that were listed above us in the for the search term ( Dreamweaver Templates ). It’s one thing to try to improve your own rankings but lets not forget that we are actually trying to ‘outrank’ those websites above us, We just need to do things better than they are.

We conducted a Page Speed Test using Google Page Speed Insights on each of the websites ranked above us, and for ALL 9 Websites tested, www.i3dthemes.com scored better than 8 of our competitors and tied with the exact same score with another. Some of the scores were as expected, in the low 20’s and 30’s so they were not even close to being optimized. Other sites may have been optimized at one point, but with updates and changes to the site things become ‘un-optimized’ quite quickly.

It’s been suggested by Google that a faster loading web page may help with getting better search rankings. This is just one of the factors and depending on how competitive your keywords and market place are, but it will be different for everyone. In the experiment we were able to conduct on our own website, it would appear that our competitors have not tried to optimize their web pages for Google Page Speed, and still rank better than we do. And even with optimizing our web pages we have not seen an increase in ranking, but actually the opposite. So from my own experience those few milliseconds that we were able to improve the load time by, have not seemed to have an impact on search results or ranking. With that said, there are so many things that go into google ranking algorithm, and MORE IMPORTANTLY, the things that our competitors ARE doing with their websites and business that are helping them get better rankings which we have no control over.

Google Page Speed and You

I’ve read a lot of articles on Google PageSpeed or Google PageSpeed Insights ( the tool used to determine how fast your web pages load ) but none of the articles address some of the issues that arise especially for new web masters ( aka ‘noobs’ ), or developers who have been working with websites for years using web editors such as Adobe Dreamweaver or Microsoft Expression Web. There are some inherent down sides to optimizing your website for Insights  the biggest one being the comfort of working with the Design Window in your editor. Many people rely upon the Design view to help them organize and style the content. Google provides a very helpful script you can use to help load your style sheets more effectively and we’ll show you how to implement this in Part 2. Using a script to load style sheets has a downside in that you can’t see the stylesheet styles to the Design View. We’ll get into this in more detail, with a work around.

I’ve experimented with our own web templates, going through the steps suggested by google on how to improve page loading and a few thoughts struck my right off the bat:

  1. this should only be done when your site is complete AND published
  2. you may need to revisit Insights on a regular basis as every time you add an image to your site, or change the CSS
  3. you’ll want to make regular backups or copies of your website

Insights will suggest that you compress your CSS style sheets and and JS files. It may also suggest that you combine stylesheets or JS files. From Google’s perspective it’s faster to load one BIG file, than serveral smaller files. From a Designers or Webmasters perspective it’s much SIMPLER to work with multiple small files, than one BIG CSS file, and it’s pretty much impossible to work with a Compressed CSS file. So there’s a bit of a conflict as Insights basically wants all your CSS and JavaScript bunched together into one big file each, then compressed so it loads faster. While you are building your website you NEED access to readable and manageable CSS and JavaScript files.

Much of the things that Insights is asking for can not be done until your website is completed, and published up to your server. At that time, you can start to combine or compress files.

Here’s the snag though, if you need to make changes to your CSS or JavaScript you will need to un-compress the files, make your changes, then re-compress them.

This sucks.

And probably the reason why so many web masters have not caught onto google PageSpeed Insights. Or as from my own experiments it looks like there was an attempt to improve page loading, and over time the ranking have fallen as the websites get updated. I noticed that with our own website. Some new images, and change to a CSS file and BANG, you’ve just slipped a few points because those few updates were not ‘optimized’ again, for Insights.

So this is were we come in and you come in. What do we web masters who have been relying upon on Web Editors such as Dreamweaver or Expression Web do, with all the things that Google asks of us, and how do we manage our websites once they’ve been optimized and we need to make changes?

I’ll be covering this in Part 2 of this article, a straight up step by step how to guide to first optimize your web site or web template for Google Insights, then some tips on how to improve your score, as well as how to manage your website once it’s been optimized.

Why isn’t my web template optimized for Google PageSpeed Already?

If you’re working with a web template for Dreamweaver, Expression web or any other editor, the chances of your website already being optimized are none. As we go through the step by step guide in Part 2 of this article you’ll see that we not only need to compress the CSS and java script files but we also need to optimize our images. All images, anything you’ve added to your web template, or any images you’ve replaced in your web template need to be optimized AGAIN. There are several ways of doing this, and some web editors such are Dreamweaver have a built in optimization tool ( one of the reasons I like to recommend working with Dreamweaver as it is kept up to date, and new functions added to the software as the specs are changed by w3.org or even by google ).

Optimizing CSS and Javascript files means compressing them using a CSS and or JS minifier tool which you can find online. The downside to this is you NEED those files to be readable and managable while you are building your website because you may need to make changes to the CSS or JS as you are building your website.

A good example of this in CSS is when you want to change the font color of font size for a Slider, or for a hyperlink, you would make these changes within the CSS file. To find the CSS to change, the style sheet needs to be readable,  a minified style sheet is not readable.

Another example using Javascript would be W3 Validation. Many of our templates were created  at a time when HTML5 was still in it’s experimental stage and the HTML5 validation tool provided by w3.org was still being updated for HTML5.  Some of the JavaScript that past initial verification when the template was first developed and packaged may not pass any longer as some of the verification standards have changed over time, or upon final release of the HTML5 spec by w3.org. To update a JS file to pass w3 verification is usually a quick and simple update you can do yourself. If working with a minified js file, it would be impossible in most cases, so many js file files ( especially js files that are for newer components ) will remain uncompressed when the template is packaged as they are easier to update.

You may be wondering why I haven’t suggested downloading a fresh copy of the template with the update? And copy the updated js file over? Several reasons:

  1. The template package may not be updated yet. We need to know about the issue first before we can make an update. We don’t re-test templates once they’ve been packaged so the only way we’ll know is if someone discovers a issue or a specific file or script fails to pass the w3.org test.
  2. We sell many templates to web developers who in turn use the template to build website for their clients. The client may not know their website was built using one of our templates, and would not know to check for an update.
  3. Your js file may be updated as some point in the build either by yourself, or by someone helping to update or troubleshoot your website or website component. Replacing the file would overwrite any changes that you may have made to that file.
  4. Many of the js files in the templates include variables that you may want to change such as a timing of a slider, or you may want to change the type of animation. It would be difficult to find this information in a minified file.

And finally, something to keep in mind. Most websites and templates were created BEFORE Google Insights was launched, and much of the html and file construction was created or designed to make the updating and management of the website simpler than it would be combining and compressing the files that you may need access to. Now that designers and developers are aware of how Insights works we can take steps to build our templates with this in mind.

An Expert Interview about WordPress vs Web Templates

One of the questions I most often get from our new customers or web developers is what’s the difference between working with WordPress vs working a web template. I try to keep the answer simple to start with, then fill in the blanks with some specific questions about what is most important to them in building or maintaining a website.

The Easy Answer

Actually the answer isn’t easy, the question is easy. Most people first want to know what is easier to work with, WordPress or web template. So which is easier? It depends on what you are doing. I usually answer the question about which is easier by stating a few parameters first. Sort of a programmers ‘if else’ statement if you don’t mind they geek speak.

If you’ll be making consistent updates to the content and adding new content to your site on a regular basis, then WordPress will most likely be easier for you as that is what it designed to do, work with content.

The Not So Easy Answer

Now here’s where my answer gets muddy. If you want to modify the look and feel of your website, or have complete control over the layout of your content then you may find a web template to be more to your likening. WordPress does allow for modifying the look and feel, but a web template allows you total access to the HTML and CSS giving you complete control over the look and feel.

What do I Use the Most

It depends on what I’m doing, but it varies. I use WordPress exclusively for my online tutorials, and articles as that’s what it does best. I don’t need to have control over the look and feel of my blog site as it’s completely content focused as is my tutorial website, just articles, pictures and videos. Because these two websites are content focused I don’t feel the need for tight control over the look and feel, at least nothing that WordPress can’t manage. But I do like the convenience of firing up my web browser, and quickly updating a tutorial or adding a new article without the need to create a new web page, or update then FTP an existing web page. That’s for me, I also work on our charity website www.smilingblueskies.com and find that it’s easier to keep up to date, and manage as a web template. There are some VERY strict layout guidelines that I need to stick to with this website, and find that it’s just to finicky for the likes of WordPress. It would take me longer to create the custom CSS or code required in WordPress when I can make a quick update to the template. So it depends on what the goals are, if content is most important and you plan on updating the site often, I would consider WordPress to be a better option.

What About Working With Clients?

Something to consider, is if you want your client to have control over the updates of their website. What I’ve  experienced with working with my own circle of web developers is the client will want the developer to create the site, update and then eventually when it’s all running smoothly and completed turn the site over to the client to update. Usually to keep the cost of maintaining the site down. Some clients just want the site to be built and then hands off after that. Either way, if at some point you plan on handing the website over to the client to manage their own website then they need to have some skills in working with a web editor and Dreamweaver templates or Expression Web templates, or you’d be better of with WordPress and just make sure to teach them how to backup make backups of their website!!!

What About Plugins?

It’s hard to argue that WordPress isn’t overflowing with an abundance of plugins. Somewhere over the 44, 000 mark at the time of writing this article. There probably isn’t a plugin that hasn’t been thought of, or at least thought of and added to theWordPress.org plugin directory. With 44, 000 plugins, you have options. Need to add a newsletter, yup, add security, check, add Buddypress, copy that.

When I’m speaking with clients or developers about WordPress compared to web templates, I will ask if there is any special functionality they are looking for in their website, such as a shopping cart, members page or newsletter sign up. Understanding the full scope of the project helps to determine what the best solution is, web template or WordPress. With WordPress you can definitely get all the functionality of a shopping cart or members login page through one of the available plugins, however and this is a BIG however, finding the ‘right’ plugin can be a daunting task. This is definitely a case of information overload. I’ve had more than a few clients ask me to find a plugin that will work for specific situations and I always let them know ahead of time that I can recommend certain plugins that I’ve worked with and have experience with such as WooCommerce, or WP Commerce ( for shopping carts ) but if it’s for something I have no experience with they may be paying extra for my time to find the right plugin for their needs.

Find the Best Plugins for WordPress

Because WordPress plugins are such a big part of the WordPress experience I thought I better address how to find the best plugins, or at least share with you the approach I take. As I mentioned previously WordPress has an abundance of plugins, often hundreds for the same category. This make finding the best plugin for your needs an often overwhelming task. The only way you’ll really know if the plugin does what you need it to do, is by installing it and testing it out. So first you need to find the plugin, then install it, test it and often at this point something’s gone wrong and you’ve just wasted half an hour.

When a client asks me to add a plugin for them, they usually don’t even know they are asking for a plugin or even what a plugin is, they just ask for a certain type of functionality bell/whistle to be added to their website ( a photo gallery is a good example ) and ask ( or expect ) that I know how to do this. What I do at this point is explain what WordPress plugins are. If their request falls within something I am already familiar with ( such as photo galleries ) I can recommend certain gallery plugins and provide examples so they can see what would work best for them. If they are asking for something I am not familiar with, then I need to inform the client that there will be a charge for the time it takes to research, and test.

In many cases the client has seen something they like on another website, and will just let me know where they found it. And if not, I’ll ask them if they’ve seen what they are asking for on any other websites, and if so provide a link because many times, what they see on other websites are actually WordPress sites running a plugin. That makes it very quick and easy for me to look at the source code in the page, see what scripts are being loaded in, and figure out what plugins are being loaded in. It’s a bit techy, but kind of fun sleuthing through someone’s web page.

Failing that, if I really need to do the grunt work myself I’ll start by googling something like ( The best wordpress photo galleries ) .. then come up with a million hits on ” The 15 Best Examples of…. ” still some research to do, but at least if someone else has done the majority of the leg work for me, I just need to grab a coffee and do a bit of reading. What usually takes the most time if trying to find ‘recommended’ plugins that have all the features the client is requesting.

You can also go directly to the source and (https://wordpress.org/plugins/) search for your plugins, and check out the number of star ratings and  read the reviews. Like any reviews this is something to take with a grain of salt.

In a nutshell, if you work with a client and they want something cool added to their website in the form of a WordPress plugin, if you can ask for an example of where they’ve seen this they you may be able to save a good deal of time and headache trying to meet your clients expectations.

What About Plugins for Web Templates?

This is where the market is lacking, there aren’t that many aside for the plugins we offer, there just aren’t too many plugins for web templates. We are speaking of database plugins similar to what WordPress offers that is. Such as Shopping Cart, Members Area, or Newsletter plugins that you can add to your HTML website. You might be thinking at this point, um, aren’t you just pluging your own stuff? Yes, and no. I just did a google search on shopping cart plugins for web sites, and 7 out of 10 of the top results were referring to WordPress plugins. So the market is flooded with WordPress plugins but such a degree that it’s hard to find an HTML database equivalent. Just for fun I did a search on ( members area database plugin ) and all top 10 results were WordPress related. So let’s just skip to the part where I recommend our own plugins and forget about the competition as it’s taking too much time and effort to find them via google.

What about SEO?

Yes! Finally, to my favorite questions, well this and responsive design because I can prattle on all day about that. SEO, and which is better you may wonder. Based on my experience and opinion ONLY WordPress may have the advantage on this one. For two reasons. Plugins and Google. WordPress is the lovechild of Google and open source content management systems. I say this because I have seen some heavily bloated WordPress sites that rank exceptionally well in Google, but most importantly for folks who are not SEO experts and most of us aren’t, there are WordPress plugins that can help you optimize your web pages for SEO without over optimizing page for SEO. WordPress is a blog system at heart, and blogs are content focused. Google seems to be content focused. That combined with SEO plugins such as Yoast you’ll probably have a bit of an easier time getting your content ranked in google, providing you have good content!

Which Takes the Least Amount of Time to Build?

OK, here’s the simple answer, WordPress. Yes, there may be situations where it’s faster with a web template, but for the average user WordPress is going to take less time. You could have a WordPress site up and running in an hour if you had your content prepared, and a small 5 page site.

Which is the Cheapest?

Both can be free, so they are on even ground, but when it comes to value it depends more on how much time you have to invest ,and how much that time if worth to you.