Page speed guidelines explained

page speed
I have added a new section to www.feedthebot.com…

Pagespeed.

In this new section I will be taking every error you can get from the Google pagespeed tools and define and explain how to fix that issue.

If you have ever been confused by things like “enable compression (Gzip)” or “leverage browser caching” or “combining CSS” or “image sprites” you will find some great information on these pages.

There are over 30 of these errors and I have written about half of them so far, but more will come everyday until I have them all finished.




htaccess-file

The .htaccess file

The .htaccess file is a small and powerful text file that controls many aspects of how your webpages display. Things like redirects, enabling compression, rewriting urls, leveraging browser caching and more can be accomplished by adding some code to this little file.

However, even a small mistake while changing or updating this file can cause extreme results (like your webpages not showing up) so there is reason to take great care when editing, but don’t be too scared, I will describe how to safely change it by ensuring you always have a backup copy of it that works.

What is a .htaccess file?

The name stands for “hypertext access”. The file provides a way to do things to your webserver that would normally be done in configuration files of your webserver. That access allows you the webmaster to do many things that you may not have known were possible. The .htaccess file is used by Apache and Litespeed and others. It is very likely that 90 percent of you reading this can use this file.

How do I find my .htaccess file?

Wherever you upload things to your webhost (like a file manager) is where you will find it. It is important to note that the .htaccess file is by default a “hidden” file. Most webhosts will provide an option to “see hidden files” when first opening the file manager. It is also worth noting that there can be no .htaccess file, or several. In theory every folder can contain one. Typically however the .htaccess file will be on the “root” level or the “www” folder. Basically wherever you put your files to be displayed on the web, that will be the most likely place to find the .htaccess.

If you can not find it, or you are unsure you have one you will need to contact your webhost and ask about it. If you are serious about your website, you should really know where this file is and how to use it. Many things you can do with this file will help you follow the Google webmaster guidelines better.

How do I edit my .htaccess file?

This file is just a text file, so you can edit it the same way you edit any other file on your webhost. However, before you do there is an important step to take…

warningAlways make a copy of your current .htaccess file before altering it!

I really mean it. Make a copy first, call it something like “htaccess-works” or something, but really, you need to make a copy of it. Remember, altering this file wrong can screw up your website or even make your website not display at all. If you have a copy then you do not need to worry about it.

Best Practices for editing the .htaccess file

  • Always have a working functioning copy of your .htaccess file
  • Every time you make a change to this file you should save the file, then go to your webpage and refresh the browser to make sure your webpages are still displaying correctly. Doing this will save you many problems.
  • If you do screw something up, just copy and paste the contents of your backup copy into the .htaccess file and save it again and your website will work as it did before.



Optimizing your document head – ordering elements for page speed

The head area of a HTML document contains some really important things. There is of course the title of the page, the meta data such as “description”, and the calls to your external CSS or Javascript files.
The order in which you place elements in the head can drastically change how fast your page displays in web browsers.

<head>
<meta http-equiv=”content-type” content=”text/html; charset=utf-8″/>
<title>Your page title</title>
<meta name=”description” content=”your page description.” />
<meta name=”Keywords” content=”your keywords” />
<link href=’your css file’ rel=’stylesheet’ type=’text/css’>
<script src="your js file"></script>
</head>

All of these things either tell a web browser how to display your page or tell search engine spiders a little bit about what your webpage is about.

These are both very important things. You would think then that we would pay close attention to this under appreciated part of our webpage, but it often becomes a jumbled together place in our static pages or a strange mysterious place in our wordpress pages.

Below is a representation of how your head elements should be ordered and why.

The Head element

Let’s start by opening the head…

<head>

 

Character encoding

The next line should be the character encoding…

<meta http-equiv=”content-type” content=”text/html; charset=utf-8″/>

Why? In order for a web browser to display your webpage it needs to know what it is dealing with. Setting the character first allows a web browser to just move forward and display your page, with out it, it has to “guess” and take other steps. With it, it just can move on and display your page. note: Your character encoding may be different than mine so don’t just copy and paste this one.

Title and Description

Next we can place a title and description meta tags, let’s place the title first and the description next so we have some order to our pages and we can quickly see what our page is about…

<title>Your page title</title>
<meta name=”description” content=”your page description.” />

If you choose to use the keyword meta tag, place that next.

<meta name=”Keywords” content=”your keywords” />

 

External CSS

The CSS should go next. This very important. Always put your CSS and calls for CSS prior to other external calls for other files like javascript. If you call a javascript file before your CSS the Javascript has to download before anything else can happen (like displaying your webpage).

<link href=’your css file’ rel=’stylesheet’ type=’text/css’>

If you put the CSS first, the CSS and other files can be downloaded in parallel (at the same time) whereas if you call for javascript file first, the same files have to be downloaded one at a time. This creates sometimes massive speed changes. Always call your css before your javascript files.

External Javascript

Now that our CSS file is being called we can call for our javascript without messing anything up…

<script src="your js file"></script>

Close the head

Now we can close the head like so…

</head>

A well ordered head section

Let’s put it all together now…

<head>
<meta http-equiv=”content-type” content=”text/html; charset=utf-8″/>
<title>Your page title</title>
<meta name=”description” content=”your page description.” />
<meta name=”Keywords” content=”your keywords” />
<link href=’your css file’ rel=’stylesheet’ type=’text/css’>
<script src="your js file"></script>
</head>

There are many things that can be placed in the head of an HTML document, but following the above few rules will help speed up your webpages and make your code look better and easier to use.




This site is not affiliated with Google Inc

written by Patrick Sexton on Google+