SEO Mexico

SEO Mexico

REDUCCIÓN DE FICHEROS SWF (ADOBE FLASH)

Categoría: Contenidos

Aunque los ficheros de Adobe Flash no son concretamente imágenes, sí que es cierto que como elementos multimedia se deben un respeto, ya que existen en muchos sitios web. Los ficheros SWF están comprimidos de por sí gracias al sistema deflate propio de Java, por lo que al final, lo que recibimos ya está reducido, pero se puede reducir aún más gracias a 7-Zip, que comprime mejor. Para ello usaremos apparat. Es recomendable mirar en profundidad su configuració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.

 

OPTIMIZACIÓN DE FUENTES CSS @FONT-FACE

Categoría: Conectividad, Contenidos

 

Una de las novedades de CSS3  es que permite a los navegadores cargar un fichero de fuente y así mostrar la página con los tipos de letra que el sitio web decide y no depender de las fuentes del sistema. Estas fuentes se cargan a través de las hojas de estilo y, como los ficheros de fuente no suelen ser muy reducidos en tamaño, pueden perjudicar el rendimiento de carga.

Hay que tener en cuenta que, aunque por defecto el código del @font-face se carga en la cabecera de la página, hasta que esta no acaba de pintarse en el navegador, no se ejecuta el cambio del tipo de letra.

WEB PERFORMANCE OPTIMIZATION

Teniendo en cuenta esto, y que gracias a JavaScript podemos modificar los estilos, podemos mejorar un código tal que así:

