You’ve definitely seen the “share a link” screen in Facebook. When you paste a link into the box (fig. 1) and press the “Attach” button you’ll get the prompted cite parsed with a title, description and possibly thumb (fig. 2). This functionality is well known in Facebook, but it appears to be well known also in various social services. In fact Linkedin, Reddit, Dzone‘s bookmarklet use it.

Fist thing to notice is that this information, prompted by Facebook, is the same as the meta tag information. However there is a slight difference.

Facebook prefers for the thumb the image set into the <meta property=”og:image” … />. In the case above this tag appears to be:

And the image pointed in the SRC attribute is exactly the same as the one prompted by Facebook (fig. 3).

First thing to note is that the real thumb is bigger than the thumb shown in Facebook, so Facebook resizes it and the second thing to note is that there are more meta tags of the og:… format.

Meta Tags and The Open Graph Protocol

By default meta tags contain various information about the web page. They are not visible in the webpage, but contain some info about it. The most common meta tags are the title, description and keywords tags. They of course contain the title of the page, not that this can be different from the <title> tag, a short description of the page and some keywords describing the content of the page. They are well known also because the search engines make use of them when trying to collect information about the page and the process of SEO passes through it.

However the default HTML meta tags cannot contain everything. Thus for example you cannot point the preferable thumbnail for a webpage. The solution is the Open Graph Protocol. It comes with meta tags that can contain more and more valuable info. Such a tag is the og:image meta tag. Note that all the Open Graph (og) meta tags are defined by the og: prefix before the entity name. Thus og:image comes for images, while og:longitude for geo positioning.

That’s really useful, but how you can read them?

PHP, Meta Tags and Regexps

When you try to read information from a webpage source the first possible path is by using regular expressions. However PHP is smart enough to offer you some useful functions. Such a function is get_meta_tags(). As you may guess this method reads the meta tags by given URL.

$a = get_meta_tags('http://vimeo.com/10758212');
var_dump($a);

However this method can’t read Open Graph tags. So finally you’ve to use some regexps.

preg_match('//', $source, $matches);

Now you can grab the og:image tag. And even more – grab every image (<img>) from that page.

preg_match_all('/

Related posts:

How to Sanitize User Input in PHP? 
HTML Tags: <base> 
Automatically Upload Images with PHP Directly from the URI 
Download Images with PHP 


]]>
			/2011/02/25/how-to-collect-the-images-and-meta-tags-from-a-webpage-with-php/feed/
		6
		
		
		
		/2010/03/12/use-cookie-free-domain-and-cdn-for-static-content/
		/2010/03/12/use-cookie-free-domain-and-cdn-for-static-content/#comments
		Fri, 12 Mar 2010 08:46:32 +0000
		
				
		
		
		
		
		
		
		
		
		
		
		
		
		

		/?p=1220
		Continue reading Use Cookie-Free Domain and CDN for Static Content! →


Related posts:

Read The Anchor Part of The URL … with PHP 
How to Overcome Zend_Cache_Frontend_Page’s Problem with Cookies 
jQuery.unbind() 
Read Remote File Content-Type with Zend_Http_Client 


]]>
				Benefits from Cookie-Free Domains
Lately most of the web developers are talking more and more about optimization. One of the practices everybody’s supporting is to use cookie free domains for static content. First of all, what’s static content. That, in breve, are all images, JavaScripts and CSS. That’s everything that’s transmitted to the client with no change from the server at all. In a typical PHP/MySQL site everything generated on the server site is considered dynamic, while every component that’s given to the client with no change is static. That’s why they don’t need cookies in the request.
That’s what Yahoo! YSlow says:

In a short example, lets say you’ve a web page with 10 background images used by its CSS file. Here’s a good practice to combine them in one or even use base64 for them, but that’s another talk. So in that scenario you’ll send all the cookies you’ve on the site with this images, but actually they don’t profit at all from this. The question is why you should send all this data with no need? Won’t you benefit from sending it with no cookies.

As it sound logical I read some articles recently describing that the benefit from putting the static content on a non-cookie domain doesn’t pays back. OK it may be strange, however every 40 ms or whatever of page load is important, aren’t they?
Setup a Cookie Free Domain
The problem is that if you’d like to setup a cookie free domain the things are becoming a bit harder. You’ve two options:

Move all your static content on a different domain, where no cookies are set.
Move your static content on a different sub domain and set all the cookies to the www subdomain. (Here’s a bit tricky).

