Blog sobre desarrollo a medida y optimización web

Ya vimos que unifiicar y minimizar archivos CSS y JS puede ser peligroso porque, si no se sabe lo que se está haciendo, puede traernos consecuencias desagradables como que algunas funcionalidades dejen de estar activas o que nuestra web termine pesando más y, por tanto, sea más lenta. La causa de esto último, es decir, de que nuestra web pese más y se ralentice, viene dada por agrupar código y cargarlo en partes de nuestro sitio en los que no es necesario.

Lo mejor, por tanto, si quieres mejorar el WPO de tu web es hacer una carga selectiva de los archivos CSS/JS. Dejo claro que no digo que no se deban de unificar/minimizar CSS/JS sólo que te recomiendo que lo hagas una vez que sepas cuándo conviene, sobre qué archivos hacerlo y dónde. Sólo así, consegirás de verdad una web rápida.

Ahora que llevas un poco de entrada leída, y hay confianza, te tengo que confesar que tengo el armario de mi cuarto todo lleno de ropa, sin embargo, en mi día a día, casi siempre tiendo a ponerme las mismas prendas. Las demás las tengo para momento especiales o esperando a que algún día adelgace o de otra temporada. Los archivos CSS de una página web es como el armario de mi dormitorio. Están llenos de selectores de estilos pero todos estos selectores no siempre se usan. Algunos sí que están para su uso cotidiano, pero otros están para momentos, o páginas, especiales, otros por si acaso algún día hicieran falta y hay otros que el desarrollador usó en el pasado pero ya no( y se le olvidó borrarlos o los dejó por dejadez ). Todo ese conjunto de selectores de estilos que forman parte de mi armario, digo de tu web, sin usar es un peso tremendo. Hay que quitarlos.... leer más

Imagínate esta situación: Tienes una oficina con un gran escritorio. En la misma oficina hay un pequeño despacho que usas como sala de reuniones cuando te visita algún cliente. Esta sala de reuniones sólo cuenta con una gran mesa y una pizarra blanca. Cada vez que viene un cliente y os vais a la sala de reuniones, te ves que tienes que estar yendo y viniendo a tu escritorio para coger determinado materiales. Esto crea una situación incómoda con tu cliente además de los inconvenientes derivados de cortar el diálogo. Como tu siempre tratas de mejorar tu negocio, preguntas a un especialista de Sevilla en el mundo de los negocios. Su respuesta a dicha pregunta es: mete en una caja todo lo que tengas en el escritorio cuando venga tu cliente y te la llevas a la sala de reuniones contigo. Así, siempre tendrás contigo aquello que necesites sin dar traslados innecesarios.

Una página web se parece mucho al caso expuesto. Cada vez que escribes en el navegador una dirección web es como si el navegador tuviera que estar yendo y viniendo al lugar dónde está tu web para traerse todo lo necesario( imágenes, archivos de estilo o CSS, archivos JS o javascript, fuentes, ... ). La solución que te dará un experto WPO es meter todo en 'cajas' por tipo. Así el navegador sólo tendrá que ir en su búsqueda una vez.

Una solución eficaz, como en nuestro simil del principio, pero no deja de ser grotesca... leer más

Nos afanamos en reducir la calidad de las imágenes, en recortarlas, ... todo para lograr ahorrar unos cuantos bytes que haga nuestra web más rápida y para que no suponga tanto coste para nuestros visitante. Además de las conocidas, hay otras maneras para que nuestra página baje de peso al usar imágenes. Aquí te presento una, pero antes es necesario que veamos un poco de teoría:

