{"id":19,"date":"2013-01-09T13:13:24","date_gmt":"2013-01-09T13:13:24","guid":{"rendered":"http:\/\/multimedia.uoc.edu\/blogs\/htmlcss\/?p=19"},"modified":"2015-03-04T12:21:42","modified_gmt":"2015-03-04T11:21:42","slug":"rendimiento","status":"publish","type":"post","link":"https:\/\/multimedia.uoc.edu\/blogs\/htmlcss\/css\/rendimiento\/","title":{"rendered":"Rendimiento"},"content":{"rendered":"<p>[\u00daltima edici\u00f3n: 8\/9\/2014]<\/p>\n<p>Un texto introductorio\/motivacional sobre el tema es <a href=\"http:\/\/bradfrostweb.com\/blog\/post\/performance-as-design\/\" hreflang=\"en\">Performance As Design<\/a> (Brad Frost, 28 de enero, 2013). Otra buena introducci\u00f3n sobre el tema, que entra un poco m\u00e1s en detalles t\u00e9cnicos, es <a href=\"http:\/\/alistapart.com\/article\/improving-ux-through-front-end-performance\" hreflang=\"en\">Improving UX Through Front-End Performance<\/a> (<cite lang=\"en\">A List Apart<\/cite>, 12 de marzo, 2013). Otro recurso exhaustivo es <a href=\"https:\/\/kinsta.com\/learn\/page-speed\/\" hreflang=\"en\">A Beginner\u2019s Guide to Website Speed Optimization<\/a> (septiembre, 2014).<\/p>\n<p><a href=\"http:\/\/csswizardry.com\/2013\/01\/front-end-performance-for-web-designers-and-front-end-developers\/\" hreflang=\"en\">Front-end performance for web designers and front-end developers<\/a> (Harry Roberts, 21 de enero, 2013)<\/p>\n<p><a href=\"https:\/\/speakerdeck.com\/jonrohan\/githubs-css-performance\" hreflang=\"en\">GitHub&#8217;s CSS Performance<\/a> (5 de diciembre, 2012) Una presentaci\u00f3n sobre rendimiento de CSS (y HTML) en sitios <em>grandes<\/em> (con miles de selectores CSS). Dispon\u00e9is del audio sincronizado con las diapositivas en el siguiente v\u00eddeo:<\/p>\n<p><iframe loading=\"lazy\" title=\"GitHub&#039;s CSS Performance\" src=\"https:\/\/player.vimeo.com\/video\/54990931?dnt=1&amp;app_id=122963\" width=\"640\" height=\"480\" frameborder=\"0\" allow=\"autoplay; fullscreen; picture-in-picture; clipboard-write\"><\/iframe><\/p>\n<p><a href=\"http:\/\/www.webperformancetoday.com\/2013\/01\/31\/web-performance-101-developers\/\" hreflang=\"en\">Web Performance 101: An opinionated guide to the 22 links every developer should read<\/a> (31 de enero, 2013)<\/p>\n<p><a href=\"http:\/\/www.netmagazine.com\/tutorials\/make-your-sites-load-faster\" hreflang=\"en\">Make your sites load faster<\/a> (.net magazine, febrero de 2013)<\/p>\n<p><a href=\"http:\/\/browserdiet.com\/es\/\">C\u00f3mo perder peso en el navegador (browserdiet.com\/es)<\/a><\/p>\n<p><a href=\"http:\/\/www.webmonkey.com\/2013\/03\/put-your-site-on-a-diet-with-googles-image-shrinking-webp-format\/\" hreflang=\"en\">Put Your Site on a Diet With Google\u2019s Image-Shrinking \u2018WebP\u2019 Format<\/a> (<cite>Webmonkey<\/cite>, 13 de marzo de 2013)<\/p>\n<p>Un buen recurso que entra en detalles t\u00e9cnicos y de implementaci\u00f3n son las <a href=\"http:\/\/developer.yahoo.com\/performance\/rules.html\" hreflang=\"en\">Best Practices for Speeding Up Your Web Site<\/a> de la <cite lang=\"en\">Yahoo! Developer Network<\/cite><\/p>\n<p><a title=\"Responsive Design is Not About Screen Sizes Any More\" href=\"http:\/\/speckyboy.com\/2013\/09\/11\/responsive-design-is-not-about-screen-sizes-any-more\/\" hreflang=\"en\">Responsive Design is Not About Screen Sizes Any More<\/a> (<cite>speckyboy<\/cite>, 11 de septiembre de 2013)<\/p>\n<p><a title=\"Image Compression for Web Developers - HTML5 Rocks\" href=\"http:\/\/www.html5rocks.com\/en\/tutorials\/speed\/img-compression\/\" hreflang=\"en\">Image Compression for Web Developers<\/a> (<cite lang=\"en\">HTML Rocks<\/cite>, 23 de septiembre de 2013)<\/p>\n<p>Una de las t\u00e9cnicas que pueden usarse para acelerar el momento en que el navegador comienza a mostrar las p\u00e1ginas (y as\u00ed incrementar la velocidad <em>percibida<\/em> a la que se muestra la p\u00e1gina) es incluir en l\u00ednea en la p\u00e1gina el CSS que corresponde a la parte superior de la p\u00e1gina y despu\u00e9s utilizar una t\u00e9cnica llamada <i lang=\"en\">lazy loading<\/i> para cargar el resto de CSS. Esto se explica con detalle en <a href=\"http:\/\/css-tricks.com\/authoring-critical-fold-css\/?scid=social28358816\" hreflang=\"en\">Authoring Critical Above-the-Fold CSS<\/a> (<cite lang=\"en\">CSS-Tricks<\/cite>, julio de 2014). Ten\u00e9is una presentaci\u00f3n sobre c\u00f3mo lo hacen en el diario ingl\u00e9s <cite lang=\"en\">The Guardian<\/cite> en <a href=\"https:\/\/speakerdeck.com\/patrickhamann\/breaking-news-at-1000ms-front-trends-2014\" hreflang=\"en\">https:\/\/speakerdeck.com\/patrickhamann\/breaking-news-at-1000ms-front-trends-2014<\/a> (mayo de 2014).<\/p>\n<h2>Herramientas<\/h2>\n<ul>\n<li><a href=\"https:\/\/developers.google.com\/speed\/pagespeed\/\" hreflang=\"en\">Google PageSpeed Tools<\/a><\/li>\n<li><a href=\"http:\/\/developer.yahoo.com\/yslow\/\" hreflang=\"en\">Yahoo! YSlow<\/a<\/li>\n<li><a href=\"http:\/\/www.smushit.com\/ysmush.it\/\">Smush.it\u2122<\/a> y <a href=\"http:\/\/tinypng.org\/\" hreflang=\"en\">tinypng.org<\/a> son servicios web para la optimizaci\u00f3n de im\u00e1genes<\/li>\n<li><a href=\"http:\/\/www.webpagetest.org\/\" hreflang=\"en\">webpagetest.org<\/a><\/li>\n<li><a href=\"http:\/\/www.sitepoint.com\/improve-page-performance-font-loader\/\" hreflang=\"en\">How to Improve Page Performance with a Font Loader<\/a><\/li>\n<\/ul>\n<p><\/p>","protected":false},"excerpt":{"rendered":"<p>[\u00daltima edici\u00f3n: 8\/9\/2014] Un texto introductorio\/motivacional sobre el tema es Performance As Design (Brad Frost, 28 de enero, 2013). Otra buena introducci\u00f3n sobre el tema, que entra un poco m\u00e1s en detalles t\u00e9cnicos, es Improving UX Through Front-End Performance (A List Apart, 12 de marzo, 2013). Otro recurso exhaustivo es A Beginner\u2019s Guide to Website &hellip; <\/p>\n<p class=\"link-more\"><a href=\"https:\/\/multimedia.uoc.edu\/blogs\/htmlcss\/css\/rendimiento\/\" class=\"more-link\">Seguir leyendo<span class=\"screen-reader-text\"> \u00abRendimiento\u00bb<\/span><\/a><\/p>\n","protected":false},"author":4,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3,4,7],"tags":[],"class_list":["post-19","post","type-post","status-publish","format-standard","hentry","category-css","category-html","category-rendimiento","entry"],"_links":{"self":[{"href":"https:\/\/multimedia.uoc.edu\/blogs\/htmlcss\/wp-json\/wp\/v2\/posts\/19","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/multimedia.uoc.edu\/blogs\/htmlcss\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/multimedia.uoc.edu\/blogs\/htmlcss\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/multimedia.uoc.edu\/blogs\/htmlcss\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/multimedia.uoc.edu\/blogs\/htmlcss\/wp-json\/wp\/v2\/comments?post=19"}],"version-history":[{"count":35,"href":"https:\/\/multimedia.uoc.edu\/blogs\/htmlcss\/wp-json\/wp\/v2\/posts\/19\/revisions"}],"predecessor-version":[{"id":444,"href":"https:\/\/multimedia.uoc.edu\/blogs\/htmlcss\/wp-json\/wp\/v2\/posts\/19\/revisions\/444"}],"wp:attachment":[{"href":"https:\/\/multimedia.uoc.edu\/blogs\/htmlcss\/wp-json\/wp\/v2\/media?parent=19"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/multimedia.uoc.edu\/blogs\/htmlcss\/wp-json\/wp\/v2\/categories?post=19"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/multimedia.uoc.edu\/blogs\/htmlcss\/wp-json\/wp\/v2\/tags?post=19"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}