Posts tagged Performance

performance

Benchmark Drupal 7 + APC + Memcached + Varnish sobre usuarios anónimos

0
1 month ago
by Capy in ,

Vamos a hacer algunos testeos para ver lo que podemos llegar a ganar en performance al implementar una serie de tecnologías sobre Drupal 7.

Las pruebas las realizare sobre una instalación LAMP estándar de Ubuntu (Linux Mint en realidad):

  • mysql 5.1.58 (Con su configuración por defecto)
  • php 5.3.6 (Con su configuración por defecto)

El software para mejorar la performance que usé y las versiones de cada uno son:

  • APC-3.1.9
  • memcached 1.4.7
  • Varnish 3.0.4

Esta prueba es solo para que nos demos una idea de lo que podría llegar a implicar el aplicar estas tecnologías en nuestro sitio de Drupal 7, por lo que he dejado fuera cualquier explicación técnica.

Las pruebas las hice en un core2Duo @ 2.2ghz de 2 núcleos en un Linux Mint de 64bits y 8gb de ram.

La idea es ir agregando tecnologías e ir viendo el teórico beneficio que esta aporta aplicadas a la practica.

Lo primero es lo primero. vamos a hacer un bench de Drupal 7.10 en sobre nuestro LAMP sin haber tocado su configuración inicial.

Utilice Apache benchmark (ab) para todos los testeos variando la concurrencia y cantidad de request para aprovechar al máximo los recursos de los que disponía en cada testeo que hice.

Primera ronda. Estableciendo un punto de referencia.

Test 1: Drupal 7 sin cache de ningún tipo.