Visualizamos una web con tan sólo poner su dirección en el navegador. Las imágenes, los vídeos, los pdfs, ... que forman parte de una página web también tienen una dirección asociada. Esta dirección, que no podriamos llamar dirección web porque no son una página web, se le llama URL( de localizador uniforme de recurso, en inglés ). Así que una imagen tiene una URL( que podría ser: https://trasweb.net/commons/data/originales/2017/01/14855420609890e3a0907a37aba48ad59252431579.jpg ), un vídeo también( por ejemplo: https://trasweb.net/videos/mi_video.mp4 ) y así, con todos los recursos de una web. De hecho, hasta una direccón web es una URL.

No creo que me equivoque cuando digo que si te llaman para una cita del médico, preguntan por ti por tu nombre y apellidos pero cuando estás en casa, y te llama alguien de tu familia, pregunta por ti por el nombre, porque el apellido se sobreentiende. Lo mismo pasa con las URLs. Si te fijas, en las URL, que te he puesto de ejemplo anteriormente, contienen al principio la dirección web a la que pertenece. Sin embargo, esto no es algo obligatorio cuando están dentro del contexto de dicha web. En vez de: https://trasweb.net/wp-content/uploads/mi_imagen.jpg, a nivel de código, se puede poner como: /wp-content/uploads/mi_imagen.jpg, ahorrándonos los bytes asociados al dominio( en el ejemplo: 20 bytes) para sólo esa imagen. Como es lógico, cuanta más imágenes uses, mayor será el ahorro total. También es importante saber que estos bytes no sólo nos lo ahorramos en el código de la web. También a nivel de base de datos, con lo que menos tamaño en la base de datos, más rápidas las consultas. ... leer más

Seguro que ya sabes, que los navegadores, cuando escribimos una dirección web en ellos, solicitan de manera transparente el código de esa página web al servidor dónde está alojada. Una vez que llega la solicitud al servidor, un software( por ejemplo, WordPress ) genera el HTML, que es devuelto al navegador. El HTML es el código que contiene la estructura y los datos de la web, a veces también los estilos y su comportamiento.

El HTML, excepto raras ocasiones( por ejemplo, por el uso de programas cachés ), no sale de la nada, sino que se va fabricando poco a poco. Mientras se fabrica este código, puede darse uno de estos dos casos:

• Vaciado de HTML: El código se va mandando al navegador a trozos durante su proceso de fabricación. Esto es muy bueno porque permite que el navegador vaya 'entendiendo' la página para una vez que tenga todas las piezas montarla enseguida. Esta forma de trabajar es la que usa Google y recomienda. Sin embargo, tiene algunos peros:

  • Si cuando ya has mandado HTML, tú código intenta mandar una cookie. no podrá. Es el típico error que nos ha pasado a todos que se nos avisa de que la cookie no se ha podido enviar porque ya se ha mandado código HTML anteriormente y la más de las veces es porque se nos ha colado un espacio en blanco en algún lado. Por lo mismo, tampoco podrías hacer una redirección HTTP.

  • Si intentas hacer un tratamiento con todo el HTML completo, como puede ser cachearlo o minimizarlo, no podrás porque la zona de memoria dónde se guardaba se fue vaciando y ya no tienes el código HTML al completo.

  • Si durante el proceso de creación HTML se decide cambiar el HTML mandado( por ejemplo, porque se produjo un error y necesitas otra apariencia ), no podrás porque ya lo está procesando el navegador.

  • Suspendido de HTML: El código HTML no se mandará al navegador hasta que esté totalmente formado. Por lo tanto, si alguna parte se demora( por ejemplo, porque se ha de realizar una búsqueda compleja contra la base de datos ), toda la carga de la web se demorará. Sin embargo, al esperar hasta el último momento para mandarlo también podremos realizar un tratamiento al HTML resultante. En este post usaremos esta modadlidad para minimizar el HTML, que conllevará que pese menos y, por tanto, consuma menos tarifa de datos del usuario, menos ancho de banda del servidor y, a veces, incluso sea más rápida la carga de la web que usando el módo vaciado.

Ahora pondré el código del plugin WPO de minimización, en el que me apoyaré para hacer la explicación. Aunque no tengas conocimiento de PHP no te asuste, debería de ser fácil de seguir con la explicación. ... leer más

En primer lugar, quería aprovechar para felicitarte el año nuevo y que un año más estés por aquí leyendo lo que escribo. Para mi es una gran satisfacción que estés por aquí. Más aún cuando llevo bastante tiempo sin escribir, aunque no por falta de ganas. Ya sabes, se juntan proyectos y se hace difícil. Sin embargo, como no quería dejar tanto tiempo sin actualizar el blog me he decidido a escribirte un pequeño truco, no por ello trivial o poco importante.

El truco se basa en ganar velocidad en base a eliminar una parte de nuestra web, los sidebars/paneles, que no suelen ser esenciales cuando se está visualizando la página desde un móvil. No está de más decir que los sidebars, o paneles, son esas barras laterales en nuestra página web dónde se anclan, y muestran, las últimas entradas en nuestro blog, los últimos comenarios, informacion sobre nosotros o cualquier otra cosa en forma de widget. ... leer más

RapidoPress es una adaptación independiente( o fork ) de WordPress. Aunque al principio nació como una prueba de concepto, poco a poco fue evolucionando. La pretención era llegar hacer un WordPress óptimo( y rápido ) que en vez de ser orientado a blogs, fuera orientado a portales corporativos o aplicaciones web. Es decir, que aquellos proyectos que hasta ahora se hacían con un framework( Symfony, Yii, Laravel, ... ) se hicieran con RapidoPress y que aquellos que se animaron en su día a hacer un gran proyecto con WordPress no sufran de la sobrecarga de elementos que no necesitan. Todo fue bien en el desarrollo hasta llegar a un punto dónde los cambios requerían romper con la compatibilidad con WordPress.

... leer más

En mi tiempos como desarrollador WordPress, hubo veces que me tocaba hacer cambios de maquetación web sobre temas premiums. Como suelo hacer, para ver el estado del tema, primero pasaba los tests de comprobación de estándares del sitio y, luego, pasaba los tests de medida de rendimiento( por ejemplo Gtmetrix ). Podría decirse que el peso medio de un tema WordPress con lo que trabajaba eran de cinco megabytes.

Como profesional del sector, me creo en el deber de informar a un cliente si algo no anda bien en su web. Así que cuando veía cinco, séis o incluso nueve megabytes, advertía al cliente que ese era un peso excesivo. Alguien, no habituado a relacionar tamaño de un sitio con los perjuicio que derivan, es habitual de que me mirara con cara de habla-en-cristiano-que-no-me-entero. Así que le ponía un simil:

Si tu web pesa cinco megas y la tarifa media de datos de un usuario de móvil es de 1 gigabyte( en el mejor de los casos ). Basta con que un visitante entre cada día laboral en tu página y vea cada vez 10 páginas, ¡¡¡ para que termine consumida toda su tarifa de datos !!!!. ¡¡¡ Sólo con visitarte a ti !!!. Luego, pues llegaba la cara de: ese-es-su-problema-no-el-mío

El peso excesivo de un sitio web, que la mayoría de los que tienen web obvian( hasta que Google diga que lo toma en cuenta y todos vayan corriendo a correguirlo - y luego dirán que cómo está hecho Google nadie lo entiende - ), es un grave problema. Una de las razones de por qué es un problema es, como hemos visto, debido a que le supone un coste para tus usuarios. ¿ Qué coste es ese ?.... leer más