All this indeed a bit tricky! So let me proceed with the next topic.
Benefits from CDN
A CDN or Content Delivery Network is a term become famous with the growing web. Now big sites have servers in almost every continent and perhaps country. CDN is an abstraction of all this. The good thing is that there’s supposed to be stored static content. Think about the YouTube’s video files. Another good thing is that this domains are cookie free by default. The thing is …
Why don’t You Combine Them?
You’ll benefit from both ideas. Cookie free domains with CDN. In one side the web page will benefit from the closest location of the server and the CDN and in other side all this will come with no cookies to you. That’s really nice and most of the time people thing of CDN for only storing large scale data, such as video files, but no one says you cannot put your CSS, JavaScripts and background images there!

Related posts:

Read The Anchor Part of The URL … with PHP 
How to Overcome Zend_Cache_Frontend_Page’s Problem with Cookies 
jQuery.unbind() 
Read Remote File Content-Type with Zend_Http_Client 


]]>
			/2010/03/12/use-cookie-free-domain-and-cdn-for-static-content/feed/
		19
		
		
		
		/2010/02/05/css-sprites-go-beyond-the-limits-with-base64/
		/2010/02/05/css-sprites-go-beyond-the-limits-with-base64/#comments
		Fri, 05 Feb 2010 08:10:29 +0000
		
				
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		

		/?p=1055
		Continue reading CSS sprites. Go beyond the limits with base64! →


Related posts:

When you should use base64 for images 
Optimizing CSS. Five simple steps! 
Optimizing the web. Start with the images! 
More on CSS Optimization 


]]>
				Why should I optimize CSS?
In fact how and why should I optimize CSS is the right question. Actually CSS is simply one ore more files loaded from the server to the client, usually a browser, with CSS specific rules that must be applied by the browser to the web page you’re seeing. That’s in general. Of course there are exceptions when CSS can be inline or added directly to the HTML tags, which is bad practice because thus the HTML markup becomes larger and even worse the browser cannot cache it and than load it quickly. In fact that’s why usually the CSS of a web page is put in one single file. Primary because that makes only one request to the server and in second hand because it can be cached by the browser.
Just because the nature of the CSS is that firstly it’s loaded and than executed one of the primary techniques of optimizing it is to make it smaller and therefore load faster. There are several methods of doing so. Enabling GZIP support of the web server and minifying the file are the most common ones. But one of the tricks you cannot optimizing just for second is using the so called CSS sprites.
CSS sprites
What are these? To answer this question I’ll simply try to give you an example. Let’s assume there are three CSS classes each one with its own background image. This makes four requests to the server. One for the CSS file and one per every background image. But what we’d like to achieve is to make less requests as we can. Than one of the things we can do is to make one single image and to change only the background-position CSS property to position it on the right place and to make it appear correctly.
Be careful! When you join all of the images into one single CSS sprite you may add one class with that background-image and every other class with only background-position property. Than every DOM element with that background must have both class names. Only than you can be sure the server will make two requests. One for the CSS file and one for the sprite.
base64 to encode images
In other hand most of the web projects are pretty big, and unfortunately it’s too difficult to make only one single sprite just because it’s too difficult to manage it after the project has become very large. That’s why mostly in the practice there are several sprites for the main components. But the problem is that again there are more HTTP requests.
Is there any way to make only one request?
Yes there is. Simply by converting your CSS sprite into a base64 encoded image. In breve base64 is an encoding where you can practically make any data into a string. Thus the image can be represented by a string containing the same information as the image. Hopefully most of the browser, except of course MSIE, does read the so called data urls, or:

<img src="data:image/png;base64,..... " />

and that’s enough to get started with base64 and the single request. The sprite has become a string!
CSS and base64
The natural question is now how to merge all this? You now have one CSS file with one or more sprites. Than you can convert them into a base64 encoded strings and put them all into the CSS.
There is a problem, of course, what happens with MSIE. As I said before MSIE doesn’t read base64 encoded images. Hopefully there is a solution described very well by Stoyan Stefanov in his blog post here.
Finally …
now there is only one request and everything works pretty fine. This technique can be really helpful to someone who’s trying to optimize the CSS performance to the limits.

Related posts:

When you should use base64 for images 
Optimizing CSS. Five simple steps! 
Optimizing the web. Start with the images! 
More on CSS Optimization 


]]>
			/2010/02/05/css-sprites-go-beyond-the-limits-with-base64/feed/
		3
		
		
		
		/2010/01/21/what%e2%80%99s-groovy-in-firebug-1-5/
		/2010/01/21/what%e2%80%99s-groovy-in-firebug-1-5/#respond
		Thu, 21 Jan 2010 08:14:48 +0000
		
				
		
		
		
		
		
		
		

		/?p=917
		Continue reading What’s groovy in Firebug 1.5 →