<style type=”text/css” media=”screen”>  @font-face {   font-family: ‘WebFont’;   src: url(‘http://www.example.com/webfont.eot’);   src: local(‘☺’), 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’);   font-weight: normal;   font-style: normal;  }  h1 {font: 60px/68px ‘WebFont’, Arial, sans-serif; letter-spacing: 0;}  p {font: 18px/27px ‘WebFont’, Arial, sans-serif;}

 SEO

Por un código en dos partes, donde dejaremos en la cabecera algunos estilos:

 

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

 

Y al final de la página, cargaremos de forma retardada las fuentes, eso sí, cacheadas en un servidor estático para que no se tengan que descargar cada página.

 

<script type=”text/javascript”>  var fuente1 = “@font-face {” +   ” font-family: ‘WebFont’;” +   ” src: url(‘http://s.example.com/webfont.eot’);” +   ” src: local(‘☺’), 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’);” +   ” font-weight: normal; font-style: normal;” +  “}”;

WEB PERFORMANCE OPTIMIZATION

(function() {   var estilo1 = document.styleSheets[0];   if (“function” === typeof(estilo1.insertRule)) {    estilo1.insertRule(fuente1, 0);   } else if (“string” === typeof(estilo1.cssText) ) {    estilo1.cssText = fuente1;   }  })();

 

Además, 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 óptimo esto no ocurre lo que permite mejorar el rendimiento en cualquier situación.

WEB PERFORMANCE OPTIMIZATION

DEVOLVER CÓDIGO PARCIALMENTE

 SEO Mexico

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últiples paquetes en momentos distintos.

Gracias a esto podemos también dividir una página en varios fragmentos y así procesarla por partes, haciendo que la carga de otros elementos (como imágenes o scripts) se haga también por bloques.

 

FUNCIÓN “FLUSH()”

Categoría: Conectividad

 

La mayoría de lenguajes de programación tienen una función “flush()” que permite limpiar el buffer de salida de datos y enviarlo directamente al usuario en el momento en el que se decida.

Aunque no hay muchos sitios web que lo utilicen, es muy interesante planteárselo en momentos estratégicos como podría tras el </head> pudiendo enviar al usuario todas las cabeceras y comenzar a descargar los scripts o CSS que haya en las cabeceras.

Por norma general, se recomendaría, en una web básica, utilizar este sistema tras el encabezado de la página, la cabecera, el menú, el contenido y el pie, enviando de esta manera los distintos bloques y pudiendo renderizarlos el navegador poco a poco.

PROGRAMACIÓN EN LOS CSS

Aunque no es muy común hacerlo, los ficheros CSS permiten cierto código JavaScript en su interior para hacerlo algo más sencillo a la hora de desarrollar.

De todas formas, esta aplicación no es un estándar en todos los navegadores por lo que puede provocar algunas situaciones no deseadas cuando el sistema que ha de renderizar no sabe qué hacer.

PROBLEMAS CON INTERNET EXPLORER

Categoría: CSS, JavaScript

La mayoría de problemas en la programación 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écnicas.

Otra de las que no parece funcionar muy bien, también en este navegador, es el uso de filtros del estilo “AlphaImageLoader”, ya que hacen que el consumo de recursos aumente de forma exagerada.

PROGRAMACIÓN DE LOS JS

Sin duda cada vez más JavaScript se ha convertido en u lenguaje de programación en el cliente que permite mucha interactividad con los servidores y con los elementos DOM del sitio web.

Aunque JavaScript cada vez más está integrado con el lenguaje HTML, bien es cierto que existen muchas técnicas para mejorar la velocidad de procesamiento del código.

 

OPTIMIZACIÓN GENERAL PARA JAVASCRIPT

Categoría: JavaScript

SEO GDL

JavaScript, como cualquier otro lenguaje de programación, 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ásicas.

 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ódigos es probable que se sobrescriban dichas variables. Para ello podríamos tener elementos de este estilo que se protegen de accesos externos o la posibilidad de ser sobrescritos.

miNameSpace = function() {  var current = null;  function init() {…}  function change() {…}  return {   init:init,   set:change  } }();

 Otro detalle importante es el uso de un código lo más estricto posible, es decir, un código que se ajuste a cualquier motor que interprete JavaScript y sea fácilmente interpretable. Para verificar que estamos usando un código correcto podemos hacer uso de herramientas como JSLint.  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:

WEB PERFORMANCE OPTIMIZATION

 

Javier Casares – http://webperformanceoptimization.es/  Página 53

inputs.style.borderColor = ‘#f00’; inputs.style.borderStyle = ‘solid’; inputs.style.borderWidth = ‘1px’;

O podemos hacer un cambio más sencillo, tal que este:

inputs.className += ‘ error’;

Y que esta clase “error” sea la que haga el cambio en el estilo, sin modificar directamente los elementos.

 Es mejor utilizar la anotación corta para crear objetos o arrays. De esta forma, un objeto tal que este:

var perro = new Object(); perro.color = ‘negro’; perro.tamano = ‘grande’;

Podría crearse mucho más eficiente así:

var perro = {  color: ‘negro’,  tamano = ‘grande’ };

Con un array pasaría lo mismo. Si tenemos algo así:

var series = new Array(); series[0] = ‘Fringe’; series[1] = ‘The Big Bang Theory’;

Sería mucho más eficiente creándose así:

var series = [  ‘Fringe’,  ‘The Big Bang Theory’ ];

 Otra forma de optimizar código puede ser reduciendo los condicionales. De esta forma un condicional habitual tal que:

var direccion; if(x > 10) {  direccion = 1;

Javier Casares – http://webperformanceoptimization.es/  Página 54

} else {  direccion = -1; }

Podría llegar a reducirse a un código tal que:

var direccion = (x > 100) ? 1 : -1;

 Otra acción sencilla que permite mejorar el rendimiento es el de optimizar los bucles. Un bucle habitual podría ser este:

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

Tendría una opción mejorada tal que así, creando las variables sólo una vez:

var beatles = [‘George’,’Ringo’,’Paul’,’John’]; for(var i=0, j= beatles.length;i

 

OPTIMIZACIÓN PARA JQUERY

Categoría: JavaScript

 

jQuery es una biblioteca de funciones preestablecidas de JavaScript que permite interactuar de forma más sencilla con los elementos DOM de una página, además de conseguir trabajar de una forma más sencilla gracias a las ampliaciones de código que existen.

Existen algunas reglas que permiten trabajar de forma más rápida y mejorada con jQuery:

 La forma más rápida 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ón getElementById(). Esto significa que es mucho más óptimo hacer uso de algo así:

var boton1 = $(‘#boton1’);

WEB PERFORMANCE OPTIMIZATION

 

Javier Casares – http://webperformanceoptimization.es/  Página 55

que no hacer uso de algo así:

var boton1 = $(‘#botones .boton1’);

 La siguiente forma de acceder rápidamente a un elemento es hacerlo a través de un “tag” ya que se aprovecha el uso de la función getElementsByTagName().  Otro detalle a tener en cuenta es el uso de variables para almacenar información de un elemento y no aplicar cambios directamente sobre él. De esta forma tendríamos una función optimizada tal que así:

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

Sobre unas no optimizadas que podrían ser así:

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

Este sistema podría mejorar incluso un poco más haciendo uso de encadenamiento:

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

 Otra forma de acceder rápidamente a subelementos es utilizar la función find().

var $activar = $(‘#light’), $activo = $activar.find(‘input.on’), $inactivo = $activar.find(‘input.off’);

 Los eventos son uno de los elementos que más se utilizan en jQuery y debemos aprovechar la delegación de los mismos para generar el llamado Bubbling. Por ejemplo podemos tener una función sencilla como:

$(‘#lista li).bind(‘click’, function() {  $(this).addClass(‘clicked’); });

Esto implica tener que trabajar enormemente con el DOM, algo que podríamos reducir utilizando una función algo más compleja aparentemente, pero más efectiva:

WEB PERFORMANCE OPTIMIZATION

 

Javier Casares – http://webperformanceoptimization.es/  Página 56

$(‘#lista).bind(‘click’, function(e) {  var pulsa = e. pulsa, $ pulsa = $( pulsa);  if (pulsa.nodeName === ‘LI’) {   $ pulsa.addClass(‘clicked’);  } });

 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ás eficiente con $(window).load.

 

 

 

 

WEB PERFORMANCE OPTIMIZATION

 

Javier Casares – http://webperformanceoptimization.es/  Página 57

ELEMENTOS DOM

 

Los elementos DOM de una página web son prácticamente todos aquellos elementos con los que se puede interactuar de alguna manera. Básicamente se podría resumir en que son todos los tags, ID, clases, etc…

 

NÚMERO ELEVADO DE ELEMENTOS DOM

Categoría: Contenidos

 

El hecho de que los elementos DOM sean accesibles a través de lenguajes como JavaScript puede provocar que, con un número elevado de elementos, la página se pueda llegar a sobrecargar y hacer que el acceso a estos recursos se ralentice enormemente.

Es por esto que se recomienda intentar reducir el uso de elementos DOM al mínimo y mantenerlo por debajo de los 1.000, ya que a partir de esa cifra se considera que los navegadores comienzan a perder “facultades” si han de modificar alguna cosa.

Una forma de saber cuántos elementos DOM estamos utilizando es ejecutar en la consola de Firebug la siguiente consulta:

document.getElementsByTagName(‘*’).length

 

REDUCIR EL NÚMERO DE <IFRAME>

Categoría: Contenidos

 

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

El uso de iFrames provoca que el número 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ún cambio en la página puede provocar un colapso.

 

WEB PERFORMANCE OPTIMIZATION

 

Javier Casares – http://webperformanceoptimization.es/  Página 58

USAR TABLAS CON ANCHO FIJO

Categoría: Contenidos

 

Aunque hoy en día cada vez se utilizan menos las tablas en HTML, una forma de hacer que el navegador procese mucho más rápido las tablas es dándole las medidas de la misma. Si dejamos que los contenidos de la tabla se ajusten a las celdas, el navegador no podrá precalcular ni renderizar la misma hasta que no acabe de cargarse.

Por norma general la mejor forma de adaptar el tamaño sería haciéndolo mediante CSS y teniendo en cuenta estos tres elementos:

 Establecer el elemento CSS table-layout a fixed en la tabla.  Definir de forma explícita los col para cada columna.  Establecer el atributo width para cada columna.

 

CERRAR LOS ELEMENTOS HTML

Categoría: Contenidos

 

A diferencia del XML, el HTML permite el cierre de elementos (tags HTML) de forma implícita, lo que significa que algunos elementos como el P, LI, IMG… no tienen porqué tener el bloque que los cierra.

Este hecho hace que sea el navegador el que tenga que calcular cuándo comienza y acaba un bloque de elementos, lo que hace que el renderizado sea más elevado en tiempo y coste.

 

 

 

 

 

 

 

 

WEB PERFORMANCE OPTIMIZATION

 

Javier Casares – http://webperformanceoptimization.es/  Página 60

SITIOS WEB MÓVILES

 

Sin duda los teléfonos móviles y las tabletas son el futuro de las máquinas y la navegación en Internet. Está claro que seguirá habiendo una gran mayoría de usuarios que navegará desde los terminales tradicionales, pero cada vez más va creciendo el uso de los sitios móviles.

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óviles.

 

ADAPTARSE A LA PANTALLA DEL TERMINAL

Categoría: CSS, Imágenes, Móvil

 

Hay que tener en cuenta que los terminales móviles tienen un tamaño de pantalla limitado. Estamos acostumbrados a las pantallas con altas resoluciones y a diseñar sitios para un ancho mínimo de 1024 píxeles, pero… ¿qué ocurre cuando tenemos pantallas de 480 píxeles?

Teniendo en cuenta esto, y gracias a los CSS podemos hacer que el diseño de las imágenes, textos y demás se adapte al terminal.

Para empezar podríamos elegir el tamaño de la imagen de la cabecera de la página en base al tamaño de pantalla:

 

/* pantalla mayor de 480px */ @media only screen and (min-device-width: 481px) {  #header { background-image: url(‘header-full.png’); } } /* pantalla menor de 480px */ @media only screen and (max-device-width: 480px) {  #header { background-image: url(‘header-small.png’); } }

 

Esta es una opción aunque no es la única, ya que los últimos terminales llevan la posibilidad de distinguir la resolución de pantalla, por lo que otra posibilidad, en vez del tamaño, sería la calidad. Para ello usaremos los dpi (dots per inch) o puntos por pulgada.

 

WEB PERFORMANCE OPTIMIZATION

 

Javier Casares – http://webperformanceoptimization.es/  Página 61

/* alta calidad */ @media only screen and (min-resolution: 300dpi),   only screen and (-webkit-min-device-pixel-ratio: 1.5),   only screen and (min–moz-device-pixel-ratio: 1.5) {  #header { background-image: url(‘header-300dpi.png’); } } /* baja calidad */ @media only screen and (max-resolution: 299dpi),   only screen and (-webkit-max-device-pixel-ratio: 1.5),   only screen and (max–moz-device-pixel-ratio: 1.5) {  #header { background-image: url(‘header-72dpi.png’); } }

 

ADAPTARSE A LA VELOCIDAD DE CONEXIÓN

Categoría: Conectividad, CSS, Imágenes, JavaScript, Móvil

 

Los navegadores del sistema operativo Android disponen desde la versión 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é cantidad de ancho de banda disponemos. La función es la navigator.connection.

 

navigator = {  connection: {   “type”: “4”,   “UNKNOWN”: “0”,   “ETHERNET”: “1”,   “WIFI”: “2”,   “CELL_2G”: “3”,   “CELL_3G”: “4”  } };

 

Gracias a esta función tenemos disponible una serie de posibilidades si mezclamos un poco de JavaScript y un poco de CSS.

 

WEB PERFORMANCE OPTIMIZATION

 

Javier Casares – http://webperformanceoptimization.es/  Página 62

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

 

Gracias a esto conseguimos asignar la clase base al sitio web, que será medio, bajo o alto, según el tipo de conexión disponible. Ahora sólo queda darle forma gracias a los CSS.

 

.highbandwidth .logo   { background-image:url(‘logo-high.jpg’); } .mediumbandwidth .logo { background-image:url(‘logo-medium.jpg’); } .lowbandwidth .logo    { background-image:url(‘logo-low.jpg’); }

 

REDUCCIÓN DE PETICIONES HTTP

Categoría: Conectividad, Móvil

 

Aunque, en cualquier caso, siempre hay que aplicar las técnicas de reducción de peticiones HTTP generales, no está de más hacer hincapié en algunos detalles para los teléfonos móviles de última generación.

Hay que tener en cuenta que, ya de por sí, las cabeceras HTTP en los terminales móviles pueden ser un 25% más amplias que en los navegadores de escritorios, al tener que enviar por cada petición la lista más detallada de elementos MIME que soportan, entre otras cosas.

 Usar CSS3 para aquellas opciones en las que se necesitaban imágenes y similares (como los bordes redondeados). Los terminales como Android o Safari soportan border-radius, textshadow, background linear/radial gradients o box-reflect.

WEB PERFORMANCE OPTIMIZATION

 

Javier Casares – http://webperformanceoptimization.es/  Página 63

 Usar en los CSS y HTML codificación en base64 (método data: en base64 para imágenes, principalmente).  Evitar redirecciones, como por ejemplo la del acceso a una página que cambia la URL a una versión móvil.  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).  Intentar evitar el uso de cookies y pasar al uso de LocalStorage.  Externalizar los CSS y JS a ficheros externos de forma que se puedan cachear con mucha más facilidad y sólo sea necesaria una petición al visitar el sitio por primera vez.  Hay sistemas como iOS 2.2 que disponen de una lista de emoticonos2 integrados en el sistema, y que mediante códigos HTML se pueden mostrar en cualquier página.

SEO Mexico

#SEOmexico #SEO #SEOGDL