{"id":3753,"date":"2017-06-02T15:49:12","date_gmt":"2017-06-02T15:49:12","guid":{"rendered":"https:\/\/marketingweb.com.mx\/blog\/?p=3753"},"modified":"2017-06-02T15:49:12","modified_gmt":"2017-06-02T15:49:12","slug":"seo-mexico-2","status":"publish","type":"post","link":"https:\/\/marketingweb.com.mx\/blog\/seo-mexico-2\/","title":{"rendered":"SEO Mexico"},"content":{"rendered":"

SEO Mexico<\/h1>\n
\"SEO<\/a>
SEO Mexico<\/em><\/figcaption><\/figure>\n

SEO Mexico<\/strong><\/p>\n

REDUCCI\u00d3N DE FICHEROS SWF (ADOBE FLASH)<\/p>\n

Categor\u00eda: Contenidos<\/p>\n

Aunque los ficheros de Adobe Flash no son concretamente im\u00e1genes, s\u00ed que es cierto que como elementos multimedia se deben un respeto, ya que existen en muchos sitios web. Los ficheros SWF est\u00e1n comprimidos de por s\u00ed gracias al sistema deflate propio de Java, por lo que al final, lo que recibimos ya est\u00e1 reducido, pero se puede reducir a\u00fan m\u00e1s gracias a 7-Zip, que comprime mejor. Para ello usaremos apparat. Es recomendable mirar en profundidad su configuraci\u00f3n.<\/p>\n

reducer -i test\\test.swf [i] Apparat — http:\/\/apparat.googlecode.com\/ [i] Launching tool: Reducer [i] Waiting for 7z … [i] Compression ratio: 18.224573% [i] Total bytes: 310 [i] Completed in 547ms.<\/p>\n

 <\/p>\n

OPTIMIZACI\u00d3N DE FUENTES CSS @FONT-FACE<\/p>\n

Categor\u00eda: Conectividad, Contenidos<\/p>\n

 <\/p>\n

Una de las novedades de CSS3\u00a0 es que permite a los navegadores cargar un fichero de fuente y as\u00ed mostrar la p\u00e1gina con los tipos de letra que el sitio web decide y no depender de las fuentes del sistema. Estas fuentes se cargan a trav\u00e9s de las hojas de estilo y, como los ficheros de fuente no suelen ser muy reducidos en tama\u00f1o, pueden perjudicar el rendimiento de carga.<\/p>\n

Hay que tener en cuenta que, aunque por defecto el c\u00f3digo del @font-face se carga en la cabecera de la p\u00e1gina, hasta que esta no acaba de pintarse en el navegador, no se ejecuta el cambio del tipo de letra.<\/p>\n

WEB PERFORMANCE OPTIMIZATION<\/p>\n

Teniendo en cuenta esto, y que gracias a JavaScript podemos modificar los estilos, podemos mejorar un c\u00f3digo tal que as\u00ed:<\/p>\n

<style type=”text\/css” media=”screen”>\u00a0 @font-face {\u00a0\u00a0 font-family: ‘WebFont’;\u00a0\u00a0 src: url(‘http:\/\/www.example.com\/webfont.eot’);\u00a0\u00a0 src: local(‘\u263a’), url(‘http:\/\/www.example.com\/webfont.woff’) format(‘woff’), url(‘http:\/\/www.example.com\/webfont.ttf’) format(‘truetype’), url(‘http:\/\/www.example.com\/webfont.svg#webfont’) format(‘svg’);\u00a0\u00a0 font-weight: normal;\u00a0\u00a0 font-style: normal;\u00a0 }\u00a0 h1 {font: 60px\/68px ‘WebFont’, Arial, sans-serif; letter-spacing: 0;}\u00a0 p {font: 18px\/27px ‘WebFont’, Arial, sans-serif;}<\/p>\n

\u00a0SEO<\/h3>\n

Por un c\u00f3digo en dos partes, donde dejaremos en la cabecera algunos estilos:<\/p>\n

 <\/p>\n

<style type=”text\/css” media=”screen”>\u00a0 h1 {font: 60px\/68px ‘WebFont’, Arial, sans-serif;letter-spacing: 0;}\u00a0 p {font: 18px\/27px ‘WebFont’, Arial, sans-serif;}<\/p>\n

 <\/p>\n

Y al final de la p\u00e1gina, cargaremos de forma retardada las fuentes, eso s\u00ed, cacheadas en un servidor est\u00e1tico para que no se tengan que descargar cada p\u00e1gina.<\/p>\n

 <\/p>\n

<script type=”text\/javascript”>\u00a0 var fuente1 = “@font-face {” +\u00a0\u00a0 ” font-family: ‘WebFont’;” +\u00a0\u00a0 ” src: url(‘http:\/\/s.example.com\/webfont.eot’);” +\u00a0\u00a0 ” src: local(‘\u263a’), url(‘http:\/\/s.example.com\/webfont.woff’) format(‘woff’), url(‘http:\/\/s.example.com\/webfont.ttf’) format(‘truetype’), url(‘http:\/\/s.example.com\/webfont.svg#webfont’) format(‘svg’);” +\u00a0\u00a0 ” font-weight: normal; font-style: normal;” +\u00a0 “}”;<\/p>\n

WEB PERFORMANCE OPTIMIZATION<\/p>\n

(function() {\u00a0\u00a0 var estilo1 = document.styleSheets[0];\u00a0\u00a0 if (“function” === typeof(estilo1.insertRule)) {\u00a0\u00a0\u00a0 estilo1.insertRule(fuente1, 0);\u00a0\u00a0 } else if (“string” === typeof(estilo1.cssText) ) {\u00a0\u00a0\u00a0 estilo1.cssText = fuente1;\u00a0\u00a0 }\u00a0 })();<\/p>\n

 <\/p>\n

Adem\u00e1s, hay que tener en cuenta que, en algunos casos, Internet Explorer tiene ciertos problemas con la carga de las fuentes, sobre todo si el sitio incluye varios JavaScript, ya que dependiendo si se ponen antes de la hoja de estilos puede bloquear la carga. En el caso \u00f3ptimo esto no ocurre lo que permite mejorar el rendimiento en cualquier situaci\u00f3n.<\/p>\n

WEB PERFORMANCE OPTIMIZATION<\/p>\n

DEVOLVER C\u00d3DIGO PARCIALMENTE<\/p>\n

\u00a0SEO Mexico<\/h3>\n

Sin duda una de las particularidades de Internet es que todos los elementos se pueden dividir en varios y de esta forma poder transmitir m\u00faltiples paquetes en momentos distintos.<\/p>\n

Gracias a esto podemos tambi\u00e9n dividir una p\u00e1gina en varios fragmentos y as\u00ed procesarla por partes, haciendo que la carga de otros elementos (como im\u00e1genes o scripts) se haga tambi\u00e9n por bloques.<\/p>\n

 <\/p>\n

FUNCI\u00d3N \u201cFLUSH()\u201d<\/p>\n

Categor\u00eda: Conectividad<\/p>\n

 <\/p>\n

La mayor\u00eda de lenguajes de programaci\u00f3n tienen una funci\u00f3n \u201cflush()\u201d que permite limpiar el buffer de salida de datos y enviarlo directamente al usuario en el momento en el que se decida.<\/p>\n

Aunque no hay muchos sitios web que lo utilicen, es muy interesante plante\u00e1rselo en momentos estrat\u00e9gicos como podr\u00eda tras el <\/head> pudiendo enviar al usuario todas las cabeceras y comenzar a descargar los scripts o CSS que haya en las cabeceras.<\/p>\n

Por norma general, se recomendar\u00eda, en una web b\u00e1sica, utilizar este sistema tras el encabezado de la p\u00e1gina, la cabecera, el men\u00fa, el contenido y el pie, enviando de esta manera los distintos bloques y pudiendo renderizarlos el navegador poco a poco.<\/p>\n

PROGRAMACI\u00d3N EN LOS CSS<\/p>\n

Aunque no es muy com\u00fan hacerlo, los ficheros CSS permiten cierto c\u00f3digo JavaScript en su interior para hacerlo algo m\u00e1s sencillo a la hora de desarrollar.<\/p>\n

De todas formas, esta aplicaci\u00f3n no es un est\u00e1ndar en todos los navegadores por lo que puede provocar algunas situaciones no deseadas cuando el sistema que ha de renderizar no sabe qu\u00e9 hacer.<\/p>\n

PROBLEMAS CON INTERNET EXPLORER<\/p>\n

Categor\u00eda: CSS, JavaScript<\/p>\n

La mayor\u00eda de problemas en la programaci\u00f3n dentro de CSS viene por versiones antiguas de Internet Explorer. Si bien es cierto que este navegador introdujo ciertas facilidades a la hora de realizar hojas de estilo semiprogramadas, es muy recomendable no utilizar estas t\u00e9cnicas.<\/p>\n

Otra de las que no parece funcionar muy bien, tambi\u00e9n en este navegador, es el uso de filtros del estilo \u201cAlphaImageLoader\u201d, ya que hacen que el consumo de recursos aumente de forma exagerada.<\/p>\n

PROGRAMACI\u00d3N DE LOS JS<\/p>\n

Sin duda cada vez m\u00e1s JavaScript se ha convertido en u lenguaje de programaci\u00f3n en el cliente que permite mucha interactividad con los servidores y con los elementos DOM del sitio web.<\/p>\n

Aunque JavaScript cada vez m\u00e1s est\u00e1 integrado con el lenguaje HTML, bien es cierto que existen muchas t\u00e9cnicas para mejorar la velocidad de procesamiento del c\u00f3digo.<\/p>\n

 <\/p>\n

OPTIMIZACI\u00d3N GENERAL PARA JAVASCRIPT<\/p>\n

Categor\u00eda: JavaScript<\/p>\n

SEO GDL<\/h3>\n

JavaScript, como cualquier otro lenguaje de programaci\u00f3n, tiene sus cosas buenas y malas, pero sobre todo, al ser un lenguaje que se puede interpretar y que se ejecuta en el navegador cliente, vale la pena aplicar una serie de reglas b\u00e1sicas.<\/p>\n

\uf0b7 Evitar las variables globales es una idea bastante buena ya que el rendimiento de dichas variables es bastante bajo. En el caso de ejecutar varios c\u00f3digos es probable que se sobrescriban dichas variables. Para ello podr\u00edamos tener elementos de este estilo que se protegen de accesos externos o la posibilidad de ser sobrescritos.<\/p>\n

miNameSpace = function() {\u00a0 var current = null;\u00a0 function init() {…}\u00a0 function change() {…}\u00a0 return {\u00a0\u00a0 init:init,\u00a0\u00a0 set:change\u00a0 } }();<\/p>\n

\uf0b7 Otro detalle importante es el uso de un c\u00f3digo lo m\u00e1s estricto posible, es decir, un c\u00f3digo que se ajuste a cualquier motor que interprete JavaScript y sea f\u00e1cilmente interpretable. Para verificar que estamos usando un c\u00f3digo correcto podemos hacer uso de herramientas como JSLint. \uf0b7 Es mejor no cambiar valores por defecto del DOM en los valores de los elementos (sobre todo en aquellos que hacen referencia a los estilos), sino modificarlos haciendo cambios en clases que se aplican a dichos elementos. Por ejemplo, podemos aplicar unos cambios tales que:<\/p>\n

WEB PERFORMANCE OPTIMIZATION<\/p>\n

 <\/p>\n

Javier Casares \u2013 http:\/\/webperformanceoptimization.es\/\u00a0 P\u00e1gina 53<\/p>\n

inputs.style.borderColor = ‘#f00’; inputs.style.borderStyle = ‘solid’; inputs.style.borderWidth = ‘1px’;<\/p>\n

O podemos hacer un cambio m\u00e1s sencillo, tal que este:<\/p>\n

inputs.className += ‘ error’;<\/p>\n

Y que esta clase \u201cerror\u201d sea la que haga el cambio en el estilo, sin modificar directamente los elementos.<\/p>\n

\uf0b7 Es mejor utilizar la anotaci\u00f3n corta para crear objetos o arrays. De esta forma, un objeto tal que este:<\/p>\n

var perro = new Object(); perro.color = ‘negro’; perro.tamano = ‘grande’;<\/p>\n

Podr\u00eda crearse mucho m\u00e1s eficiente as\u00ed:<\/p>\n

var perro = {\u00a0 color: ‘negro’,\u00a0 tamano = ‘grande’ };<\/p>\n

Con un array pasar\u00eda lo mismo. Si tenemos algo as\u00ed:<\/p>\n

var series = new Array(); series[0] = ‘Fringe’; series[1] = ‘The Big Bang Theory’;<\/p>\n

Ser\u00eda mucho m\u00e1s eficiente cre\u00e1ndose as\u00ed:<\/p>\n

var series = [\u00a0 ‘Fringe’,\u00a0 ‘The Big Bang Theory’ ];<\/p>\n

\uf0b7 Otra forma de optimizar c\u00f3digo puede ser reduciendo los condicionales. De esta forma un condicional habitual tal que:<\/p>\n

var direccion; if(x > 10) {\u00a0 direccion = 1;<\/p>\n

Javier Casares \u2013 http:\/\/webperformanceoptimization.es\/\u00a0 P\u00e1gina 54<\/p>\n

} else {\u00a0 direccion = -1; }<\/p>\n

Podr\u00eda llegar a reducirse a un c\u00f3digo tal que:<\/p>\n

var direccion = (x > 100) ? 1 : -1;<\/p>\n

\uf0b7 Otra acci\u00f3n sencilla que permite mejorar el rendimiento es el de optimizar los bucles. Un bucle habitual podr\u00eda ser este:<\/p>\n

var beatles = [‘George’,’Ringo’,’Paul’,’John’]; for(var i=0;i< beatles.length;i++){\u00a0 Actuan(beatles[i]); }<\/p>\n

Tendr\u00eda una opci\u00f3n mejorada tal que as\u00ed, creando las variables s\u00f3lo una vez:<\/p>\n

var beatles = [‘George’,’Ringo’,’Paul’,’John’]; for(var i=0, j= beatles.length;i<\/p>\n

 <\/p>\n

OPTIMIZACI\u00d3N PARA JQUERY<\/p>\n

Categor\u00eda: JavaScript<\/p>\n

 <\/p>\n

jQuery es una biblioteca de funciones preestablecidas de JavaScript que permite interactuar de forma m\u00e1s sencilla con los elementos DOM de una p\u00e1gina, adem\u00e1s de conseguir trabajar de una forma m\u00e1s sencilla gracias a las ampliaciones de c\u00f3digo que existen.<\/p>\n

Existen algunas reglas que permiten trabajar de forma m\u00e1s r\u00e1pida y mejorada con jQuery:<\/p>\n

\uf0b7 La forma m\u00e1s r\u00e1pida de acceder a un elemento del DOM es hacerlo mediante un selector ID en vez de hacerlo con un descendiente suyo. Esto es debido a la existencia y uso de la funci\u00f3n getElementById(). Esto significa que es mucho m\u00e1s \u00f3ptimo hacer uso de algo as\u00ed:<\/p>\n

var boton1 = $(‘#boton1’);<\/p>\n

WEB PERFORMANCE OPTIMIZATION<\/p>\n

 <\/p>\n

Javier Casares \u2013 http:\/\/webperformanceoptimization.es\/\u00a0 P\u00e1gina 55<\/p>\n

que no hacer uso de algo as\u00ed:<\/p>\n

var boton1 = $(‘#botones .boton1’);<\/p>\n

\uf0b7 La siguiente forma de acceder r\u00e1pidamente a un elemento es hacerlo a trav\u00e9s de un \u201ctag\u201d ya que se aprovecha el uso de la funci\u00f3n getElementsByTagName(). \uf0b7 Otro detalle a tener en cuenta es el uso de variables para almacenar informaci\u00f3n de un elemento y no aplicar cambios directamente sobre \u00e9l. De esta forma tendr\u00edamos una funci\u00f3n optimizada tal que as\u00ed:<\/p>\n

var $activar = $(‘#light input.on’); $activar.css(‘border’, ‘3px dashed yellow’); $activar.css(‘background-color’, ‘orange’); $activar.fadeIn(‘slow’);<\/p>\n

Sobre unas no optimizadas que podr\u00edan ser as\u00ed:<\/p>\n

$(‘#light input.on).css(‘border’, ‘3px dashed yellow’); $(‘#light input.on).css(‘background-color’, ‘orange’); $(‘#light input.on).fadeIn(‘slow’);<\/p>\n

Este sistema podr\u00eda mejorar incluso un poco m\u00e1s haciendo uso de encadenamiento:<\/p>\n

var $activar = $(‘#light input.on’); $activar.css(‘border’, ‘3px dashed yellow’).css(‘background-color’, ‘orange’).fadeIn(‘slow’);<\/p>\n

\uf0b7 Otra forma de acceder r\u00e1pidamente a subelementos es utilizar la funci\u00f3n find().<\/p>\n

var $activar = $(‘#light’), $activo = $activar.find(‘input.on’), $inactivo = $activar.find(‘input.off’);<\/p>\n

\uf0b7 Los eventos son uno de los elementos que m\u00e1s se utilizan en jQuery y debemos aprovechar la delegaci\u00f3n de los mismos para generar el llamado Bubbling. Por ejemplo podemos tener una funci\u00f3n sencilla como:<\/p>\n

$(‘#lista li).bind(‘click’, function() {\u00a0 $(this).addClass(‘clicked’); });<\/p>\n

Esto implica tener que trabajar enormemente con el DOM, algo que podr\u00edamos reducir utilizando una funci\u00f3n algo m\u00e1s compleja aparentemente, pero m\u00e1s efectiva:<\/p>\n

WEB PERFORMANCE OPTIMIZATION<\/p>\n

 <\/p>\n

Javier Casares \u2013 http:\/\/webperformanceoptimization.es\/\u00a0 P\u00e1gina 56<\/p>\n

$(‘#lista).bind(‘click’, function(e) {\u00a0 var pulsa = e. pulsa, $ pulsa = $( pulsa);\u00a0 if (pulsa.nodeName === ‘LI’) {\u00a0\u00a0 $ pulsa.addClass(‘clicked’);\u00a0 } });<\/p>\n

\uf0b7 Cargar las funciones tras la carga de la ventana y no del estado del documento. Por norma general las funciones se cargan tras el $(document).ready pero se pueden cargar de una forma m\u00e1s eficiente con $(window).load.<\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

WEB PERFORMANCE OPTIMIZATION<\/p>\n

 <\/p>\n

Javier Casares \u2013 http:\/\/webperformanceoptimization.es\/\u00a0 P\u00e1gina 57<\/p>\n

ELEMENTOS DOM<\/p>\n

 <\/p>\n

Los elementos DOM de una p\u00e1gina web son pr\u00e1cticamente todos aquellos elementos con los que se puede interactuar de alguna manera. B\u00e1sicamente se podr\u00eda resumir en que son todos los tags, ID, clases, etc…<\/p>\n

 <\/p>\n

N\u00daMERO ELEVADO DE ELEMENTOS DOM<\/p>\n

Categor\u00eda: Contenidos<\/p>\n

 <\/p>\n

El hecho de que los elementos DOM sean accesibles a trav\u00e9s de lenguajes como JavaScript puede provocar que, con un n\u00famero elevado de elementos, la p\u00e1gina se pueda llegar a sobrecargar y hacer que el acceso a estos recursos se ralentice enormemente.<\/p>\n

Es por esto que se recomienda intentar reducir el uso de elementos DOM al m\u00ednimo y mantenerlo por debajo de los 1.000, ya que a partir de esa cifra se considera que los navegadores comienzan a perder \u201cfacultades\u201d si han de modificar alguna cosa.<\/p>\n

Una forma de saber cu\u00e1ntos elementos DOM estamos utilizando es ejecutar en la consola de Firebug la siguiente consulta:<\/p>\n

document.getElementsByTagName(‘*’).length<\/p>\n

 <\/p>\n

REDUCIR EL N\u00daMERO DE <IFRAME><\/p>\n

Categor\u00eda: Contenidos<\/p>\n

 <\/p>\n

Los elementos que se incluyen en un <iframe> no dejan de ser p\u00e1ginas dentro de otras p\u00e1ginas, pero con la gran diferencia de que est\u00e1n anidadas.<\/p>\n

El uso de iFrames provoca que el n\u00famero de elementos del DOM casi se duplique, por lo que el navegador ha de gestionar el doble de elementos, y encima anidados, de forma que gestionar o hacer alg\u00fan cambio en la p\u00e1gina puede provocar un colapso.<\/p>\n

 <\/p>\n

WEB PERFORMANCE OPTIMIZATION<\/p>\n

 <\/p>\n

Javier Casares \u2013 http:\/\/webperformanceoptimization.es\/\u00a0 P\u00e1gina 58<\/p>\n

USAR TABLAS CON ANCHO FIJO<\/p>\n

Categor\u00eda: Contenidos<\/p>\n

 <\/p>\n

Aunque hoy en d\u00eda cada vez se utilizan menos las tablas en HTML, una forma de hacer que el navegador procese mucho m\u00e1s r\u00e1pido las tablas es d\u00e1ndole las medidas de la misma. Si dejamos que los contenidos de la tabla se ajusten a las celdas, el navegador no podr\u00e1 precalcular ni renderizar la misma hasta que no acabe de cargarse.<\/p>\n

Por norma general la mejor forma de adaptar el tama\u00f1o ser\u00eda haci\u00e9ndolo mediante CSS y teniendo en cuenta estos tres elementos:<\/p>\n

\uf0b7 Establecer el elemento CSS table-layout a fixed en la tabla. \uf0b7 Definir de forma expl\u00edcita los col para cada columna. \uf0b7 Establecer el atributo width para cada columna.<\/p>\n

 <\/p>\n

CERRAR LOS ELEMENTOS HTML<\/p>\n

Categor\u00eda: Contenidos<\/p>\n

 <\/p>\n

A diferencia del XML, el HTML permite el cierre de elementos (tags HTML) de forma impl\u00edcita, lo que significa que algunos elementos como el P, LI, IMG… no tienen porqu\u00e9 tener el bloque que los cierra.<\/p>\n

Este hecho hace que sea el navegador el que tenga que calcular cu\u00e1ndo comienza y acaba un bloque de elementos, lo que hace que el renderizado sea m\u00e1s elevado en tiempo y coste.<\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

WEB PERFORMANCE OPTIMIZATION<\/p>\n

 <\/p>\n

Javier Casares \u2013 http:\/\/webperformanceoptimization.es\/\u00a0 P\u00e1gina 60<\/p>\n

SITIOS WEB M\u00d3VILES<\/p>\n

 <\/p>\n

Sin duda los tel\u00e9fonos m\u00f3viles y las tabletas son el futuro de las m\u00e1quinas y la navegaci\u00f3n en Internet. Est\u00e1 claro que seguir\u00e1 habiendo una gran mayor\u00eda de usuarios que navegar\u00e1 desde los terminales tradicionales, pero cada vez m\u00e1s va creciendo el uso de los sitios m\u00f3viles.<\/p>\n

Es por esto que, de la misma forma que se puede optimizar un sitio para lor ordenadores de toda la vida, podemos hacer determinadas mejoras a la hora de trabajar con dispositivos m\u00f3viles.<\/p>\n

 <\/p>\n

ADAPTARSE A LA PANTALLA DEL TERMINAL<\/p>\n

Categor\u00eda: CSS, Im\u00e1genes, M\u00f3vil<\/p>\n

 <\/p>\n

Hay que tener en cuenta que los terminales m\u00f3viles tienen un tama\u00f1o de pantalla limitado. Estamos acostumbrados a las pantallas con altas resoluciones y a dise\u00f1ar sitios para un ancho m\u00ednimo de 1024 p\u00edxeles, pero… \u00bfqu\u00e9 ocurre cuando tenemos pantallas de 480 p\u00edxeles?<\/p>\n

Teniendo en cuenta esto, y gracias a los CSS podemos hacer que el dise\u00f1o de las im\u00e1genes, textos y dem\u00e1s se adapte al terminal.<\/p>\n

Para empezar podr\u00edamos elegir el tama\u00f1o de la imagen de la cabecera de la p\u00e1gina en base al tama\u00f1o de pantalla:<\/p>\n

 <\/p>\n

\/* pantalla mayor de 480px *\/ @media only screen and (min-device-width: 481px) {\u00a0 #header { background-image: url(\u2018header-full.png\u2019); } } \/* pantalla menor de 480px *\/ @media only screen and (max-device-width: 480px) {\u00a0 #header { background-image: url(\u2018header-small.png\u2019); } }<\/p>\n

 <\/p>\n

Esta es una opci\u00f3n aunque no es la \u00fanica, ya que los \u00faltimos terminales llevan la posibilidad de distinguir la resoluci\u00f3n de pantalla, por lo que otra posibilidad, en vez del tama\u00f1o, ser\u00eda la calidad. Para ello usaremos los dpi (dots per inch) o puntos por pulgada.<\/p>\n

 <\/p>\n

WEB PERFORMANCE OPTIMIZATION<\/p>\n

 <\/p>\n

Javier Casares \u2013 http:\/\/webperformanceoptimization.es\/\u00a0 P\u00e1gina 61<\/p>\n

\/* alta calidad *\/ @media only screen and (min-resolution: 300dpi),\u00a0\u00a0 only screen and (-webkit-min-device-pixel-ratio: 1.5),\u00a0\u00a0 only screen and (min–moz-device-pixel-ratio: 1.5) {\u00a0 #header { background-image: url(\u2018header-300dpi.png\u2019); } } \/* baja calidad *\/ @media only screen and (max-resolution: 299dpi),\u00a0\u00a0 only screen and (-webkit-max-device-pixel-ratio: 1.5),\u00a0\u00a0 only screen and (max–moz-device-pixel-ratio: 1.5) {\u00a0 #header { background-image: url(\u2018header-72dpi.png\u2019); } }<\/p>\n

 <\/p>\n

ADAPTARSE A LA VELOCIDAD DE CONEXI\u00d3N<\/p>\n

Categor\u00eda: Conectividad, CSS, Im\u00e1genes, JavaScript, M\u00f3vil<\/p>\n

 <\/p>\n

Los navegadores del sistema operativo Android disponen desde la versi\u00f3n 2.2 de unas funciones en JavaScript con las que se puede detectar el tipo de conectividad que tiene el dispositivo en ese momento, de forma que podemos saber qu\u00e9 cantidad de ancho de banda disponemos. La funci\u00f3n es la navigator.connection.<\/p>\n

 <\/p>\n

navigator = {\u00a0 connection: {\u00a0\u00a0 “type”: “4”,\u00a0\u00a0 “UNKNOWN”: “0”,\u00a0\u00a0 “ETHERNET”: “1”,\u00a0\u00a0 “WIFI”: “2”,\u00a0\u00a0 “CELL_2G”: “3”,\u00a0\u00a0 “CELL_3G”: “4”\u00a0 } };<\/p>\n

 <\/p>\n

Gracias a esta funci\u00f3n tenemos disponible una serie de posibilidades si mezclamos un poco de JavaScript y un poco de CSS.<\/p>\n

 <\/p>\n

WEB PERFORMANCE OPTIMIZATION<\/p>\n

 <\/p>\n

Javier Casares \u2013 http:\/\/webperformanceoptimization.es\/\u00a0 P\u00e1gina 62<\/p>\n

var connection, connectionSpeed, htmlNode, htmlClass; connection = navigator.connection || {‘type’:’0′}; switch(connection.type) {\u00a0 case connection.CELL_3G:\u00a0\u00a0 connectionSpeed = ‘mediumbandwidth’;\u00a0\u00a0 break;\u00a0 case connection.CELL_2G:\u00a0\u00a0 connectionSpeed = ‘lowbandwidth’;\u00a0\u00a0 break;\u00a0 default:\u00a0\u00a0 connectionSpeed = ‘highbandwidth’; } htmlNode = document.body.parentNode; htmlClass = htmlNode.getAttribute(‘class’) || ”; htmlNode.setAttribute(‘class’, htmlClass + ‘ ‘ + connectionSpeed);<\/p>\n

 <\/p>\n

Gracias a esto conseguimos asignar la clase base al sitio web, que ser\u00e1 medio, bajo o alto, seg\u00fan el tipo de conexi\u00f3n disponible. Ahora s\u00f3lo queda darle forma gracias a los CSS.<\/p>\n

 <\/p>\n

.highbandwidth .logo\u00a0\u00a0 { background-image:url(‘logo-high.jpg’); } .mediumbandwidth .logo { background-image:url(‘logo-medium.jpg’); } .lowbandwidth .logo\u00a0\u00a0\u00a0 { background-image:url(‘logo-low.jpg’); }<\/p>\n

 <\/p>\n

REDUCCI\u00d3N DE PETICIONES HTTP<\/p>\n

Categor\u00eda: Conectividad, M\u00f3vil<\/p>\n

 <\/p>\n

Aunque, en cualquier caso, siempre hay que aplicar las t\u00e9cnicas de reducci\u00f3n de peticiones HTTP generales, no est\u00e1 de m\u00e1s hacer hincapi\u00e9 en algunos detalles para los tel\u00e9fonos m\u00f3viles de \u00faltima generaci\u00f3n.<\/p>\n

Hay que tener en cuenta que, ya de por s\u00ed, las cabeceras HTTP en los terminales m\u00f3viles pueden ser un 25% m\u00e1s amplias que en los navegadores de escritorios, al tener que enviar por cada petici\u00f3n la lista m\u00e1s detallada de elementos MIME que soportan, entre otras cosas.<\/p>\n

\uf0b7 Usar CSS3 para aquellas opciones en las que se necesitaban im\u00e1genes y similares (como los bordes redondeados). Los terminales como Android o Safari soportan border-radius, textshadow, background linear\/radial gradients o box-reflect.<\/p>\n

WEB PERFORMANCE OPTIMIZATION<\/p>\n

 <\/p>\n

Javier Casares \u2013 http:\/\/webperformanceoptimization.es\/\u00a0 P\u00e1gina 63<\/p>\n

\uf0b7 Usar en los CSS y HTML codificaci\u00f3n en base64 (m\u00e9todo data: en base64 para im\u00e1genes, principalmente). \uf0b7 Evitar redirecciones, como por ejemplo la del acceso a una p\u00e1gina que cambia la URL a una versi\u00f3n m\u00f3vil. \uf0b7 Cachear la mayor cantidad de elementos posibles, incluido el AJAX. Incluso, en los casos en los que sea posible, usar el sistema de cacheo de HTML5 (cache-manifest y client-side database). \uf0b7 Intentar evitar el uso de cookies y pasar al uso de LocalStorage. \uf0b7 Externalizar los CSS y JS a ficheros externos de forma que se puedan cachear con mucha m\u00e1s facilidad y s\u00f3lo sea necesaria una petici\u00f3n al visitar el sitio por primera vez. \uf0b7 Hay sistemas como iOS 2.2 que disponen de una lista de emoticonos2 integrados en el sistema, y que mediante c\u00f3digos HTML se pueden mostrar en cualquier p\u00e1gina.<\/p>\n

SEO Mexico<\/strong><\/p>\n

#SEOmexico #SEO #SEOGDL<\/p>\n","protected":false},"excerpt":{"rendered":"

SEO Mexico SEO Mexico REDUCCI\u00d3N DE FICHEROS SWF (ADOBE FLASH) Categor\u00eda: Contenidos Aunque los ficheros de Adobe Flash no son concretamente im\u00e1genes, s\u00ed que es cierto que como elementos multimedia se deben un respeto, ya que existen en muchos sitios web. Los ficheros SWF est\u00e1n comprimidos de por s\u00ed gracias al sistema deflate propio de …<\/p>\n

SEO Mexico<\/span> Leer m\u00e1s \u00bb<\/a><\/p>\n","protected":false},"author":18,"featured_media":3490,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"site-sidebar-layout":"default","site-content-layout":"default","ast-global-header-display":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","_joinchat":[],"footnotes":""},"categories":[58,20],"tags":[349,286,378,350,475,123],"class_list":["post-3753","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-posicionamiento-web","category-seo","tag-que-es-seo-con-que-se-come","tag-agencia-de-seo","tag-agencia-de-seo-df","tag-agencia-de-seo-en-guadalajara","tag-agencia-de-seo-en-guadalajara-y-df","tag-seo-mexico"],"_links":{"self":[{"href":"https:\/\/marketingweb.com.mx\/blog\/wp-json\/wp\/v2\/posts\/3753","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/marketingweb.com.mx\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/marketingweb.com.mx\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/marketingweb.com.mx\/blog\/wp-json\/wp\/v2\/users\/18"}],"replies":[{"embeddable":true,"href":"https:\/\/marketingweb.com.mx\/blog\/wp-json\/wp\/v2\/comments?post=3753"}],"version-history":[{"count":0,"href":"https:\/\/marketingweb.com.mx\/blog\/wp-json\/wp\/v2\/posts\/3753\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/marketingweb.com.mx\/blog\/wp-json\/wp\/v2\/media\/3490"}],"wp:attachment":[{"href":"https:\/\/marketingweb.com.mx\/blog\/wp-json\/wp\/v2\/media?parent=3753"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/marketingweb.com.mx\/blog\/wp-json\/wp\/v2\/categories?post=3753"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/marketingweb.com.mx\/blog\/wp-json\/wp\/v2\/tags?post=3753"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}