a winnipeg website design company.
a winnipeg website design company.
Wednesday, November 12th, 2008
Making sure that your pages load as quickly as possible will help you keep your users. Fast loading pages will also increase your audience as now you do not limit your users to those with high speed internet. Loading times are usually not thought of by large corporations, in large cities that all of high speed connections. There are a lot of rural visitors who may be not so lucky.
Enough about the importance of loading times; let’s get to the discussion on how to make our pages faster. To debug why your page is taking so long to load, I suggest that you install the great firebug extension, which I talked about in my last post titled, “Firebug: A Developers Best Friend“.
Along with this install the YSlow firebug extension, as it breaks down how your page is loading and whether it is fully optimized. Once installed, navigate to the page you want to debug and enter firebug, hit the YSlow tab, and then click on performance at the top. YSlow will now begin loading the components of the website and gives you a performance grade. The following are the important ones to look at, and will be described further in detail.
HTTP requests are made for each image, stylesheet, script, and flash within an HTML page. Cutting down on the amount of these resources needed to load will speed up loading time.
One “practice” that has been thought up to reduce the requests made is to create CSS Sprites. CSS Sprites is the idea that combining a bunch of images into just one image will reduce the number of trips to the server. You can then use the CSS property of background-position to only allow the user to only see a part of the image that you want. I found a great CSS sprite generator that does this for you and even spits out the background-positions you will need to use.
Another thing to keep in mind when you are designing your pages is to try and keep your fancy images to a minimum. Try not to create separate images for your navigation, but instead create CSS navigation using the same background image for each link.
Caching your pages is one of the most important things you can take time to control. Caching is the process of your browser storing resources on your machine, so that when you come back to the same website it can used the cached resources instead of downloading new ones.
Of course caching can also be an annoyance, as when content is changed we sometimes still see the old content until we clear our cache. This is the reason why you need to specify which resources you wish to cache. You may want to cache images, stylesheets, and javascripts but not PHP pages. PHP pages are dynamic in nature and show different content based on a number of factors. Images on the other hand rarely change and thus make it great to cache.
The easiest way I find to cache these elements is to add the following to a .htaccess file:
ExpiresActive On ExpiresByType image/jpg "access plus 2 years" ExpiresByType image/jpeg "access plus 2 years" ExpiresByType image/gif "access plus 2 years" ExpiresByType text/javascript "access plus 2 years" ExpiresByType text/css "access plus 2 years"
I am sure you have all heard of zip archives. They offer a way to compress multiple files into a one smaller file. GZip works in a similar way. The way it works is you request a resource, the server compresses it, it passes it over the internet to your browser, and then the browser uncompresses the file and you don’t even know what just happened.
Enabling this aspect on your server can help wait times, and saves you bandwidth in the end. In Apache GZip is controlled by mod_deflate. Adding the following to your .htaccess file specifies some rules in which mod_deflate must follow:
SetOutputFilter DEFLATE SetEnvIfNoCase Request_URI \.(?:gif|jpe?g|png)$ no-gzip dont-vary SetEnvIfNoCase Request_URI \.(?:exe|t?gz|zip|bz2|sit|rar)$ no-gzip dont-vary SetEnvIfNoCase Request_URI \.pdf$ no-gzip dont-vary
Putting JavaScript at the bottom of your page will allow the page to load styles, and elements more quickly. If your JavaScript is entered in the head tag, the page will load all this JavaScript before it gets to creating your HTML mark-up. If JavaScript is placed at the bottom the user will at least see the website, and then JavaScript can be loaded as the user is already processing the content.
This topic is fairly self explanatory. When white space/comments are stripped out, the client has less to download and thus speeds up the process of downloading. The problem with this is that if you look at a minimized file you will get lost very easy. No indenting and commenting makes for tough debugging.
There is a way to have the best of both worlds. Install Minify! This is a PHP application that renders a JavaScript file and then outputs it in a minified way. Changes made to the CSS file are immediate changed in the minified file and thus allows fast loading times, but the ability to easily make changes as well.
This is probably the most obscure point that YSlow has. Most people have no idea what ETags really means. Adding the following to the .htaccess keeps YSlow happy:
FileETag None
Tags: firebug, speed optimization
Posted in Web Programming | No Comments »
Tuesday, November 11th, 2008
Firebug is one of those must haves if you are a web developer or designer. It along with the many Firefox extensions is what made me switch from Internet Explorer. The plugin I will talk about today is Firebug. You can download it from getfirebug.com and you will immediately fall in love.
Firebug out of the box contains many useful features. It has tabs called Console, HTML, CSS, Script, DOM, and Net. Below I go further into depth of each of these tabs.
The console is a place where you can directly run JavaScript on an existing page. Try typing some JavaScript in the text area and clicking run. Try the following
var anchors = document.getElementsByTagName("a");
var anchorHrefs = [];
for(var i=0;i<anchors .length;i++)
{
anchorHrefs.push(anchors[i].href+"\n");
}
alert(anchorHrefs);
When this is run you will get an alert of all the anchors href attribute in the current page. Your imagination is really the limit as any JavaScript can be put into this box.
As well as run time JavaScript the console shows XMLHttpRequest’s ore in other words AJAX requests. It tells you the file that was requested, with what method (GET or POST) as well as what was sent and what was received. This functionality is also shown in the Net tab but is sometimes easy to debug AJAX using the console.
You can probably guess what this tab does. It displays the pages HTML with nice formatting and allows collapsing of blocks and lets you quickly delete elements, and change attributes on the fly.
Another great feature is that when you click “Inspect” and then mouse over an element; Firebug jumps you to that exact point in the HTML. From there you can change that element attributes, or even its style in the right hand panel. A style is disabled as easily as clicking to the left of a property, and enabled by clicking it once again.
CSS properties are also crossed out if they are overwritten by another rule. This helps you determine specificity problems, as well as seeing why certain styles are not applying the way you had hoped.
This tab shows only your CSS and features the same features as the CSS panel in the HTML tab. Properties can be toggled on and off as well as properties added/deleted in real time.
Remember that when these changes are made, the files aren’t actually changed. As soon as you refresh the page they will be gone. This is the reason why you use Firebug if you want to see what looks good, as it is much faster than changing a CSS property, saving, viewing, and then doing the same thing again for using a different value.
The Script tab contains your JavaScript code. It allows you to use the basic debugging techniques in your browser. It features breakpoints, variable values, and code walk-through.
Setting breakpoints is as easy as clicking a line number and a red circle will appear. Breakpoints are best used entering functions, and objects. Once a breakpoint is set you should refresh the page and do the task to trigger that JavaScript event. Once triggered you use the controls in the top right corner. You can choose to play JavaScript until next breakpoint, Step Into code block, Step Over code block, or Step Out of the current code block.
Have you ever wanted a GUI for navigating the DOM? Well Firebug gives it to you. Here it shows your DOM elements such as your anchor tags, form element values, etc.. It is really helpful when you have to write that JavaScript and your not sure how to get at the child node that you want.
Here it also shows your JavaScript variables and what their current value is. If you don’t have Firebug you will need to keep track of all these in your head or doing a pile of alerts to see a variables value.
Finally we have come to the Net tab. The Net tab breaks down all the HTTP requests into what was requested, the HTTP status code, the size, and even how long that one resource took to load. I don’t know about you but this is valuable information. Want to make sure every loaded OK? Check the Net tab and see that the status codes are proper. If you’re wondering what is taking the most time to load on your site, you can check this and see. You might occasionally find your non-optimized images taking a long time to load. This helps you spot these errors.
That about covers the basic functionality that Firebug gives to us web developers. I will inform you that this is really only the tip of the iceberg. Down the road I will probably give you an insight to the many plugins that Firebug has yet. These are not Firefox extensions, but specific to Firebug that add more functionality. Below I list a few that you can read upon further if you so desire.
Tags: development tools, firebug, JavaScript
Posted in Software | 5 Comments »
Twitter
Create URL Shortener For Twitter Using PHP: http://bit.ly/9OIZt5 (via @michaelmurphy)
RSS Feed
Keep up with all of our updates by subscribing to our RSS feed!
FaceBook
Join our group on Facebook and become a fan of us!