move "rel" attribute to end of tag

[marcobiedermann]

Moving the rel attribute to the end saves a few bytes when using gzip compression.

-rw-r--r--   1 marcobiedermann  staff  4853 May 23 20:28 after.md.gz
-rw-r--r--   1 marcobiedermann  staff  4855 May 23 20:29 before.md.gz

In this example it does only matter 2 bytes but this will increase when used in a real world website.
Because href does occur more often than rel, e. g. in a tags this will reduce the overall filesize.
I know this does not seem like a lot, but in my opinion it is a best practice.

Also Google uses this pattern:

<link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>

[scottaohara]

in my opinion, while that may be a best practice, it makes the readability of this resource more difficult.

It's the rel that is the primary defining attribute about what sort of link this is. Moving them to the end, after varied href lengths, places the wrong emphasis, as hrefs are mostly arbitrary for these examples.

I do however think it would be a good idea to add a note / section that calls out best practice for actual implementation of these elements, and their attribute order.

[joshbuchea]

@marcobiedermann while I appreciate the contribution, I have to agree with @scottaohara on this one. Any chance you'd be willing to create a note / section for this?

[joshbuchea]

Opened #98 to address this issue. Thanks guys!

[notacouch]

Can anyone explain why the placement of the head attribute has this effect?

[marcobiedermann]

@notacouch

GZIP tries to find same pattern in a text which gets compressed by referencing them instead of duplicating them.

Take a look at this video: https://www.youtube.com/watch?v=SWBkneyTyPU

By moving the href attribute to the front, the pattern of characters occur more often.

The best way to minify your code is to sort all your HTML attributes and CSS properties in the same order. Most of the time, alphabetical order will work the best.
Read this article for more information about sorting CSS selectors and compression.

I hope, I could clear some things up :)

[FlorianWendelborn]

I think this is not the task of a programmer, this should be the task of the minfier (uglyjs, etc).

[scottaohara]

a debate over who / what should be doing this isn't really relevant to the fact that this is a good practice to follow, and people should be aware of it, so that if they aren't or can't use one of those tools, they can still follow a best practice.

[FlorianWendelborn]

Of course they can, but it's essentially the same as "programmers need to name their variables a,b,c,etc. because that saves space".