SEOday Girona 2019: Web Performance
El Web Performance ha variado mucho en los últimos 10 años, desde que comenzó a hablarse de ello. Y aprovechando el SEOday Girona me han pedido dar una charla sobre ello.
WPO
SEO ¿tecnología o marketing?
Seguramente al leer este título se os vengan a la cabeza (sobretodo los que me conocéis) las diferentes disputas que he tenido a lo largo de los últimos 10 años con compañeros de la profesión.
Piensa en asíncrono
Sin duda una de las mejoras del HTML5 es la posibilidad de cargar determinados elementos de forma asíncrona en la página.
Adiós cookies, Hola localStorage
Sin duda las cookies han sido grandes aliadas a lo largo de la historia de la programación, y ya ni te cuento las bases de datos.
SEO y WPO para WordPress en Punt Multimedia
Cuando voy a dar este tipo de charlas soy bastante consciente de que la parte de SEO la gente la tiene bastante asumida, por lo que directamente no hablo de SEO propiamente dicho.
#WebPerfES: Web Acceleration por Telefonica Digital Lab
Este próximo jueves estoy muy contento de poder anunciar una vez más el evento WebPerf España en el que asistirán Xiao y Eguz de Telefonica Digital Lab en Barcelona.
Resolución de sub-millisegundos en WPO
Sin duda que el WPO se haya convertido en un estándar es un gran paso, pero como ya comenté una vez y no me caso de repetir, el WPO es cómo la Fórmula 1. Y esto tiene un problema con los relojes actuales… y es que el tiempo lo miden en milisegundos. Esto hace que la información detallada que tenemos es la cifra que ha pasado desde el 1 de enero de 1970 (hora UTC). ¿Qué ocurre con esto? Que si queremos medir, por ejemplo, los «frames por segundo» tenemos información sesgada, ya que no es 100% medible con exactitud. Ahora se está planteando un estándar para aumentar la resolución en algunos casos (como por ejemplo la API del «performance») llamada High Resolution Time. Con esto conseguiríamos tener … Leer más
VelocityConf EU + WebPerfDays 2012
Ha sido una semana un poco estresante, pero por fin ha acabado y con mucha emoción. El lunes pasado veíamos Jaume Ferré y yo a Londres para este par de eventos, el VelocityConf y el WebPerfDays que han sido sin duda más que interesantes. La verdad es que no sería capaz de hacer un resumen, porque me llevo más de 15 páginas de mi libreta llenas de anotaciones, herramientas, y sobre todo, confirmaciones. En realidad la conclusión que saco de los eventos es que en Keep It Simple Lab tenemos una «triple A» (AAA) en lo que se refiere a conocimientos y aplicación de Web Performance, y eso es algo que me enorgullece mucho, porque ya son más de 3 años trabajando mucho en estos temas después de … Leer más
WordPress Child Themes y WPO
Desde hace unas cuantas versiones de WordPress que está disponible la opción de los Child Themes. La creación de este sistema tiene como base hacer un @import del CSS padre.
Evento WebPerf: DNS
Se acerca el Evento Webperf de Septiembre 2012, en esta ocasión sobre las DNS. Y es que muchas veces pensamos que las DNS son algo que está ahí, que da igual poner unas que otras, y eso no se ajusta a la realidad. Las DNS son uno de los elementos más importantes en lo que a la gestión de un sitio web se refiere, sobre todo si tenemos en cuenta que es lo que hace que un dominio acabe funcionando. El evento será presencial en Barcelona, el 26 de septiembre de 2012 de 19:00 a 21:00, en el auditorio de La Salle Campus Barcelona (Edifici St. Josep) Quatre Camins 9, 08017 Barcelona, Barcelona (ES) El ponente, en esta ocasión, será Sergi Morales que nos hablará entre otras cosas … Leer más
Herramienta para analizar datos de Performance.Timing
Cada vez más gente está siguiendo los datos de velocidad de carga de los sitios web. Hace unas semanas hablé de cómo se pueden ver esos datos desde Google Analytics pero… ¿por qué no poder analizar los datos de cualquier sitio? Para ello sólo son necesarias un par de cosas: un navegador «moderno» (Firefox 7, Chrome 6, Explorer 9, Opera 12 aún no da soporte) y una herramienta que he creado (por favor, ahora mismo es la versión primera y es muy fea) llamada Análisis de Datos de Performance.Timing. Básicamente para hacerla funcionar nos hacen falta los datos que nos ofrecen los navegadores a través de la PerformanceTiming API, copiarlos en el recuadro y analizar los datos. Los resultados son bastante sencillos pero te darán cierta información que … Leer más
Velocidad del Sitio en Google Analytics
Lo que al principio había que añadir de forma manual al código de Google Analytics desde hace meses es ya una funcionalidad integrada. Los que revisáis el WPO de vuestro sitio sabéis que en Analytics existe la pestaña de Contenidos -> Velocidad del Sitio pero que estos datos son «poco fiables». Voy a poner un poco más de situación. Hoy en día hay 3 lugares en Google para hacer mediciones de tiempos de carga. El más antiguo es el de Webmaster Tools, dentro de Salud -> Estadísticas de rastreo. Aquí hay 3 gráficos, y el último hace referencia al Tiempo de descarga de una página (en milisegundos). Esta gráfica viene a ser el tiempo que Googlebot tarda en llegar a tu sitio, descargar el contenido e irse. Esta … Leer más
WebPerf Barcelona: Magento
Este jueves (pasado mañana) tenemos de nuevo evento de Web Performance, en esta ocasión para Magento. Una vez más contamos con la colaboración de La Salle donde contaremos con dos ponentes que tratarán la optimización de este, muchas veces, problemático (en cuanto a rendimiento) software de comercio electrónico. El evento, como decía, será en La Salle Barcelona, de 19:00 a 21:00 en la sala de actos de la facultad de Arquitectura (Edifici St. Josep – Auditori, Quatre Camins 2). Te puedes apuntar para asistir de forma gratuita. Los ponentes son Manel Doménech (SysAdmin de Onestic – @onestic) y Jordi Rosell (Einnova – @jrosell) que nos explicarán los entresijos de este sistema y cómo optimizarlo. Entre otros temas que se tratarán, tenemos: Rendimiento de Magento Magento y Cloud APC … Leer más
Vigencia de Google Page Speed y Yahoo! YSlow
Estos días se están haciendo revisiones en algunos sitios de la validez que tienen los puntos que definió Steve Souders hace ya algunos años (entre dos y tres) para saber si siguen vigentes, teniendo en cuenta que los navegadores han evolucionado exponencialmente estos últimos años. Hay que tener en cuenta que las herramientas de Google Page Speed y de Yahoo! YSlow se basan en estos datos pero… ¿siguen siendo vigentes los resultados de estas herramientas? Creo que la respuesta es que en algunos casos no. Comencemos repasando los de Yahoo! (que al final es la plantilla en la que se basan ambos), que fueron los primeros en aparecer y los que creo que no han evolucionado ni actualizado. Minimize HTTP Requests: Creo que no cabe duda de que … Leer más
Fórmula para Domain Sharding
Uno de los problemas habituales en el Domain Sharding es decidir en qué subdominio colocar cada una de las imágenes… esta fórmula tiene que gestionarse de forma que o sea lineal (es decir, primero 3 elementos por subdominio, luego 3 elementos en el subdominio siguiente…) o han de ser aleatorios. Personalmente siempre he planteado que la primera opción es la mejor, pero eso impediría que una misma imagen pueda estar en más de un sitio, a parte de implicar problemas de contenido duplicados. ¿Cuál es la mejor solución entonces? Quizá la segunda, con una fórmula que sea lo más simple pero funcione. Un ejemplo sería este: function getDomainShard($url, $subdominios) { return strlen($url) % $subdominios; } Básicamente lo que hacemos es pasar la dirección URL, la cantidad de subdominios … Leer más
WebPerf Barcelona: WordPress
En unos minutos comenzará el primer #WebPerf en España, organizado desde WebPerf.es por mi mismo y donde yo voy a ser el primer ponente (por las cosas del directo, ya sabéis). Aunque las carreras de última hora son siempre previsibles, tengo un rato para comentar varias cosas sobre el evento que, como bien dice el título habla de WordPress, de cómo conseguir que el WordPress consiga un alto rendimiento. Os dejo con la presentación para descargar y dejo el canal en directo aunque es una prueba piloto, por lo que si hay algún problema, lo siento de ante mano, seguramente poco podré hacer, aunque intentaré que sea posible que se vea (y sobre todo, que se oiga)… Reconozco que estoy un poco nervioso, no tanto por la charla … Leer más
Varnish para WordPress como Servicio
¿Tu WordPress va lento? ¿Te gustaría que volase? Pues esta es la idea que he estado planteando desde hace unos días… Hace cosa de un año que comencé a montar blogs con WordPress bajo Varnish. Al principio iba bien pero configurarlo y mantener las máquinas es algo complejo, a parte de que no todo el mundo puede permitirse montar y mantenerlo. Así que, tras muchas vueltas, pruebas, testeo de plugins y demás, he conseguido poder montar un sistema que, de forma sencilla, permita cachear y mantener un WordPress con Varnish. El sistema es sencillo… sólo hay que subir 2 plugins: uno de ellos es para purgar (limpiar) la caché de Varnish cuando alguien publica algo, comenta, edita… así, cuando el blog cambie, se regenera la caché y los … Leer más
Evento Web Performance
Gentes de Barcelona y Madrid, ¡preparaos! porque llegan los eventos WebPerf a España. Los que me conocéis sabéis que llevo trabajando desde hace bastante en este proyecto, en recuperar mi faceta de «montar eventos», aunque esta vez no quiero montar un macro congreso como en otras ocasiones, sino que quiero algo más reducido y sobre todo de profesionales a profesionales del sector. WebPerf está concebido como un evento formativo en el que más o menos en 2 horas podamos tratar algún tema concreto, de bajo o alto nivel, con un ponente que de una charla de 1 hora exponiendo su punto de vista y el resto del tiempo plantear dudas, sugerencias y que cualquiera pueda salir a la palestra a explicar lo que quiera. Esto significa que el … Leer más
Search Congress Barcelona 2012
Estos días se está celebrando el Search Congress en Barcelona y una vez más me toca dar una charla. Este año es de Web Performance Optimization, y aunque es de sólo 30 minutos, creo que a los que no hayan escuchando nunca del tema les será mínimamente útil. Hace ya un par años, en el Search Congress de Bilbao presenté algo que aún no llamaba WPO sino «infraestructura SEO» en el que di los primeros pasos a tratar sobre todo este mundillo. Esta vez no he tenido las 3 horas que tuve la otra vez, sólo 30 minutos, así que como dicen por aquí «us faig cinc cèntims». Os dejo la presentación para que la descarguéis si os interesa, muy en la línea de seguir siendo un SEO … Leer más
Ancho de banda, latencia y tenerla grande (la conectividad)
El tamaño importa, ¿pero cuánto? Pues las pruebas que se han hecho dicen que tener una conexión a 5 Mbps es suficiente para que un sitio web funcione de forma bastante razonable siempre desde el punto de vista del cliente, claro. Y es que Internet, como en muchas ocasiones dice Jaime Ferré es como un milagro que funcione, pero tiene limitaciones físicas, porque la velocidad de la luz es la que es. En muchas ocasiones hablamos que una web ha de cargar rápido y que cargue rápido significa que ha de tardar entre 1,5 y 2,5 segundos. En este tiempo hemos de incluir el tiempo desde que el usuario pulsa «Intro» en su navegador hasta que la página se muestra por pantalla. Y en la mayor parte de … Leer más
Navigation Time API en Google Analytics
Una de las API más interesantes que nos trae el W3C en los últimos tiempos y que han implementado algunos navegadores es la Navigation Time API. Si queréis ver una prueba de datos, podéis probar la página de Navigaton Timing de la Guía de WPO. Pero claro, estos datos dependen de los usuarios y en la mayoría de ocasiones no los tenemos disponibles… así que, ¿por qué no añadirlos a Google Analytics? Sí, como he dicho no estarán en todas las páginas y tendremos información parcial ya que sólo está disponible en algunos navegadores, pero al menos tendremos cierta información. La información que propongo guardar es la siguiente: DNS: es el tiempo que se dedica a hacer peticiones DNS. Connect: es el tiempo que se dedica a procesos … Leer más
Pirámide de Maslow del internauta
El ser humano tiene unas necesidades, y eso es lo que el Señor Maslow puso en formato gráfico en una pirámide… pero Internet también tiene su público y esas necesidades no son tan personales sino que te las da el sitio web que estás visitando. Y es que la pirámide del internauta es muy sencilla. En la parte más baja de la pirámide, en la base encontramos algo muy simple: el sitio web ha de funcionar. Y es que si un sitio web no funciona, apaga y vámonos. Ya digo que puede parecer una tontería, pero que un sitio web esté caído creo que es de las cosas más duras que te puede pasar. De ahí todo el tema del «cloud» y la virtualización, distribución de cargas, etc… … Leer más
Herramienta que decide el mejor sitio de los contenidos
Por norma general nos toca a los creadores de sitios web decidir dónde va la publicidad o los bloques de contenidos… esto, junto al departamento de marketing acaba constituyendo la creación de un sitio web. Pero, en muchas ocasiones tener la publicidad o determinados bloques de contenido «que generan beneficios» no es siempre el adecuado… ¿qué tal si dejamos a Yahoo! decidir cuál es el sitio óptimo para colocar un bloque de contenido relacionado (tal y como explica en System and method using sampling for allocating web page placements in online publishing of content? Los medios de comunicación offline, principalmente los periódicos, tienen una estructura de contenidos que poco puede variar, ya que el espacio es limitado en espacio… pero en Internet el espacio no lo es tanto, … Leer más
Tiempo de carga de una web
En SEO y WPO hay muchas cifras a tratar. Como expliqué en el artículo que comparaba el WPO con la Fórmula 1 la cosa va de décimas, pero… ¿cuáles son las décimas que importan? En los paneles de Google Webmaster Tools tenemos muchas cifras relacionados con tiempos, y estas cifras significan muchas cosas distintas. Voy a ver si soy capaz de explicar cada una de ellas. Una de las primeras gráficas que tenemos es la de «Rendimiento del Sitio»: Esta gráfica lo que muestra es el tiempo de carga de la página, desde que se descarga el primer byte hasta que se descarga el último, incluyendo la descarga del HTML y de todos los ficheros relacionados (CSS, JavaScript, imágenes, publicidad, etc…). Como digo es el tiempo desde que … Leer más
WPO, SEO y Fórmula 1
Llevo viendo Fórmula 1 desde hace muchos años, antes de que Alonso estuviera en Minardi, y desde hace un tiempo que me doy cuenta de que la Fórmula 1 cada día se parece más al SEO y al WPO. La cosa va de milésimas de segundo, de fiabilidad y de copiar lo bueno de los demás coches (o webs). Lo entretenido de la Fórmula 1 en muchos casos es, para los que no entiendan mucho, que existen una serie de equipos con distintos presupuestos, que cada equipo suele tener 3 pilotos (2 que corren y 1 que prueba), una serie de fabricantes de motores, en esta temporada un único fabricante de ruedas, distintos fabricantes de combustibles y, principalmente, cada equipo juega con la aerodinámica. Podríamos decir que lo … Leer más
Google +1, ¿más rápido?
Hace unos días que Google ha anunciado una mejora de velocidad en el botón de Google Plus One. ¿Pero realmente estos códigos aumentan la velocidad? Cuando hice el plugin para WordPress del Social Share Button hice algunos cambios en el código que te daban anteriormente por defecto. Y es que con la llegada de HTML5 se ha introducido un elemento en los scripts, el async que funciona en todos los navegadores desde hace algunas versiones. Es curioso que Google esté apostando por dejar de dar soporte a varios navegadores (principalmente Explorer 7 para abajo, de Firefox 3.5 para abajo y versiones ya algo antiguas de Chrome y Opera). Sin duda Opera es el mejor navegador en cuanto a soporte de HTML5, por detrás pondría Chrome y Firefox y … Leer más
Estáticos para WordPress
La verdad es que WordPress es un gran CMS y, sobre todo, muy extensible y configurable. En esta ocasión me gustaría enlazar una entrada que publiqué hace ya un tiempo en el que hablaba de los dominios sin cookies con la posibilidad de configurar WordPress para tener las imágenes separadas del dominio principal. El objetivo de este sistema básicamente es separar lo que es la propia web de los contenidos estáticos que se pueden separar. En principio se podrían separar hasta los diseños (JS, CSS…) pero suele ser algo más complejo. Para empezar la idea es separar los contenidos que subimos a través del panel y que suelen estar en la carpeta /wp-content/uploads/. Para comenzar lo que debemos tener es un dominio configurado para estáticos. En mi caso … Leer más
Cachear de forma sencilla una página dinámica en PHP
¿Te ha pasado alguna vez que tienes una web desde hace un montón de años, que la hiciste tú y a veces te da problemas de saturación por exceso de visitas? Pues a mi sí y, aunque llevaba tiempo pensando en alguna forma de cachear, que acababa siendo hipercompleja, hoy me ha dado por pensar alguna forma sencilla basándome en unas pruebas que había hecho hacía poco. La cuestión es que sabía cómo hacerlo, iba por el camino, pero entre unas cosas y otras «nunca encontraba el momento», hasta ahora. El sistema es bastante simple y en principio se podría aplicar a cualquier sitio. El código sería algo tal que este: <?php $md5 = md5($_SERVER[«REQUEST_URI»]); // convertimos la URL a único identificador $file = «cache/».$md5.».html»; // donde se … Leer más
Presentación sobre SEO / WPO
Hace un par de días tuve, una vez más, la oportunidad de impartir una clase de un par de horas sobre SEO en ESDi. En este caso se planteaba como una clase más práctica para gente que no tiene muchos conocimientos tecnológicos y que probablemente tendrán que decidir a qué empresa de SEO contratar, por lo que me focalicé bastante en ese punto, el de cómo elegir a una empresa, qué ha de aportar esa empresa y cómo se ha de pensar el proyecto antes de lanzarse. Hoy en día el que quiere lanzar un proyecto en la red y lo quiere lanzar bien ha de pensar en bastantes cosas… para empezar qué quiere conseguir con el proyecto, dónde se va a alojar (si está enfocado a un … Leer más
Border Gateway Protocol (BGP) y SEO
Aprovechando la visita de estas semanas atrás de David y Rubén estuvimos hablando de algo de lo que ya he comentado alguna vez y que, al estar aquí, pudimos medianamente probar: el tiempo de respuesta. Uno de los problemas que habitualmente me encuentro con la gente de Miami es que si ponemos los sitios en Barcelona la conexión es lenta. Claro está, lento es algo muy extraño, porque estamos hablando de 0,1 segundos más por petición, pero claro, sólo una web que tenga 30 peticiones (algo bastante normal) significa que la web puede tardar en cargar 3 segundos más que si estuviera más cerca. Como digo, en principio no parece mucho, pero como haya algo de saturación en la red y en vez de 0,1 sea 0,2 la … Leer más
Web Performance Optimization, el libro
Aunque ya lo había comentado hace unas semanas por twitter, hoy aparece la que considero la primera versión decente de mi nuevo libro (aunque en esta ocasión estará sólo como libro electrónico) y que se llama Web Performance Optimization. El lema de este libro es: La velocidad es un elemento diferencial; el rendimiento es una nueva oportunidad. La idea de escribir esto surgió hace un par de meses cuando, debido a mi frase de el SEO ha muerto de hace unos años y que cada vez veo que el SEO de por sí sirve de muy poco, sumado a la presentación que hice en el Search Congress de Bilbao, me hizo ponerme manos a la obra. Además, lo bueno de esto es que además de servir a los … Leer más
Cómo cargar JavaScript
Como ya he comentado alguna otra vez, el JavaScript es uno de los elementos que bloquean la carga de los sitios web. Para evitar este bloqueo podemos usar algunos métodos creados con otro código de JavaScript que nos servirá para cualquier fichero externo que queramos cargar. Lo bueno de estos sistemas es que permiten cargar en el sistema no sólo JavaScript sino que se podría abrir hasta CSS. Los códigos son bastante sencillos: function loadScript(url, callback){ var script = document.createElement(«script») script.type = «text/javascript»; if (script.readyState){ // Internet Explorer script.onreadystatechange = function(){ if (script.readyState == «loaded» || script.readyState == «complete») { script.onreadystatechange = null; callback(); } }; } else { // Otros navegadores script.onload = function(){ callback(); }; } script.src = url; document.getElementsByTagName(«head»)[0].appendChild(script); } Con esta función podemos cargar … Leer más
Combinar y reducir JavaScript
En muchas ocasiones me encuentro que tengo varios JavaScript en una página y, al final, se hace bastante pesado tener que gestionar múltiples ficheros. Además, otra cosa que me gusta es la de reducir al máximo el tamaño del fichero, y el hecho de poder combinarlos también permite reducirlos… Es por esto que existe para PHP una pequeña biblioteca de funciones llamada JSmin-php que ayuda a gestionar esta situación tanto la de combinar como de minimizar. Básicamente lo que hace esta biblioteca es leer todos los ficheros JS de una carpeta, combinarlos, comprimirlos y generar un fichero único cacheado. require_once(«jsmin.php»); $files = glob(«/carpeta/js/*.js»); $js = «»; foreach($files as $file) { $js .= JSMin::minify(file_get_contents($file)); } file_put_contents(«/carpeta/combinado.js», $js); En el caso en que no queramos leer todos los ficheros de … Leer más
Data URI mejor que CSS Sprites
Una de las cosas que más a bombo y platillo se nos ha intentado meter en la cabeza en los últimos tiempos es que era mejor usar los CSS Sprites que no un montón de imágenes. Y es cierto, es mejor lo primero que lo segundo… ¿pero es lo óptimo? No. En alguna ocasión he hablado ligeramente sobre las peticiones HTTP y lo que afectan en cuanto a la velocidad de carga de un sitio; una de esas cosas que comenté en su momento fue la de usar los Data URI. Y es que el uso de los CSS Sprites está muy bien si hablamos de navegadores como Internet Explorer 6 o 7, pero desde que tenemos los Internet Explorer 8, Firefox 3 u Opera 9 podemos ir … Leer más
CSS eficientes, según Mozilla
Desde hace ya un tiempo que vengo revisando con frecuencia mi forma de escribir los CSS y comparándolo con las cosas que se comentan en el artículo Writing efficient CSS donde se habla de cómo crear CSS eficientes. Para empezar, existen 4 tipos de identificadores: ID, class, tags y universales. Cada uno de ellos tienen ciertas particularidades… y se pueden anidar. Así que según vayamos anidando y se vaya haciendo más complejo, la lectura y desarrollo también lo será. Hacer algo de este estilo no sería muy útil: table .fila td #enlace { … } Lo idel sería intentar reducir al máximo esta cadena a la menor cantidad posible de identificadores. A veces es mejor crear un class que no aprovechar la anidación de tags. Regla 1: hay … Leer más
Evita, con PHP, ataques XSS y SQL injection
Una de las cosas que normalmente no revisamos cuando creamos un sitio web es la vulnerabilidad que se tiene a ataques por URL por cosas como XSS e incluso a ataques a la base de datos por una mala configuración. Para esto normalmente se usa una revisión y se ejecuta, con PHP, la función htmlentities() que, gracias a eliminar el código HTML puede filtrar cosas como los <script>. Para solventar esto existe una cosa llamada Genius Open Source Libraries que, con unas simples funciones, permiten hacer una megalimpieza contra ataques de todo tipo. require_once ‘Core/sgConfig.inc.php’; // Output an unsafe string, presumably user input $xss = ‘<script>alert(\’oh snap\’);</script>’; echo ‘If your entered your name as ‘ . $xss . ‘, we\’d be in trouble.<br>’ . «\n»; // Sanitize that … Leer más
CSS hacks para Internet Explorer 6 y 7
En muchas ocasiones nos encontramos que necesitamos aplicar algún tipo de estilo específico a Internet Explorer 6 o 7, que son los navegadores que menos funcionalidades CSS soportan pero que aún tienen una cantidad elevada de usuarios. En estos casos, y debido a algunos errores en el funcionamiento del navegador, tenemos la posibilidad de ejecutar un pequeño hack que no afecta al resto. El sistema es sencillo. Internet Explorer tiene un fallo y es que los atributos de los CSS permiten los símbolos «*» y «_» delante. Tomando de ejemplo este código a continuación, podemos ver algunos detalles: .fondo { background: Green; /* Todos los navegadores */ *background: Yellow; /* Sólo Explorer 6 y 7 */ _background: Red; /* Sólo Explorer 6 */ } ¿Qué significaría esto? Pues … Leer más
Cargar una página por bloques
Normalmente cuando desarrollamos una página web no nos preocupamos en exceso cómo enviamos la información a los usuarios que se conectan a ella, dejando que el sistema lo haga de forma automática. Eso no es del todo malo, pero hace que la paralelización de la que alguna vez os he hablado se pueda perder en parte. Sabemos que en muchas ocasiones en la cabecera de una página incluimos los CSS y JS, y que estos pueden llegar a bloquear nuestra carga de página. Teniendo en cuenta que la cabecera en sí «no hace nada» ¿por qué no enviarla en cuanto la tengamos? Esto significaría que, una vez la mandemos, antes de pintar nada, y mientras calculamos el contenido de la página que verá el usuario, podemos enviar cierta … Leer más
WTF – Web Testing Framework
Muchos sabéis que una de las herramientas que últimamente tengo bastante presente es YSlow, y hace unos días que descubrí una ampliación de esta herramienta llamada WTF (Web Testing Framework) que simplemente revisa algunos elementos del código de una página web. Entre los elementos que revisa están: Si se usa el elemento <blink> Si se usa el elemento <marquee> Si se usa el elemento <font> Si no existe el <doctype …> Si se usan imágenes GIF para ajustar el diseño Si se usan enlaces con # o javascript La versión 0.0.1 se lanzó el pasado día 20 y para utilizarla sólo hace falta que ya esté en funcionamiento la herramienta de Yahoo!. A ver si su creador le va añadiendo más elementos que no contempla la herramienta «padre».
Web Performance Optimization, básico en un negocio web
Según voy adelantando en esto de mejorar los sitios web, ya no por SEO únicamente, sino pensando en los usuarios, me doy cuenta de la importancia esa de frases como: es que Google va muy rápido. Sí, la verdad es que sí, se agradece muchísimo que un sitio vaya muy muy rápido hoy en día, porque en gran medida es lo que hace que el usuario se sienta a gusto, porque puede navegar casi instantáneamente. Uno de los inversores importantes en Estados Unidos, Fred Wilson, que ha invertido en Twitter, delicious, Etsy o FeedBurner cuando habla del TOP 10 de las aplicaciones web, pone en el número uno la velocidad del sitio: First and foremost, we believe that speed is more than a feature. Speed is the most … Leer más
Dominios sin cookies
Una de las cosas de las que últimamente se habla bastante es de los CDN y los dominios cookie-less y su influencia en el rendimiento de un sitio web. Si bien es cierto que no estoy nada de acuerdo con distribuir una web dinámica por un CDN, ya que eso destrozaría todo el sentido SEO que se le puede llegar a dar, sí que se pueden plantear soluciones para los contenidos estáticos. Una de estas soluciones es el uso de los dominios sin cookies, que básicamente lo que son es sitios donde almacenar información que no permita recibir o enviar cookies. Y es que las imágenes, estilos o javascripts no necesitan, para nada, enviar o recibir cookies ya que no las van a saber interpretar, y quieras que … Leer más
La mejor forma de hacer una redirección
Los sitios web van y vienen… y como no queremos perder información ni generar un montón de errores en la red de redes, lo mejor es poder migrar información de un sitio a otro fácilmente. Y como ya comenté una vez, el 302 no es una redirección, sino que lo son el 301 y 307, por lo que si queremos migrar todo lo relacionado a un sitio, deberemos aplicar una de estas, en este caso, la redirección 301. Hay que partir de la base de que las redirecciones en HTML (a pelo) no funcionan, al menos no para lo que nosotros queremos. Esto significa que hacer una redirección con el meta-refresh o a través de JavaScript no sirven para migrar contenidos o pesos, sino que el usuario cambia … Leer más
CSSTidy: optimizar CSS es fácil
Una de las cosas por las que no solemos preocuparnos mucho es por los CSS. Solemos hacer un CSS más o menos bien formado, pero a partir de ahí nos limitamos a subirlo al servidor y poco más. Pero… si os digo que se puede ahorrar hasta un 25% en un CSS, ¿no sería interesante aplicarlo? La idea es que los CSS, al ser un elemento de los que se han de cargar antes que «se pinte» el HTML interesa que sea rápido en descargar. Además, es un elemento que suele estar en todas las páginas, y aunque el navegador suele cachearlo, vale la pena que ocupe poco… Una de las herramientas que podemos implementar directamente en nuestro servidor es el CSSTidy, que tiene unas opciones para PHP … Leer más
Cómo hacer muchas peticiones HTTP simultáneas en PHP
Uno de los problemas que habitualmente nos pueden frenar la carga de un sitio es si leemos mucha información de varios sitios de forma simultánea, como podría ser la lectura de varios feeds. Y es que habitualmente se usa la función file_get_contents() que tiene una cosa: es síncrona, es decir, hay que ejecutarla, esperar a que finalice, y volver a ejecutarla… pero ¿por qué esperar a qué acabe de leer para hacer otra llamada? Para hacerlo podemos utilizar las funciones curl_multi_* que básicamente permiten hacer muchas llamadas cURL en muy poco tiempo. No es del todo asíncrono y en paralelo, pero casi casi se podría considerar como una opción. El tiempo total de estas peticiones será la de la más lenta de todas, de forma que si tenemos … Leer más
CSS Reset para HTML 5
Llevo varios días intentando encontrar un CSS Reset pero para HTML 5. Hasta ahora usaba el de Yahoo! YUI, pero incluso la versión 3 no da soporte a las nuevas etiquetas. Por eso me he decidido a revisar un poco los elementos que hay hasta ahora e intentar ofrecer una primera versión del CSS Reset para HTML 5. html{color:#000;background:#FFF;}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote,th,td,hr,iframe,embed,object,legend{margin:0;padding:0;}table{border-collapse:collapse;border-spacing:0;}fieldset,img{border:0;}address,caption,cite,code,dfn,em,strong,th,var,optgroup,a,small,q,time,samp,kbd,sup,sub,mark,col,colgroup,tbody,thead,tfoot,tr,td,th,label,input,button,textarea,select,optgroup,option,label,output{font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;font-variant:normal;}i{font-style:italic;}b{font-weight:bold;}del,ins{text-decoration:none;}li{list-style:none;}caption,th{text-align:left;}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}q:before,q:after{content:»;}abbr,acronym{border:0;font-variant:normal;}sup{vertical-align:baseline;}sub{vertical-align:baseline;}legend{color:#000;}input,button,textarea,select{*font-size:100%;}header,article,section,aside,footer,nav,hgroup,address,figure,figcaption,video,audio,legend,datalist,optgroup,details,summary,command,menu{display:block;margin:0;padding:0;} Se puede descargar el CSS Reset para HTML 5. NOTA: Que conste que es una propuesta personal, basándome en la mayoría de los elementos que propone el HTML 5. ACTUALIZACIÓN: Me han pasado este de Rich Clark.
El código 204 No Content
Hace un tiempo estuve hablando del protocolo HTTP/1.1 y su relación con el SEO. Haciendo un poco de revisión de aquel artículo me quedé con la duda de uno de los códigos: el 204 No Content. Al principio me había parecido verlo en algún sitio que permitía hacer alguna redirección, cosa que no tenía mucho sentido, pero «se quedó ahí». Ahora he estado investigando un poco más del tema y he acabado entendiendo el porqué de este código. Si revisamos lo que dice el estándar, veremos algo más de luz: 204 No Content The server has fulfilled the request but does not need to return an entity-body, and might want to return updated metainformation. The response MAY include new or updated metainformation in the form of entity-headers, which … Leer más
Para qué navegador he de programar
En muchas ocasiones escucho una grandiosa frase del estilo: es que eso que me dices no funciona en Internet Explorer 6. A parte de que Explorer 6 es un producto caducado, y no lo digo yo, lo dice la propia Microsoft con una página sobre el upgrade a Explorer 8 que me parece especialmente divertida por la imagen que ofrece (verdad que no beberías leche caducada hace 9 años?), creo que vale la pena hacer cosas para cumplir el Principio de Pareto, también conocido como la regla del 80-20. ¿Esto que significa? Pues que, como en muchas ocasiones, Yahoo! dispone de una pequeña gráfica que viene a explicar qué navegadores son los que hay que utilizar, y lo lanza una vez por quarter (cada 4 meses). En este … Leer más
Mejora tu sitio, sólo cambiando el .htaccess
En muchas ocasiones los desarrolladores web no disponen de servidores dedicados sino que sólo tienen acceso a su propia cuenta a través de FTP o similar. Es por esto que estaría bien preparar un fichero de configuración que ya esté configurado a la hora de desarrollar un sitio… <IfModule mod_deflate.c> SetOutputFilter DEFLATE BrowserMatch ^Mozilla/4 gzip-only-text/html BrowserMatch ^Mozilla/4\.0[678] no-gzip BrowserMatch \bMSI[E] !no-gzip !gzip-only-text/html SetEnvIfNoCase Request_URI \.(?:gif|jpe?g|png|ico)$ no-gzip </IfModule> <IfModule mod_rewrite.c> RewriteEngine on RewriteRule ^(.*)\.(\d+)(_m_\d+)?\.([^\.]+)$ $1.$4 [L,QSA] </IfModule> <IfModule mod_expires.c> ExpiresActive On ExpiresByType image/png «access plus 1 year» ExpiresByType image/gif «access plus 1 year» ExpiresByType image/jpeg «access plus 1 year» ExpiresByType image/vnd.microsoft.icon «access plus 1 year» ExpiresByType text/css «access plus 1 year» ExpiresByType application/x-javascript «access plus 1 year» ExpiresByType application/javascript «access plus 1 year» ExpiresByType text/javascript «access plus 1 year» … Leer más
Cómo precargar elementos CSS, JS y similares
Seguro que alguna vez habéis pensado cómo hacer que vuestro sitio vaya todavía más rápido. Pues hay forma de hacerlo, sobretodo si la gente suele visitar vuestra página principal y luego sigue navegando. La cuestión es que en muchas ocasiones los CSS y JavaScript de las páginas principales de los sitios difieren mucho del resto de la web… ¿qué hacer para mejorar esto? Pues tener un CSS y JS específico sólo para la página principal y pre-cargar los CSS y JS del resto de la página en la caché del navegador. Para esto, que puede ser un poco complejo, podemos usar un código que he encontrado y que parece funcionar correctamente en todos los navegadores. window.onload = function () { var i = 0, max = 0, o … Leer más
Presentación de Infraestructura SEO del Search Congress
Para los que hayáis estado en el Search Congress de Bilbao o los que no hayáis estado, os dejo la descarga del PDF con la presentación que he hecho en el Search Congress Bilbao 2010. Descargar presentación «Hablemos de Infraestructura» (ocupa más de 2 megas en pdf). Por cierto, si alguien está interesado en tener esto «de serie» en sus proyectos, que me lo diga, porque podemos ofrecerle servicios de alojamiento optimizados para todo lo que tiene que ver con SEO.
Logs del Apache: cómo tenerlos correctamente
Llevaba bastante tiempo queriendo tener unos logs del Apache configurados muy decentemente pero hasta hoy no he conseguido comprobarlos y tenerlos bien. Más que nada todo viene por un problema que algunos seguro que os podéis encontrar. Yo utilizo el programa WebLog Expert para mi sistema de estadísticas interno de los del Apache (donde realmente ves problemas del sistema y cosas que con sistemas de semilla, como Analytics, no se ven), y claro, cuando te encuentras con múltiples subdominios o cosas similares, eso empieza a hacer aguas. Un ejemplo claro puede ser el de tener configurados múltiples subdominios en una misma configuración de Apache, lo que significa que todos los logs se guardan en un mismo fichero. Con esos sueles saber qué fichero se está leyendo, pero no … Leer más
phpBB, contenidos duplicados y etiqueta Canonical
Siempre he defendido phpBB como un buen sistema de foros, pero a veces creo que está pensando más en la Edad Media que para la era Internet. Y es que si hay una cosa que no me gusta absolutamente nada, es que las URL puede cambiar de forma estrepitosa según el navegante que venga, o buscador, además de poder generarse una de combinaciones bestiales. Hace unas semanas tuve que actualizar un foro muy antiguo (versión 2 algo) a la nueva versión (la 3 algo), y me encontré con que, hace unos 4-5 años, le hice unos cambios por temas de SEO en el que las URL quedaban «chulas». El problema es «deshacer todo el SEO que había hecho» para así, a partir de ahora, poder actualizar el software … Leer más
Herramientas básicas: Weblog Expert
Aunque en su día ya comenté que para el día a día utilizo el software Have a Mint para ver visitas y comparar datos, el programa que realmente utilizo de forma semanal para analizar si hay problemas de cualquier tipo y para ver datos históricos muy grandes es Weblog Expert. Para muchos la versión reducida y gratuita será más que suficiente, pero la verdad es que la versión más profesional es ideal para conocer algunos detalles que no tienes de ninguna otra forma. En la demo de ejemplo se puede ver bastante bien el resultado de los datos, aunque os puedo asegurar que hay más de los que se muestran aquí. A parte del tema visitas y similares que da cualquier programa, existe una serie de secciones que, … Leer más
Sitios que “roban” contenidos
Hace ya un tiempo comenté los problemas que tenía con contenidos duplicados por utilizar Feedburner y la imposibilidad de filtrarlos, y que de ahí comencé a utilizar el plugin de WordPress llamado ©Feed. La cuestión es que después d un tiempo, tengo una pequeña lista de IP de servicios de esos que almacenan una copia de los contenidos de los feeds para mostrarlos en su sitio web, lo que podría llegar a afectar a la multiplicidad de nuestros contenidos por la red sin que sea una simple mención, sino copia. Servicio Dirección IP Servicio Dirección IP Wikio 84.55.184.93 Blodico / DigestServices 67.212.188.186 Feedshow 88.191.13.89 Feedage 64.34.174.17 UrlFan 70.165.48.167 MobiType 91.121.143.209 Notifixious 75.101.147.247 Tecnomeme / Webremix 64.13.192.34 WASALive 88.191.36.95 Toluu 67.228.53.210 Blogged 74.54.159.180 flitic 78.129.128.90 Hedatu 84.20.10.71 Portal-seo … Leer más
Cuidado con tus dominios y alojamiento web
Hace algún tiempo que tenía ganas de escribir algo así… y es que últimamente me estoy encontrando con amigos y conocidos que tienen problemas con sus dominios y con el alojamiento web. Dominios hay de 2 tipos, los genéricos (.com, .net, etc…) y los locales (.es, .mx, etc…). Los dominios hay que tenerlos bajo el control propio, y los datos del whois han de estar bajo 100% tu propiedad, ya que si hay datos de terceros puedes tener problemas en el futuro. Personalmente mi recomendación es registrar los dominios genéricos en Godaddy donde tienes control absoluto de todo lo que hace referencia al mismo, y por otro lado, los .es registrarlos en Nic.es, que puede que no sea el más barato, pero es el más claro y limpio … Leer más
La importancia de cachear contenidos
La semana pasada fue una semana bastante chunga en cuanto al servidor se refiere… por alguna extraña razón (¿subida de tráfico?) la máquina comenzó a hacer el gilipollas de tal manera que cada cierto tiempo simplemente petaba todo: base de datos, servidor web… Después de investigar parece que el problema estaba en las conexiones a la base de datos, principalmente de las webs de frases. Así que tras mucho estudiar cómo hacerlo, me monté un sistemita que actualice la web cada 24 horas, que al fin y al cabo es cada cuanto lo hacía habitualmente, al menos en la parte de navegación normal. El problema es que tampoco podía cachear las páginas resultantes debido a que se comprueban determinadas cosas, lo que ha hecho que me invente un … Leer más
Cuando cambias de ISP
Últimamente estoy teniendo problemas con los ISP antiguos que voy dejando. Reconozco que no me voy de ellos por ninguna razón en concreto, sino porque el ISP nuevo es de confianza (unos amigos) y, sin razón aparente, me siento presionado por los antiguos. En el caso del antiguo ISP (del que quité primero mi máquina personal porque estaba harto de que la atacasen y se cayera) me he ido encontrando cosas que van pasando, queriendo o sin querer, pero aún tienen una máquina completa propiedad mía que no he podido recuperar y ya hace 2 meses o más que está desconectada y criando polvo. En el caso de un datacenter anterior al actual, una de las máquinas la han bloqueado. Con esto no quiero decir que no funcione, … Leer más
Cómo montarse un Youtube
El viernes por la tarde estuve hablando con Gina sobre el tema de que sus vídeos estuvieran o no en Youtube, ya que venía todo de una conversación de qué pasaría si le cancelasen la cuenta, y le comenté que si tenía los vídeos en FLV… su respuesta fue afirmativa así que le propuse que usase su propio player. La cuestión era cómo montar un sistema de forma que fuera lo más simple de subir vídeos y de actualizar. Finalmente me puse ayer tarde a programar un rato y salió lo que en breve saldrá al público: videos.ginatonic.net (exclusiva, ni siquiera ella lo ha anunciado 😛 ). El sistema es sencillo… el diseño del blog, las últimas entradas de su feed con MagpieRSS, el feed redireccionado a FeedBurner, … Leer más
No me gustan los JPEGs
Pues eso… no me gusta el formato de imágenes JPEG. ¿Por qué? Pues porque al final, quieras o no, si lo que quieres es que la imagen «pese poco» has de comprimirla mucho y acaba viéndose pixelada. Desde hace un tiempo que decidí que si he de elegir hoy en día entre calidad y velocidad, sabiendo que la gente que habitualmente me lee tiene ADSL a 1 mega como mínimo, decidí que, para iconos transparentes o animados lo mejor es seguir usando imágenes GIF, pero que para cualquier otra cosa (incluso tiene soporte para transparencias, aunque Internet Explorer no le de soporte correctamente, o al menos a mi me hace cosas raras en algunos casos) uso las imágenes PNG. Además, hay varias cosas que me molan: Es un … Leer más