unslug ca: move

1 files changed, 186 insertions, 0 deletions

diff --git a/files/ca/learn/html/howto/author_fast-loading_html_pages/index.html b/files/ca/learn/html/howto/author_fast-loading_html_pages/index.html
new file mode 100644
index 0000000000..6c683a8156
--- /dev/null
+++ b/files/ca/learn/html/howto/author_fast-loading_html_pages/index.html
@@ -0,0 +1,186 @@
+---
+title: Consells per crear pàgines HTML de càrrega ràpida
+slug: Web/Guide/HTML/_Consells_per_crear_pàgines_HTML_de_càrrega_ràpida
+tags:
+  - Advanced
+  - Guide
+  - HTML
+  - NeedsUpdate
+  - Performance
+  - Web
+translation_of: Learn/HTML/Howto/Author_fast-loading_HTML_pages
+---
+<p><span id="result_box" lang="ca"><span>Aquests consells</span> <span>es</span> <span>basen</span> <span>en el coneixement</span> <span>i</span> <span>l'experimentació</span> <span>comuna.</span></span></p>
+
+<p>Una pàgina web optimitzada no només preveu un lloc més sensible per als seus visitants, sinó que també redueix la càrrega dels servidors web i la connexió a Internet. Això pot ser crucial per als llocs d'alt volum o dels llocs que tenen un pic en el tràfic a causa de circumstàncies inusuals, com ara notícies d'última hora.</p>
+
+<p>Optimitzar el rendiment de càrrega de pàgina no és només per a contingut que serà vist pels visitants de dispositius telefònics o mòbils de banda estreta. És igual d'important que el contingut en banda ampla i pot conduir a millores espectaculars fins i tot per als seus visitants amb les connexions més ràpides.</p>
+
+<h2 id="Consells">Consells</h2>
+
+<h3 id="Reduir_el_pes_de_la_pàgina"><span class="short_text" id="result_box" lang="ca"><span>Reduir</span> <span>el pes</span> <span>de la pàgina</span></span></h3>
+
+<p>El pes de la pàgina és, de bon tros, el factor més important en el rendiment de càrrega de pàgines.</p>
+
+<p>La reducció del pes de la pàgina a través de l'eliminació d'espais en blanc i comentaris innecessaris, comunament coneguda com la reducció al mínim, i movent el script en línia i CSS en arxius externs, pot millorar el rendiment de descàrrega amb una necessitat mínima d'altres canvis en l'estructura de la pàgina.</p>
+
+<p>Eines com ara <a class="external" href="http://www.html-tidy.org">HTML Tidy</a> pot treure automàticament espais en blanc i les línies en blanc addicionals del codi HTML vàlid. Altres eines poden "comprimir" JavaScript canviant el format o per ofuscació de la font i la substitució dels identificadors llargs amb versions més curtes.</p>
+
+<h3 id="Reduir_al_mínim_el_nombre_d'arxius"><span class="short_text" id="result_box" lang="ca"><span>Reduir al</span> <span>mínim el</span> <span>nombre d'arxius</span></span></h3>
+
+<p>La reducció del nombre d'arxius que es fa referència en una pàgina web redueix el nombre de connexions <a href="/en-US/docs/HTTP" title="en-US/docs/HTTP">HTTP</a> necessaries per descarregar una pàgina.</p>
+
+<p>Depenent de la configuració de la memòria cau d'un navegador, es pot enviar una petició <code>If-Modified-Since</code> al servidor web per a cada arxiu CSS, JavaScript o imatge, preguntant si l'arxiu ha estat modificat des de l'última vegada que es va descarregar.</p>
+
+<p>En reduir el nombre d'arxius que es fa referència en una pàgina web, es redueix el temps necessari perquè aquestes peticions siguin enviades, i per les respostes que es rebin.</p>
+
+<p>Si utilitzeu moltes imatges de fons en el vostre CSS, es pot reduir la quantitat de cerques HTTP necessaries mitjançant la combinació de les imatges en una, conegut com un sprite d'imatge. A continuació, només s'aplica la mateixa imatge cada vegada que ho necessiteu per a un fons, i ajustant les coordenades x/y de manera apropiada. Aquesta tècnica funciona millor amb els elements que tenen dimensions limitades, i no funcionarà per a cada ús d'una imatge de fons. No obstant això, el menor nombre de peticions HTTP i l'emmagatzematge en memòria cau d'una sola imatge pot ajudar a reduir el temps pageload.</p>
+
+<p>L'excés de temps dedicat a la consulta de l'última modificació dels arxius de referència pot retardar la visualització inicial d'una pàgina web, ja que el navegador ha de comprovar el temps de modificació per a cada arxiu CSS o JavaScript, abans de processar la pàgina.</p>
+
+<h3 id="Reduir_la_recerca_de_dominis"><span class="short_text" id="result_box" lang="ca"><span>Reduir</span> <span>la recerca</span> <span>de dominis</span></span></h3>
+
+<p>Atès que cada domini per separat porta temps en la recerca de DNS, el temps de càrrega de la pàgina creixerà juntament amb el nombre de dominis independents que apareguin en link(s) CSS i src(es) JavaScript i imatge.</p>
+
+<p>Això no sempre és pràctic; no obstant això, sempre s'ha de tenir en compte d'utilitzar només el nombre mínim necessari dels diferents dominis en les vostres pàgines.</p>
+
+<h3 id="Contingut_reutilitzat_en_memòria_cau"><span class="short_text" id="result_box" lang="ca"><span>Contingut</span> <span>reutilitzat</span> <span>en memòria cau</span></span></h3>
+
+<p>Assegureu-vos que qualsevol contingut que es pugui emmagatzemar en memòria cau, s'emmagatzemi en memòria cau, i amb els temps de caducitat apropiades.</p>
+
+<p>En concret, presteu atenció a la capçalera <code>Last-Modified</code>. Permet d'una manera eficient l'emmagatzematge en memòria cau de la pàgina; per mitjà d'aquesta capçalera, la informació es transmet a l'agent d'usuari sobre l'arxiu que vol carregar, com quan es va modificar per última vegada. La majoria dels servidors web afegeixen automàticament la capçalera <code>Last-Modified</code> a pàgines estàtiques (per exemple <code>.html, .css</code>), d'acord amb la data d'última modificació emmagatzemada en el sistema d'arxius. Amb les pàgines dinàmiques (per exemple, <code>.php, .aspx</code>), això, per descomptat, no es pot fer, i la capçalera no s'envia.</p>
+
+<p>Així, en particular, per a les pàgines que es generen de forma dinàmica, una mica de recerca sobre aquest tema és beneficiós. Pot ser una mica complicat, però s'estalviarà molt en les sol·licituds de pàgina en les pàgines que normalment no serien emmagatzemades en memòria cau.</p>
+
+<p>Més informació:</p>
+
+<ol>
+ <li><a class="external" href="http://fishbowl.pastiche.org/2002/10/21/http_conditional_get_for_rss_hackers">HTTP Conditional Get for RSS Hackers</a></li>
+ <li><a class="external" href="http://annevankesteren.nl/archives/2005/05/http-304">HTTP 304: Not Modified</a></li>
+ <li><a class="external" href="http://en.wikipedia.org/wiki/HTTP_ETag">HTTP ETag on Wikipedia</a></li>
+ <li><a class="external" href="http://www.w3.org/Protocols/rfc2616/rfc2616-sec13.html">Caching in HTTP</a></li>
+</ol>
+
+<h3 id="Ordenar_de_manera_òptima_els_components_de_la_pàgina">Ordenar de manera òptima els components de la pàgina</h3>
+
+<p>Descarregar el contingut de la pàgina en primer lloc, juntament amb qualsevol CSS o JavaScript que pugui ser necessàri per a la seva visualització inicial, de manera que l'usuari obté una resposta aparent més ràpida durant la càrrega de les pàgines. Aquest contingut és normalment de text, i per tant pot beneficiar-se de la compressió del text en trànsit, proporcionant així una resposta fins i tot més ràpida per a l'usuari.</p>
+
+<p>Cap característica dinàmica que requereixi la pàgina per completar la càrrega abans de ser utilitzada, ha de ser desactivada inicialment, i només es permet després que la pàgina s'hagi carregat. Això farà que el JavaScript es carregui després del contingut de la pàgina, el que millorarà l'aspecte general de la càrrega de la pàgina.</p>
+
+<h3 id="Reduce_the_number_of_inline_scripts" name="Reduce_the_number_of_inline_scripts">Reduir el nombre de scripts en línia</h3>
+
+<p>Els scripts en línia poden ser costosos per a la càrrega de la pàgina, ja que l'analitzador ha d'assumir que un script en línia podria modificar l'estructura de la pàgina, mentre que l'anàlisi està en curs. Reduir l'ús de scripts en línia en general, i reduir l'ús de <code>document.write()</code> per a continguts de sortida en particular, pot millorar la càrrega total de la pàgina. Utilitzeu mètodes moderns d'<a href="https://developer.mozilla.org/en-US/docs/AJAX">AJAX</a> per manipular el contingut de la pàgina per als navegadors moderns, en lloc dels antics enfocaments basats en <code>document.write()</code>.</p>
+
+<h3 id="Utilitzar_CSS_modern_i_marcat_vàlid"><span class="short_text" id="result_box" lang="ca"><span>Utilitzar</span> <span>CSS</span> <span>modern</span> <span>i</span> <span>marcat</span> <span>vàlid</span></span></h3>
+
+<p>L'ús de CSS modern redueix la quantitat de marcat, pot reduir la necessitat d'imatges (spacer), en termes de disseny, i molt sovint pot substituir les imatges de text estilitzat - el "cost" és molt més que l'equivalent de text-i-CSS.</p>
+
+<p>L'ùs del marcat vàlid té altres avantatges. En primer lloc, els navegadors no tenen necessitat de dur a terme la correcció d'errors a l'analitzar el codi HTML (això és, a part de la qüestió filosòfica, de si s'ha de permetre la variació de format a l'entrada de l'usuari, i després mitjançant programació "corregir" o normalitzar aquest o si, en canvi, fer complir un estricte format d'entrada, no tolerància).</p>
+
+<p>D'altra banda, el marcat vàlid permet el lliure ús d'altres eines les quals poden pre-processar les vostres pàgines web. Per exemple, <a href="http://tidy.sourceforge.net/">HTML Tidy</a> pot eliminar espais en blanc i les etiquetes opcionals de tancament; però, es negarà a executar una pàgina amb greus errors de marcat.</p>
+
+<h3 id="Part_del_teu_contingut">Part del teu contingut</h3>
+
+<p>Les taules de dissenys són un mètode llegat que no ha de ser utilitzat més. Dissenys que utilitzen blocs {{HTMLElement ("div")}}, i en un futur pròxim, <a href="/en-US/docs/CSS/Using_CSS_multi-column_layouts" title="en-US/docs/CSS3_Columns">CSS3 Multi-column Layout</a> o <a href="/en-US/docs/Using_flexbox" title="en-US/docs/Using_flexbox">CSS3 Flexible Box Layout</a>, s'han d'utilitzar al seu lloc.</p>
+
+<p>Les taules encara es consideren marcat vàlid, però han de ser utilitzades per a la visualització de dades tabulars. Per ajudar al navegador a processar la vostre pàgina més ràpidament, heu d'evitar niar les vostres taules.</p>
+
+<p>En lloc de niar profundament les taules com en:</p>
+
+<pre>&lt;TABLE&gt;
+  &lt;TABLE&gt;
+    &lt;TABLE&gt;
+          ...
+    &lt;/TABLE&gt;
+  &lt;/TABLE&gt;
+&lt;/TABLE&gt;</pre>
+
+<p><span class="short_text" id="result_box" lang="ca"><span>utilitzar</span> <span>taules no</span> <span>niats</span> <span>o</span> <span>divs</span> <span>com</span> <span>a</span></span>:</p>
+
+<pre>&lt;TABLE&gt;...&lt;/TABLE&gt;
+&lt;TABLE&gt;...&lt;/TABLE&gt;
+&lt;TABLE&gt;...&lt;/TABLE&gt;
+</pre>
+
+<p>Veure: <a class="external" href="http://www.w3.org/TR/css3-multicol/" title="http://www.w3.org/TR/css3-multicol/">CSS3 Multi-column Layout Spec</a> i <a class="external" href="http://www.w3.org/TR/css3-flexbox/" title="http://www.w3.org/TR/css3-flexbox/">CSS3 Flexible Box Layout</a></p>
+
+<h3 id="Minimitzar_i_comprimir_recursos_SVG">Minimitzar i comprimir recursos SVG</h3>
+
+<p>SVG produït per la majoria de les aplicacions de dibuix, sovint conté metadades innecessaries que es poden treure. Configureu els servidors per aplicar la compressió gzip per als recursos SVG.</p>
+
+<h3 id="Especificar_les_mides_de_les_imatges_i_taules"><span class="short_text" id="result_box" lang="ca"><span>Especificar</span> <span>les mides de les</span> <span>imatges</span> <span>i</span> <span>taules</span></span></h3>
+
+<p>Si el navegador pot determinar immediatament l'altura i/o amplada de les vostres imatges i taules, serà capaç de mostrar una pàgina web sense haver de reorganitzar el contingut. Això no només accelera la visualització de la pàgina, sinó que evita els molestos canvis en el disseny d'una pàgina quan la pàgina completa la càrrega. Per aquesta raó, <code>height</code> i <code>width</code> s'han d'especificar per a les imatges, sempre que sigui possible.</p>
+
+<p><span id="result_box" lang="ca"><span>Les</span> <span>taules</span> <span>han d'utilitzar la combinació CSS</span> <span>selector:propietat</span><span>:</span></span></p>
+
+<pre>  table-layout: fixed;
+</pre>
+
+<p>i ha de precisar les amplades de les columnes utilitzant les etiquetes HTML <code>COL</code> i <code>COLGROUP</code>.</p>
+
+<h3 id="Trieu_els_vostres_requisits_d'agent_d'usuari_sàviament">Trieu els vostres requisits d'agent d'usuari sàviament</h3>
+
+<p>Per aconseguir les millores més importants en el disseny de la pàgina, assegureu-vos que els requisits raonables d'agent d'usuari s'especifiquin en els projectes. No requereix que el seu contingut aparegui un píxel perfecte en tots els navegadors, especialment no en els navegadors de versions més antigues.</p>
+
+<p>L'ideal és que, els requisits mínims bàsics s'han de basar en la consideració dels navegadors moderns que suporten les normes pertinents. Això pot incloure les versions recents de Firefox, Internet Explorer, Google Chrome, Opera i Safari.</p>
+
+<p>Recordeu, però, que molts dels consells que apareixen en aquest article són tècniques de sentit comú que s'apliquen a qualsevol agent d'usuari, i que es poden aplicar a qualsevol pàgina web, independentment dels requisits de compatibilitat amb els navegadors.</p>
+
+<h2 id="Example_page_structure" name="Example_page_structure">Exemple de l'estructura d'una pàgina</h2>
+
+<p>· <code>HTML</code></p>
+
+<dl>
+ <dd>· <code>HEAD</code></dd>
+</dl>
+
+<dl>
+ <dd>
+ <dl>
+  <dd>· <code>LINK </code>...<br>
+  arxius CSS necessaris per l'aparença de la pàgina. Minimitzar el nombre d'arxius per el rendiment, mentre es manté CSS no relacionat en arxius separats per al manteniment.</dd>
+ </dl>
+ </dd>
+</dl>
+
+<dl>
+ <dd>
+ <dl>
+  <dd>· <code>SCRIPT </code>...<br>
+  arxius JavaScript per a funcions requerides durant la càrrega de la pàgina, però no qualsevol DHTML que només es pot executar després de càrrega de la pàgina.</dd>
+  <dd>Minimitzar el nombre d'arxius per el rendiment, mentre es manté JavaScript no relacionat en arxius separats per al manteniment.</dd>
+ </dl>
+ </dd>
+</dl>
+
+<dl>
+ <dd>· <code>BODY</code></dd>
+ <dd>· Contingut de la pàgina, visible per a l'usuari, en trossos petits (taules/divs) que es poden visualitzar sense esperar que la pàgina completi la seva descàrrega.</dd>
+</dl>
+
+<dl>
+ <dd>
+ <dl>
+  <dd>· <code>SCRIPT </code>...<br>
+  Qualsevol script que s'utilitzarà per realitzar DHTML. El script DHTML normalment es pot executar després que la pàgina s'hagi carregat completament i tots els objectes necessaris hagin estat inicialitzats. No hi ha necessitat de carregar aquests scripts abans que el contingut de la pàgina. Això només ralenteix l'aparença inicial de la càrrega de la pàgina.</dd>
+  <dd>Minimitzar el nombre d'arxius per el rendiment, mentre es manté JavaScript no relacionat en arxius separats per al manteniment.</dd>
+  <dd>Si s'utilitzen les imatges per a efectes rollover, s'ha de carregar prèviament aquí després que el contingut de la pàgina s'hagi descarregat.</dd>
+ </dl>
+ </dd>
+</dl>
+
+<h2 id="Utilitzar_asyn_i_defer_si_és_possible">Utilitzar asyn i defer, si és possible</h2>
+
+<p>Fer que els scripts de JavaScript siguin compatibles tant amb <a href="https://developer.mozilla.org/en-US/docs/HTML/Element/script#Attributes" title="https://developer.mozilla.org/en-US/docs/HTML/Element/script">async</a> i <a href="https://developer.mozilla.org/en-US/docs/HTML/Element/script#Attributes" title="https://developer.mozilla.org/en-US/docs/HTML/Element/script">defer</a> i utilitzar <a href="https://developer.mozilla.org/en-US/docs/HTML/Element/script#Attributes" title="https://developer.mozilla.org/en-US/docs/HTML/Element/script">async</a> sempre que sigui possible, especialment si té diverses etiquetes de script. Amb això, la pàgina pot aturar el processament, mentre que encara s'estigui carregant JavaScript. En cas contrari, el navegador no renderizará res que estigui darrere de les etiquetes de script que no tinguin aquests atributs.</p>
+
+<p>Nota: Tot i que aquests atributs ens ajuden molt per a la primera vegada que es carrega una pàgina, s'han d'usar, però no dependre de que funcionarà en tots els navegadors. Si seguiu totes les pautes per fer un bon codi JavaScript, no hi ha necessitat de canviar el codi.</p>
+
+<h2 id="Enllaços_relacionats"><span class="short_text" id="result_box" lang="ca"><span>Enllaços</span> <span>relacionats</span></span></h2>
+
+<ul>
+ <li>Llibre: <a class="external" href="http://www.websiteoptimization.com/">"Speed Up Your Site" by Andy King</a></li>
+ <li><span id="result_box" lang="ca"><span>Les</span> <span>excel·lents i</span> <span>molt</span> <span>completes</span></span> <a class="external" href="http://developer.yahoo.com/performance/rules.html" title="http://developer.yahoo.com/performance/rules.html">Best Practices for Speeding Up Your Web Site</a> (Yahoo!)</li>
+ <li><span id="result_box" lang="ca"><span>Eines</span> <span>per a l'anàlisi</span> <span>i</span> <span>l'optimització</span> <span>del rendiment</span></span> : <a href="https://developers.google.com/speed/pagespeed/" title="https://developers.google.com/speed/pagespeed/">Google PageSpeed Tools</a></li>
+ <li><a href="/en-US/docs/Tools/Paint_Flashing_Tool">Paint Flashing Tool</a></li>
+</ul>