Original Article: https://kevinpirnie.com/speed-up-the-web-part-i/
Today is an age of broadband. More and more people are going this route determined to experience the web and it’s multitude of services as quick and painless as possible. Coupled with the move to broadband, more and more people are experiencing the web via their mobile devices, and it is this, that most developers/designers forget about. With mobile devices becoming more and more mainstream, it is more important than ever that we as designers, and developers imply the importance of optimized web sites to our clients. With this in mind, I would like to introduce some strategies I imply when developing a website, or web application.
- Optimize your images!
- Most clients now a days realize that most people are connecting to their site through a broadband connection, and want the flashiest, prettiest site they can get for their money. As such, create and utilize CSS sprites. (http://css-tricks.com/css-sprites/) This will significantly reduce the number of times their web browsers connect to the server to request resources.
- Compress your images as much as possible. PNG and JPG files are great for using the full color scheme available to computers, however, they contain a ton of extra information embedded in the files, that are simply not needed for displaying on the web. EXIF, and META information can be removed from the files to produce smaller file sizes resulting in a faster download for the browser. (http://www.sentex.net/~mwandel/jhead/ & http://en.wikipedia.org/wiki/Pngcrush)
- Optimize your Styling!
- Combine your CSS styles into one stylesheet. This will reduce the number of requests the browser has to make to the server, thus reducing load time.
- Compress your CSS stylesheets. Check to see that your web server supports GZip encoding. Also look into minifing the CSS, removing all the extra whitespace and un-needed characters are a great way to reduce the file size.
- Make sure not to use inline styling when developing your website. This is dirty and generally not a good way to design a site. It makes the HTML alot heavier.
- Make sure the CSS tag is placed first in your HTML files
- Optimize your HTML!
- I know it’s easy to design a website out of tables. It makes it really easy to place everything where you need it to be. However, it is dirty, old, outdated, and makes it a real pain in the @%^ for the real designers to work and modify the site. Utilize CSS, and DIVs to design your site, trust me you’ll be happier in the long run. Not only is this the w3c compliant way to do things, it will also make for smaller file sizes of your HTML resulting in a faster loading website. If you do “need” to use tables, make sure to save them for tabular data, and try not to nest tables.
- Save the styling for the CSS stylesheet. This will reduce the size of your HTML file, and is generally the way to do things.
- If you need to embed images directly into your web page, make sure to include the height and width attributes. This will allow the browser to not have to calculate the size of the image as it renders it.
- Minify your HTML. This will reduce the file size, making the site load faster.
Heed these words of wisdom and you will be on the correct path to becoming a great designer. Keep an eye out for more in this series, as we will be discussing the methods above in more depth in later posts. Till then, happy coding!