WPO

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

Categorías WPO

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».

Categorías WPO

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

Categorías WPO

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

Categorías WPO

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

Categorías WPO

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