Tag Archives: Technology/Internet

Optimizing the web. Start with the images!

micro tutorial, web development, , , , , , , , , , , , , , ,

Common question when speaking about web site optimization is: where should I start. As I mentioned before almost every technology used in the building of a web project can be improved. The bad news is that this improvement needs effort and when it comes to changing some code that’s already written that’s bad. The good news, as it exists, is that in the most cases most of the traffic of a site comes by images and/or other media and their optimization doesn’t have to deal with coding and can simply be optimized.

Optimize every image

The first thing that you can do to improve your site image is to optimize them. Sometimes the files you put on the site as they are JPEG, GIF and PNGs can be improved just by using some software that strips useless information from their headers and using various algorithms to smooth the similar pixels. As you may know in the case of PNG and GIF this is particularly natural. Stoyan Stefanov a lead Yahoo! developer is know as guru when it comes image optimization. You can check more detailed information about software and tools on his blog here. The reality is that you don’t need extra info into the images, as useless information about the camera, which is often setup into the image header, and when it comes to the web that’s really good. In fact according to some researches this can spend you more than 30% of traffic. Continue reading Optimizing the web. Start with the images! →

Faster HTML! Why not?

web development, , , , , , , , , , , ,

Although I’ve read so many articles about web page optimization there’s not so much about optimizing HTML.

Why?

Maybe because nobody things that the HTML source of a page can be optimized or the optimization of it cannot bring some benefit to the page load experience. I don’t thing so. If something can be optimized, even if this does not give you so much, why you shouldn’t do it?

How to optimize such thing as HTML?

Well there are few things you should do and other that can speed up a little bit but you should not.

1. Enable gzip

What is gzip? Well in breve everything the server generates is sent back to the client in text format. You’ve to possibilities to send it. Either compressed or uncompressed. As you may guess the compressed format is a lot faster than uncompressed. In fact to make it work that way you’d need to enable gzip which is supported by the web server. In the case of Apache web server this can be done by enabling mod_deflate. Take a look of mod_deflated and mod_inflate. This two modules gives you the possibility to make your site a lot faster and the good news is that this is done without a single line change. The bad news, as always there’s a bad news, is that sometimes this cannot help a visitor, simply because his browser doesn’t support such corresponding with the server. According to a research I’ve read recently almost 15% of the web browsers doesn’t support gzip. Sometimes the reason is old browser versions, sometimes because the state policy doesn’t allow it. However this is the first thing you should do to speed up your HTML even it is not related directly to HTML scripts. By the way this will speed up everything which is sent back to the client, especially CSS and JavaScript files and in the case of JavaScript this can improve dramatically the user experience. Continue reading Faster HTML! Why not? →

What should be optimized in one web page?

web development, , , , , , , , , , ,

Well that’s a question that has been asked so many times in the web and I my intention is not to repeat that. In my web development experience after so many web sites behind my back, there is always something that repeats in every site. And that’s the technology that support the development – the languages we use. Although they differ in some way, especially those used on the server site, or so called server scripts, which can vary between many options, but in fact almost every web project consist of one of the following things:

  • HTML
  • CSS
  • JavaScript
  • Flash or Silverlight
  • Server side scripting language, like PHP, ASP or whatever
  • Database server

I’d like to add one category more and that’s the images we use in every website to construct the desirable layout. They are extremely important when optimizing a web page, because almost always they make more than half of the traffic of a page.

In few posts I’ll write what and how can be optimized, according to my experience and according to the articles I’ve read. I won’t mention again why the optimization is important – I’ve written already some posts about that and the web is full of articles.

As I can say nowadays this is the most important topic of the web development. Almost everyone’s speaking about it and I’d like to give some references in my talks, just to make it more clear and to give you some basic points from where you can start optimizing.

jQuery vs. pure JavaScript

javascript, , , , , ,

The question is: should I use always jQuery in some large jQuery project? Imagine you’re developing a large scale web application where the JavaScript part of it is supported by jQuery. In my case that was the reality. In fact in every, even very big, project there are “pages” where you don’t need much of JavaScript. Such pages can be the “about”, “info” or whatever static page there is.

Well the question is, should I again include the hole jQuery if I need only to toggle the visiblity on a DIV element? Let’s assume you’ve very long text, cutted in the beggining with the “more” link somewhere after the intro. That’s very common, isn’t it? So by clicking on the “more” you toggle the visibility of the rest of the text. Well of course it’s absurt if I include the entire library just to make this.

The right answer by me is to use pure JavaScript, something like that:

document.getElementId('id').style.display = 'block'

That will do the same job without to block the “fast” in other way page!