In my webmaster / web programmer daily routines I am typically going through client sites and optimizing them for performance. The desired outcome of this is that we will improve the users experience. This is important to our clients because the sites performance score may factor in to where the site shows up in search engine results. Search engines, like Google, have a vested interest in providing the best results to the search user. If the user utilizes the search engine and gets quality / usable results they will continue to use the search engine service.
A few things that might get a website into trouble in the usability zone include: Non- Optimized images, Non-optimized code, broken links, missing pages and generally un-usable content.
IMAGES
Top of the list is Non optimized images. One of the more prevalent things that can may cause a user to “bounce” or leave your site might be non-optimized images. Why? They take too long to load on the page. Although an image direct from a nice camera can look beautiful, It might take a long time to download. If someone is waiting to see an image load they might stick around to view it. Or they may move along to a faster loading site. This can be very important regarding background images or slider images that may take awhile to load. So it can be in website’s best interest to get large images scaled down to screen ready formats. If you want to show high quality images then the initial image should probably be a thumbnail low sized image. How can you optimize images? If you own a copy of Photoshop you can use its excellent save for web feature.
Here is a link to get an old version of Photoshop for free:
I personally use Photoshop CS4 and it works just fine for most things. The link above is for Photoshop CS2 – still great software. On a MAC you may need Rosetta type software if running newer OS.
Most photographs look decent using a jpeg format at about 30%. Image size is a relatively broad concept. However consider old desktop screen sizes that include:
640×480
800×600
1024×768
They go up from there, however these sizes can give you an idea of what a screen image size should be. And in general they dont need to be 2000px or more at 300 DPI. Web Images should be set to 72DPI as a standard. If you have Photoshop, then you should utilize the save for web feature as noted in the graphic to the side. It automatically sets the image to 72 DPI. You then can choose quality settings etc.
After You initiate the save for Web from the File Menu.
Using the dropdown (rightside -top ) > Choose file type. JPG -> Then choose Meduim (or adjust quality manually with the slider). Press Save – and note the location! Use these optimized images on your site. They will usually pass site optimization checkers easily.
I use JPG for almost all photos. 25 – 45% is great for the web. The bigger the dimension – the more I compress/ reduce quality to save file size.
NON- Optimized Code
This is something a web coder will need to address. Wherever possible it helps to optimize code. One of the more common mistakes in this area include inline styles. Styles are codes that tell the browser how to display a font for example. They are inline when they apply only to a specific element for example the above heading “Non-OPtimized Code”. The most efficient way to style any element on a web page is to externalize the styling guides using an external CSS stylesheet. This way instead of styling jus this one element you might style any element, or all headers for example once. This can save on download time and combined with other optimizations it can improve overall site performance. When you consider the amount of code that can be placed within any given page to style it, there can be serious performance gains.
There are also inline javascript codes that can take up many lines on your pages code. These again can often be placed externally. I have seen hundreds of lines of code on a single page dedicated to CSS and javascript, and the effect is a slower loading page. Even with a fast connection this can be cumbersome.
Broken Links and Missing pages.
Broken links and Missing pages can be hard to detect at times. Take a situation with a recent client where they changed from a static website to a CMS. While the client gained the ability to add pages at will, they didn’t notice that many of the old pages names changed. This can have a negative affect of Search Engine Performance. Why? Search engines may index your pages for their search results. If when a user goes to one of these pages that are indexed or otherwise linked to and they get a “Page not Found Error”. Your search Engine Ranking is sure to suffer. The cure for this would be to setup Redirection. For example in the case the old page was named /red-widget.html/ and the new name is just /red-widget/ . You would redirect red-widget.html/ to /red-widget/ . This can be done on Apache based servers using a file called: .htaccess . The .htaccess file is available on Apache based servers only (and in some cases it is locked down/unavailable). Most web hosts these day do utilize Apache based servers. My guess is because it is open source (free). It is also based on a linux operating system, so its pretty stable. You can find the .htaccess file in your web root of your FTP directory.
Using a 301 Redirect command in the .htaccess file. It would look similar to this:
RewriteEngine On
Redirect 301 /pagename.html http://www.domain.com/pagename/
The first line may already be declared if the file exists
Content
Content is really important. Bottom Line. The general information about you or your company is standard and should be well thought out. One thing that is very important in creating your content is that it be unique and relevant. Why is unique important? Sources at google suggest that if another site has the same content as yours, your site can get pushed down in search results. Typically the better site will stand out and the other could get pushed downward. Relevance is important and can be explained like this. If a user is looking for red widgets, and you sell red widgets, your site should have content relevant to that. Pretty simple.
However there are other factors that could contribute to bringing in more relevant traffic. Unless you are the only one in your industry it can make a huge difference in your overall traffic if you have quality content beyond what is standard to offer. This content should provide utility to the potential viewer. For example if one were are trying to learn more about a red-widget. Then you might provide Photos, articles answering common questions about red-widgets and other resources. If you have a good resource then it is more likely to get linked to and found. I could go on and on about content. I just wanted to provide a few tips on the matter.
