Menu
When declaring external files in HTML such as .css or .js, is there a correct order in which to place the link's attributes? For example:
<link rel="stylesheet" type="text/css" href="../_css/style.css">
or
<link type="text/css" rel="stylesheet" href="../_css/style.css">
or
<link href="../_css/style.css" type="text/css" rel="stylesheet">
Does this matter?
Same question goes for attributes for linking to external JavaScript files.
Thanks for your time.
640
No, attribute order is irrelevant.
85
Any order is valid HTML but just out of curiosity I wondered whether the external file would get downloaded sooner if the href attribute was first.
I created 3 documents each one had a <link> with the href attribute positions differently, it took 200 extra attributes to be able to see a difference. In Chrome at least, the sooner you put the href the better. rel should also be put sooner as this helps the browser to decide whether to download the file.
Delay range from ("Empty Cache and Hard Reload" to start "Queueing") * 10
href before extra attributes : 17.5ms - 23.5mshref after extra attributes : 21.5ms - 27.5msEven with 200 additional attributes the extra delay was a maximum of 10ms (27.5-17.5).
When working on the front-end I always believed there was no such thing as an useless micro-optimisation, but this really is one.
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css?id=none">
</head>
<body>
</body>
</html><html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css?id=before" data-attr-1="1" data-attr-2="2" data-attr-3="3" data-attr-4="4" data-attr-5="5" data-attr-6="6" data-attr-7="7" data-attr-8="8" data-attr-9="9" data-attr-10="10" data-attr-11="11" data-attr-12="12" data-attr-13="13" data-attr-14="14" data-attr-15="15" data-attr-16="16" data-attr-17="17" data-attr-18="18" data-attr-19="19" data-attr-20="20" data-attr-21="21" data-attr-22="22" data-attr-23="23" data-attr-24="24" data-attr-25="25" data-attr-26="26" data-attr-27="27" data-attr-28="28" data-attr-29="29" data-attr-30="30" data-attr-31="31" data-attr-32="32" data-attr-33="33" data-attr-34="34" data-attr-35="35" data-attr-36="36" data-attr-37="37" data-attr-38="38" data-attr-39="39" data-attr-40="40" data-attr-41="41" data-attr-42="42" data-attr-43="43" data-attr-44="44" data-attr-45="45" data-attr-46="46" data-attr-47="47" data-attr-48="48" data-attr-49="49" data-attr-50="50" data-attr-51="51" data-attr-52="52" data-attr-53="53" data-attr-54="54" data-attr-55="55" data-attr-56="56" data-attr-57="57" data-attr-58="58" data-attr-59="59" data-attr-60="60" data-attr-61="61" data-attr-62="62" data-attr-63="63" data-attr-64="64" data-attr-65="65" data-attr-66="66" data-attr-67="67" data-attr-68="68" data-attr-69="69" data-attr-70="70" data-attr-71="71" data-attr-72="72" data-attr-73="73" data-attr-74="74" data-attr-75="75" data-attr-76="76" data-attr-77="77" data-attr-78="78" data-attr-79="79" data-attr-80="80" data-attr-81="81" data-attr-82="82" data-attr-83="83" data-attr-84="84" data-attr-85="85" data-attr-86="86" data-attr-87="87" data-attr-88="88" data-attr-89="89" data-attr-90="90" data-attr-91="91" data-attr-92="92" data-attr-93="93" data-attr-94="94" data-attr-95="95" data-attr-96="96" data-attr-97="97" data-attr-98="98" data-attr-99="99" data-attr-100="100" data-attr-101="101" data-attr-102="102" data-attr-103="103" data-attr-104="104" data-attr-105="105" data-attr-106="106" data-attr-107="107" data-attr-108="108" data-attr-109="109" data-attr-110="110" data-attr-111="111" data-attr-112="112" data-attr-113="113" data-attr-114="114" data-attr-115="115" data-attr-116="116" data-attr-117="117" data-attr-118="118" data-attr-119="119" data-attr-120="120" data-attr-121="121" data-attr-122="122" data-attr-123="123" data-attr-124="124" data-attr-125="125" data-attr-126="126" data-attr-127="127" data-attr-128="128" data-attr-129="129" data-attr-130="130" data-attr-131="131" data-attr-132="132" data-attr-133="133" data-attr-134="134" data-attr-135="135" data-attr-136="136" data-attr-137="137" data-attr-138="138" data-attr-139="139" data-attr-140="140" data-attr-141="141" data-attr-142="142" data-attr-143="143" data-attr-144="144" data-attr-145="145" data-attr-146="146" data-attr-147="147" data-attr-148="148" data-attr-149="149" data-attr-150="150" data-attr-151="151" data-attr-152="152" data-attr-153="153" data-attr-154="154" data-attr-155="155" data-attr-156="156" data-attr-157="157" data-attr-158="158" data-attr-159="159" data-attr-160="160" data-attr-161="161" data-attr-162="162" data-attr-163="163" data-attr-164="164" data-attr-165="165" data-attr-166="166" data-attr-167="167" data-attr-168="168" data-attr-169="169" data-attr-170="170" data-attr-171="171" data-attr-172="172" data-attr-173="173" data-attr-174="174" data-attr-175="175" data-attr-176="176" data-attr-177="177" data-attr-178="178" data-attr-179="179" data-attr-180="180" data-attr-181="181" data-attr-182="182" data-attr-183="183" data-attr-184="184" data-attr-185="185" data-attr-186="186" data-attr-187="187" data-attr-188="188" data-attr-189="189" data-attr-190="190" data-attr-191="191" data-attr-192="192" data-attr-193="193" data-attr-194="194" data-attr-195="195" data-attr-196="196" data-attr-197="197" data-attr-198="198" data-attr-199="199" data-attr-200="200">
</head>
<body>
</body>
</html><html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" data-attr-1="1" data-attr-2="2" data-attr-3="3" data-attr-4="4" data-attr-5="5" data-attr-6="6" data-attr-7="7" data-attr-8="8" data-attr-9="9" data-attr-10="10" data-attr-11="11" data-attr-12="12" data-attr-13="13" data-attr-14="14" data-attr-15="15" data-attr-16="16" data-attr-17="17" data-attr-18="18" data-attr-19="19" data-attr-20="20" data-attr-21="21" data-attr-22="22" data-attr-23="23" data-attr-24="24" data-attr-25="25" data-attr-26="26" data-attr-27="27" data-attr-28="28" data-attr-29="29" data-attr-30="30" data-attr-31="31" data-attr-32="32" data-attr-33="33" data-attr-34="34" data-attr-35="35" data-attr-36="36" data-attr-37="37" data-attr-38="38" data-attr-39="39" data-attr-40="40" data-attr-41="41" data-attr-42="42" data-attr-43="43" data-attr-44="44" data-attr-45="45" data-attr-46="46" data-attr-47="47" data-attr-48="48" data-attr-49="49" data-attr-50="50" data-attr-51="51" data-attr-52="52" data-attr-53="53" data-attr-54="54" data-attr-55="55" data-attr-56="56" data-attr-57="57" data-attr-58="58" data-attr-59="59" data-attr-60="60" data-attr-61="61" data-attr-62="62" data-attr-63="63" data-attr-64="64" data-attr-65="65" data-attr-66="66" data-attr-67="67" data-attr-68="68" data-attr-69="69" data-attr-70="70" data-attr-71="71" data-attr-72="72" data-attr-73="73" data-attr-74="74" data-attr-75="75" data-attr-76="76" data-attr-77="77" data-attr-78="78" data-attr-79="79" data-attr-80="80" data-attr-81="81" data-attr-82="82" data-attr-83="83" data-attr-84="84" data-attr-85="85" data-attr-86="86" data-attr-87="87" data-attr-88="88" data-attr-89="89" data-attr-90="90" data-attr-91="91" data-attr-92="92" data-attr-93="93" data-attr-94="94" data-attr-95="95" data-attr-96="96" data-attr-97="97" data-attr-98="98" data-attr-99="99" data-attr-100="100" data-attr-101="101" data-attr-102="102" data-attr-103="103" data-attr-104="104" data-attr-105="105" data-attr-106="106" data-attr-107="107" data-attr-108="108" data-attr-109="109" data-attr-110="110" data-attr-111="111" data-attr-112="112" data-attr-113="113" data-attr-114="114" data-attr-115="115" data-attr-116="116" data-attr-117="117" data-attr-118="118" data-attr-119="119" data-attr-120="120" data-attr-121="121" data-attr-122="122" data-attr-123="123" data-attr-124="124" data-attr-125="125" data-attr-126="126" data-attr-127="127" data-attr-128="128" data-attr-129="129" data-attr-130="130" data-attr-131="131" data-attr-132="132" data-attr-133="133" data-attr-134="134" data-attr-135="135" data-attr-136="136" data-attr-137="137" data-attr-138="138" data-attr-139="139" data-attr-140="140" data-attr-141="141" data-attr-142="142" data-attr-143="143" data-attr-144="144" data-attr-145="145" data-attr-146="146" data-attr-147="147" data-attr-148="148" data-attr-149="149" data-attr-150="150" data-attr-151="151" data-attr-152="152" data-attr-153="153" data-attr-154="154" data-attr-155="155" data-attr-156="156" data-attr-157="157" data-attr-158="158" data-attr-159="159" data-attr-160="160" data-attr-161="161" data-attr-162="162" data-attr-163="163" data-attr-164="164" data-attr-165="165" data-attr-166="166" data-attr-167="167" data-attr-168="168" data-attr-169="169" data-attr-170="170" data-attr-171="171" data-attr-172="172" data-attr-173="173" data-attr-174="174" data-attr-175="175" data-attr-176="176" data-attr-177="177" data-attr-178="178" data-attr-179="179" data-attr-180="180" data-attr-181="181" data-attr-182="182" data-attr-183="183" data-attr-184="184" data-attr-185="185" data-attr-186="186" data-attr-187="187" data-attr-188="188" data-attr-189="189" data-attr-190="190" data-attr-191="191" data-attr-192="192" data-attr-193="193" data-attr-194="194" data-attr-195="195" data-attr-196="196" data-attr-197="197" data-attr-198="198" data-attr-199="199" data-attr-200="200" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css?id=after">
</head>
<body>
</body>
</html>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