Resultados:
Requests per second: 5.71 [#/sec] (mean)
Transfer rate: 45.35 [Kbytes/sec] received

Test 2: Drupal 7 marcandole las opciones “Aggregate and compress CSS files.” y “Aggregate JavaScript files.” en “admin/config/development/performance”

Resultados:
Requests per second: 6.38 [#/sec] (mean)
Transfer rate: 46.27 [Kbytes/sec] received

Podemos apreciar que no hay cambios. nada que comentar.

Test 3: La configuración del testeo anterior + “Cache blocks” en “admin/config/development/performance”

Resultados:
Requests per second: 5.18 [#/sec] (mean)
Transfer rate: 37.54 [Kbytes/sec] received

Pasados los tes primeros test ya no quedan dudas que el cuello de botella de los procesadores son los limitantes. Apenas si pudimos conseguir que varíe el resultado.

——————————————————————

Hasta acá fue lo aburrido, porque en realidad lo anterior no tiene ninguna magia, pero nos da una buena idea de desde que base estamos partiendo. Nuestro objetivo es subir grotescamente la media de request por segundo partiendo de los aproximadamente 6 que hemos conseguido hasta ahora.

Test 4: La configuración del test anterior + “Cache pages for anonymous users” (El cache normal de Drupal).

Resultados:
Requests per second: 127.22 [#/sec] (mean)
Transfer rate: 921.83 [Kbytes/sec] received

Bueno bueno bueno, esto ya es otra cosa. El cache de Drupal por si solo incrementa los request de una forma brutal, pero no nos quedamos ahí ni en broma, vamos a por mas RPS (request por segundo)

——————————————————————

Segunda ronda. tecnologías y configuraciones foráneas:

Test 5: La configuración del test anterior + APC.

Este es uno de los cambios mas recomendados siempre que queramos obtener un incremento de performance (y mejor aprovechamiento de la ram disponible) sin tener que tocar ni una sola linea de código de nuestro Drupal.

Resultados:
Requests per second: 440.43 [#/sec] (mean)
Transfer rate: 3191.39 [Kbytes/sec] received

Boom! performance X4!. Vamos por buen camino. Agreguemos mas de esas cosas que recomiendan los que saben…

Test 6: La configuración del test anterior + Memcached

Para esta prueba instalé el modulo memcache (http://drupal.org/project/memcache) en su versión 7.x-1.0-rc2 y lo configuré en su forma mas básica según las instrucciones de su configuración.

Resultados:
Requests per second: 397.38 [#/sec] (mean)
Transfer rate: 2734.53 [Kbytes/sec] received

No hemos visto mejora alguna pero no porque Memcache no sirva, al contrario, en futuros bench les voy a mostrar como si que ayuda, pero bajo este entorno poco sirve ya que es una capa intermedia con la DB y estamos usando el cache de Drupal que apenas si la toca… en fin, en el próximo bench les muestro, paciencia.

Hasta ahora hemos conseguido mejorar los iniciales 6 RPS del principio por fabulosos 400 RPS de media, pero aun nos queda un paso mas para mejorar los request para usuarios anónimos, y ese es Varnish

Test 7: La configuración del test anterior + Varnish

Resultados:
Requests per second: 6166.57 [#/sec] (mean)
Transfer rate: 45075.00 [Kbytes/sec] received

Acaso hay algo que añadir?

Conclusiones:

Hemos visto como Drupal 7 sin ningún tipo de cache activo es una muy mala idea a la hora de ponerlo en producción.
El cache que trae de serie no es opcional, sino que es mandatorio. No activar como mínimo esta capa de cache en Drupal derivaría automáticamente en un uso elevadisimo de los recursos disponibles, esto acompañado de tiempos de entrega mucho mas largos y por consiguiente la insatisfacción de nuestros clientes.
APC es una excelente adición a nuestro servidor en general ya que agiliza el procesamiento de cualquier pagina escrita en PHP y particularmente en Drupal es un beneficio directo tanto para usuarios anónimos como para usuarios logueados. Recomiendo su uso sin dudarlo aunque hay que hacerlo con cabeza, documentación y alguien que sepa lo que hace si no quieren volver inestable vuestro sistema.

Memcache es una herramienta que no puede faltar en un buen servidor y es harto eficiente para usuarios no logueados en el terreno de Drupal, pero en una instalación en la que casi todos los visitantes sean anónimos, apenas van a sentir la mejora.

Por ultimo y el mas importante, Varnish, que demostró el salto ABISMAL que puede llegar a proporcionar en velocidad cuando lo ponemos a trabajar con una instalación de Drupal. Sin duda pues, esta es la herramienta mas potente de las que hemos utilizado en este bench, pero a su vez, la mas complicada de configurar.

Resumiendo la mejor combinación para usuarios anónimos:
Cache de Drupal = performance decente / Configuración… bueno no lleva configuracion XD. (ganancia de 21x con con respecto a los 6 de media iniciales)
Cache de Drupal + APC = Muy buena performance / Configuración media. (ganancia de 73x con con respecto a los 6 de media iniciales)
Cache de Drupal + APC + Varnish = Bruta performance / Configuración avanzada. (ganancia de 1027x con con respecto a los 6 de media iniciales)

Disclaimer:
No son ni de lejos las mejores versiones ni servidores los que he usado, pero procuré enfocarme en estos debido a que son los mas extendidos/populares en nuestro creciente mundo llamado Drupal.

Saludos.

BD

Mysql Tip: Probar consultas evitando el cache

0
3 months ago
by Capy in

SQL_NO_CACHE es especialmente útil para cuando estas analizando una query lenta que se está cacheando y te impide ver el tiempo que consume en realidad.

SELECT SQL_NO_CACHE id, name FROM customer;

Opciones de esquinas redondeadas para internet explorer 6, 7 y 8

6
1 year ago
by Capy in

Hace casi un año me vi en la tarea de investigar una vez mas cual era la mejor forma de obtener bordes redondeados para estos navegadores pero esta vez teniendo en cuenta la velocidad de desarrollo.

Las opciones que tenia a mano eran:

La mas tradicional, anidar divs hasta el cuatro niveles para poder colocar imágenes en cada una de las esquinas:

<div class="redondeo">
    <div>
        <div>
            <div>
                <h2>Lorem ipsum dolor</h2>
                <div class="contenido">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit...
                </div>
            </div>
        </div>
    </div>
</div>

* {
    font-family: Verdana;
}

.redondeo {
    background: url("images/esq_sup_2-1.png") no-repeat scroll 100% 100% transparent;
    width: 300px;
}

.redondeo div {
    background: url("images/esq_sup_1-1.png") no-repeat scroll 0 100% transparent;
}

.redondeo div div {
    background: url("images/esq_sup_2.png") no-repeat scroll 100% 0 transparent;
}

.redondeo div div div {
    background: url("images/esq_sup_1.png") no-repeat scroll 0 0 transparent;
}

.contenido {
    background: none repeat scroll 0 0 transparent !important;
    padding: 0 15px 15px;
    text-align: center;
}

h2 {
    color: #fff;
    text-align: center;
}

Ver ejemplo | Descargar

Este método tiene sus pro y sus contras.
Lo que tiene de bueno es que esta técnica es compatible con todos los internet explorer partiendo de la versión 5 y que la velocidad de renderizado es instantánea.

Lo malo es que es poco mantenible. Lo digo por lo siguiente: pensemos por un momento que tenemos que cambiar el color de la cabecera de la caja de ejemplo. El primer problema es que al ser una imagen que tiene los bordes creados con algún editor de imágenes como Photoshop, Gimp o Paint.NET, para cambiar el color deberíamos recurrir a estas herramientas. Si quisiéramos ponerle un borde de color lo mismo., y ni hablar si queremos remaquetar el site entero.
Y lo anterior es por decir alguno de los casos mas normales, pero hay mas, y quien haya usado esta técnica sabe de lo que hablo.

La segunda opción DD_roundies:

Es la que estuve usando intensamente hasta hace poco. Se trata de una librería JavaScript llamada DD_roundies.
Esta librería redondea cualquier elemento HTML de tipo bloque usando VML para conseguirlo.
Es realmente notable el resultado que se consigue con esta librería. De hecho por un buen tiempo la consideré la solución mas acertada ya que es realmente fácil de usar:

<!-- Agregamos el JS--> <script src="DD_roundies.js"></script> 
//Agregamos el JS
/*
Ahora solo necesitamos decirle a ddroundies sobre que
class o id debe redondear y de cuanto es el radio de
redondeo que debe aplicar */

/**
 * Un redondeo de todos los bordes a 10 pixeles para todos
 * los elementos HTML que lleven definida esta clase
 * */
DD_roundies.addRule('.redondeado-10px', '30px');

/*
 Tambien se puede especificar un redondeo para cada
 una de las esquinas

 5px para la esquina superior izquierda
 10px para la esquina superior derecha
 15px para la esquina inferior derecha
 20px para la esquina inferior izquierda
 */
DD_roundies.addRule('.redondeado-popurri', '5px 10px 15px 30px');

/*
Es opcional definir los css, pero
aca los defino para darles un color
*/

.redondeado-10px {
    background-color: #336699;
}

.redondeado-popurri {
    background-color: #ff0000;
}

<div class="redondeado-10px">
    <br/>
    <br/>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit...
    <br/>
    <br/>
</div>

<br/>

<div class="redondeado-popurri">
    <br/>
    <br/>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit...
    <br/>
    <br/>
</div>

Ver ejemplo | Descargar

Como ven el uso es simple, PEEEERO la gran pega que tiene esta técnica es el hambre voraz de procesador para renderizar las esquinas, brutal, y en un principio para hacer cosas chicas como una o dos cajas redondeadas va de maravilla, pero haganlo con 20 o 30… Mejor NO LO HAGAN, ya les puedo adelantar que la pagina va a quedar congelada varios segundos hasta que termine de dibujar todas las esquinas.

La tercera, curved-corner:

Basada también en VML, es “curved-corner” y Alexis de Eliseos.net ha dedicado un post hace unas semanas.

Esta implementacion fue de las primeras alternativas que conoci hace un tiempo ya, y la usé y deje de usar con la misma rapidez porque tiene dos flaquezas inaceptables y que al dia de hoy no se han solucionado:
La mas importante es que despues de redondear una X cantidad de div o lo que sea, va a fallar y dejar de redondear el resto.
La segunda es que esta solucion a diferencia de la segunda propuesta, solo permite aplicar un redondeo completo al div, dejando fuera la porsibilidad de hacer un redondeo solo a una esquina.

Las otras soluciones:

¿Hay mas? si claro, un millón de soluciones. Las que mas han prosperado son sobre todo las basadas en frameworks js. Un ejemplo es

http://www.malsup.com/jquery/corner/

Pero ni vale la pena ponerse a hablar este tipo de soluciones porque no alcanzan a crear unos bordes tan perfectos como los que logran las anteriores soluciones ya citadas.

Conclusion:

De estas tres tecnicas la mas reocmendable de todas es la de DD_roundies, que mas alla de tener inconvenientes como las otras dos, es la que mas compensa la relacion velocidad de desarrollo – calidad. Lo unico en lo que hay que tener un muy especial cuidado es en no llenar la pagina de bordes redondeados por medio de este metodo porque insisto, van a tener un increible problema de performance.
De hecho, para cerrar este post puedo proponer una solucion hibrida entre la solucion de redondeo por medio de imagenes y la de DD_roundies, usando la primera para cualquier lista de elementos HTML que se repitan contantemente y sean iguales claro, dejando la opcion de DD_roundies para situaciones mas complicadas de solucionar con lo que a diseño respecta.

internet-explorer-logo

Problemas de performance con flash en Internet Explorer

0
2 years ago
by Capy in ,

Como viene siendo habitual en los desarrollos en los que participo, cuando todo anda como un reloj suizo en los navegadores de verdad, en Internet Explorer simplemente falla todo. Y falla de formas muy raras.

Por ejemplo. El otro dia detectamos un problema de performance con Internet Explorer y flash. Todo andaba bien, solo que se tardaba una decada en renderizar el contenido.

Sabiamos que tenia que ver con unos objetos de flash que estabamos cargando, ya que dos desactivabamos y andaba a las mil maravillas.

Le dimos mil vueltas al problema hasta  que una compañera (gracias Ana) encontró que el problema podia ser el siguiente:

Performance Note   Internet Explorer relies on the MIME type of the resource specified in the SRC attribute to ultimately determine which application to use to display the embedded document. If the TYPE attribute has not been specified, a large portion (if not all) of the resource will be downloaded from the server twice; once to determine the MIME type, and again to retrieve the complete item for playback, display, or both. Specify the TYPE attribute to block this duplicate server request.

Extraído de: http://msdn.microsoft.com/es-es/library/ms535245%28en-us,VS.85%29.aspx

Para los legos en ingles dice básicamente que si no le dices que el “type” es “application/x-shockwave-flash” dentro del objeto <embed>, Internet Explorer va a bajar todos los flash para analizar de que type se trata y a posteriori los va a bajar otra vez para mostrarlos.

Es ridículo que haga eso. Podría usar el objeto que ya ha descargado.

Entonces ya saben. Si flash les decrecienta el rendimiento de carga en vuestras paginas Web en Internet Explorer casi casi seguro que les este faltando el Type:

<object
classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com
/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0"
width="400" height="300" id="movie" align="">
<param name="movie" value="movie.swf">

<embed src="movie.swf" quality="high" width="400"
height="300" name="movie" align=""
type="application/x-shockwave-flash"
plug inspage="http://www.macromedia.com/go/getflashplayer">

</object>
Go to Top