Related posts:

Profiling JavaScript with Firebug. console.profile() & console.time()! 
Firebug’s console.time() accuracy 
Does Firefox play mp4 h.264 within the HTML5 video tag? 
HTML5 geolocation – What If the User Doesn’t Share His Position? 


]]>
				Now Firebug 1.5 is out in the wild. What really impressed me is the significant difference between the last version and the really user friendly interface it gives.

One of my favorite features is that you can now sort the different columns in the Net panel. Now you can clearly see what’s the biggest component and what makes more traffic. This helps a lot once you decide to optimize the web page you’re watching.
Another good tool is that you can see the computed style, which however is only for Firefox and gives you partial information about all styles in different browsers, but it’s useful though.
I was pretty impressed by this version and I’d like to recommend it!

Related posts:

Profiling JavaScript with Firebug. console.profile() & console.time()! 
Firebug’s console.time() accuracy 
Does Firefox play mp4 h.264 within the HTML5 video tag? 
HTML5 geolocation – What If the User Doesn’t Share His Position? 


]]>
			/2010/01/21/what%e2%80%99s-groovy-in-firebug-1-5/feed/
		0
		
		
		
		/2010/01/12/faster-html-why-not/
		/2010/01/12/faster-html-why-not/#respond
		Tue, 12 Jan 2010 06:08:08 +0000
		
				
		
		
		
		
		
		
		
		
		
		
		
		
		

		/?p=875
		Continue reading Faster HTML! Why not? →


Related posts:

HTML Tag Semantics. STRONG vs. B! 
Optimizing OpenLayers. Make it smaller and faster! 
Send Html Mails with Zend_Mail 
HTML Tags: <base> 


]]>
				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.
2. Use div elements instead of tables when possible.
This is the second thing you can do to speed up your site. The simple reason to do that is because the DIV element doesn’t need so much markup as a TABLE element. When widely used in a page – imaging thousands of tables this can be a disaster. Remember the first thing is to make the text you send to the server as small as possible. In that point I should say that not only the tables to div switch is enough. Always prefer smaller tags and constructions. This is a bit difficult. Some experienced web developers can construct the same page with less HTML markup than newbies, but that depends of your level of experience.
3. Make it ugly – just to spend some space.
Your code is beautifully organized and when viewing the source everyone is excited! That was a mistake I used to make in my early projects. Why we thing somebody will take a look of the source code? Why we thing somebody’s using view-source option? Because we’re sick minded web developers. Nobody cares about your well organized source code. Normal users don’t look at it! Forget about beauty! As you may remember – you should spend all the extra spaces you send to the browser. Well if well organized the source code is full of tabulations, new lines and spaces. This is not good! Well if gzip is enabled they may be spent to the client, but if not? Stop writing beautiful HTML. The first task is to make it readable and maintainable.
4. Don’t use inline styling
This cannot be cached by the browser, is difficult to maintain and is – ugly! Yeah don’t use inline styles it makes your markup larger, which yet again is bad and is difficult to maintain. Write everything in CSS files, include them from the outside and setup only the classes you need.
5. Make it maintainable
Although its important to make the HTML as small as possible, sometimes that means to make it as ugly as possible and that brings the enemy number one – unmaintainable code. After a while the change of that code is technically impossible. So use all these techniques with something in mind – make it maintainable even if that will sacrifice some optimization benefits.

Related posts:

HTML Tag Semantics. STRONG vs. B! 
Optimizing OpenLayers. Make it smaller and faster! 
Send Html Mails with Zend_Mail 
HTML Tags: <base> 


]]>
			/2010/01/12/faster-html-why-not/feed/
		0
		
		
		
		/2010/01/11/what-should-be-optimized-in-one-web-page/
		/2010/01/11/what-should-be-optimized-in-one-web-page/#comments
		Mon, 11 Jan 2010 06:29:49 +0000
		
				
		
		
		
		
		
		
		
		
		
		
		

		/?p=877
		Continue reading What should be optimized in one web page? →


Related posts:

What should I optimize first in my web page? 
php.ini for two web servers 
Optimizing the web. Start with the images! 
Few Thoughts on Web Video 


]]>
				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.

Related posts:

What should I optimize first in my web page? 
php.ini for two web servers 
Optimizing the web. Start with the images! 
Few Thoughts on Web Video 


]]>
			/2010/01/11/what-should-be-optimized-in-one-web-page/feed/
		2