Gracias a las sugerencias y los consejos de David Salerno he tratado de optimizar la carga de undolog.com, actividades que, por razones de "tiempo", siempre me desanime. De hecho, no fue capaz de aplicar todos los valiosos consejos de David, pero me las arreglé para dar una buena "limpieza" y reducir los tiempos de carga de todos modos!
Reducción de Widgets, y antipixel Badget
Lo primero que hizo fue reducir los daños por los varios widgets en el blog:
- Se me cayó la líneas que se muestran en los widgets MyBlogLog : de 10 a 5 líneas
- He eliminado el blogroll de antipixel
- La biblioteca aNoobi muestra dos libros en vez de 5
Compresión del tema principal de los estilos CSS y JavaScript script
Como es bien conocida, he "comprimido" el archivo CSS en relación con el tema del blog. He utilizado el compresor sencillo propuesto por peterbe.com . CSS, tales como los relacionados con plugins, me deja sin cambios, tanto por su pequeño tamaño, y se reservan la posibilidad de actualizar automáticamente por WordPress y no "comprimir" en todo momento.
Más complejo, sin embargo, se ha optimizado los scripts de JavaScript. David sugirió crear un solo archivo, pero en mi caso esto es relativamente articulados (algunos scripts se incluyen dinamicamanete por Plugin). La única cosa que podía hacer era ligeramente comprimir prototype.js , utilizando el compresor Dean Edwards ! También intente esto Javascriptcompressor.com .
WordPress Plugin caché
Aquí no he hecho nada ... Miré a varias soluciones (WP-Cache o WP SuperCache), pero debo decir que no tengo muy satisfecho ... por ahora! Veremos más adelante!
Imágenes: el uso de la técnica de "sprites"
Al ver las imágenes a través de CSS (con técnicas de reemplazo de la imagen) se puede hacer un "especial" forma de optimización debido a las características de los estilos. Normalmente yo uso esta técnica en casos de vuelco, o incluso de sitios multilingües. Este procedimiento reduce las preguntas (petición HTTP es una sola imagen que contiene varios) e, indirectamente, también realiza la función de precarga (construido en Javascript) tan en boga hasta el momento Quelch, justo antes de la utilización masiva de CSS . Al definir adecuadamente el estilo de un elemento, puede elegir - a través de la definición de la CSS - la parte para mostrar una imagen que, en realidad, contiene más de uno. Por ejemplo, los títulos de los undolog.com pie de página no son tres imágenes diferentes, pero sólo uno:
Cuando se define la CSS se puede especificar las coordenadas para comenzar. En mi caso, por ejemplo, un solo título es de 314 × 55 píxeles. La imagen contiene solamente los tres títulos en uno al otro, por lo que 314 x (55 x 3)!
Vamos a ver cómo funciona a partir del HTML, que actúa como un contenedor:
1 2 3 |
También puede utilizar una técnica de "la imagen de sustitución", es decir, la sustitución de caracteres de texto con sólo una foto! – che definisce l'area visualizzata: 314×55. La presencia de la etiqueta SPAN hace precisamente eso: eliminar el texto, mientras que el mantenimiento de la vivienda H2 - que define el área de la pantalla: 314 × 55.
En CSS el primer juego se resuelve:
1 2 3 4 5 6 | / * Ocultar el texto en caracteres * / display : none } . div pie de la caja h2 gen {display: none} / * Llamada del contenedor * / display : block ; width : 314px ; height : 55px } . div pie de la caja h2 {display: block; ancho: 314px; altura: 55 px} / * Pone la imagen como fondo del título * / { background : url ( images/tits_footer.png ) no-repeat } . titf_recentpost div # footer-box h2 {background: url (images / tits_footer.png) no-repeat} |
El segundo título:
1 2 | / * La misma imagen pero con offeset vertical desplazado hasta 55 pixels * / { background : url ( images/tits_footer.png ) 0px -55px no-repeat } div # footer titf_mostview caja h2. {background: url (images / tits_footer.png) 0px-55 px no-repeat} |
Tenga en cuenta la presencia de -55px que no hace más que mover el desplazamiento de la visualización de la imagen.
Esta técnica es ideal para todos aquellos casos en los que tiene varias imágenes que ser reemplazado (I también se utiliza para los títulos en la barra lateral o las flechas "verde" dentro y fuera del puesto) y todo esto sin repetir. Algunos de los problemas, o si lo prefiere, pero un poco de atención se debe dar en el caso de las repeticiones horizontales y / o vertical. Si tenemos una textura real, que por lo tanto debe ser ripetura horizontal y vertical, esta técnica no se puede utilizar. En la versión actual de CSS, de hecho, sólo se puede especificar offeset mostrar el tamaño y no "cortar". Esto se hace indirectamente a partir de los contenedores, en mi caso de H2 (véase la definición en el CSS display:block;width:314px;height:55px ). Un recipiente más grande que mostrar al resto de la imagen.
En los casos de repetición sólo orizzonatle o verticales solamente tecnca esto todavía se puede utilizar con un mínimo de previsión:
- Repetido Horizontal: la imagen debe terminar en la derecha y la izquierda
- Repetido Vertical: la imagen debe terminar por encima y por debajo de
Fuerza Bruta: la exportación de MySQL y el Bloc de notas
Una cosa buena que yo, con un nivel muy bajo de la intervención fue para exportar todos los mensajes de texto y darle una sana limpieza:
- Elimina los espacios innecesarios
- con il nuovo Plugin SWFObject, che ho introdotto da poco Sustitución de todos los TAG
OBJECTyEMBEDcon el nuevo plug-in SWFObject, que ha introducido recientemente - Limpieza general HTML también debido al paso de varias versiones de WordPress: 2,0 a 2,5
Para "medir" la bondad de nuestras intervenciones, puede ser útil contar con monitoreo en línea y herramientas de verificación disponibles, tales como Pingdom
También el ojo quiere su parte
Otras optimizaciones menores se refieren a la compresión de las imágenes de fondo, que son capaces de reducir y / o eliminar. Por lo demás, creo que el ojo quiere su parte. Undolog.com blog no será el más rápido en el mundo, pero me gusta 
Las mejoras que ve y siente
Incluso, sin embargo, el cambio ha hecho que su alojamiento, ya MT es más sensible y rápido.
En mi opinión, sin embargo todavía es demasiado pesado en la plantilla. Es difícil seguir los mensajes largos en blanco sobre negro.
Es evidente que de gustibus ...
Hola,
Emmanuel
De acuerdo con firebug se establece el etags y no comprimir la transmisión de datos.
El etags, si no se utiliza por WordPress (cosa que dudo que utilizan), evitar la caché del cliente y la compresión se reduce el tráfico de texto (HTML, JS y CSS) un buen 50%.
Si usted tiene el sitio servido por Apache, añadir estas líneas a su htaccess (o crearlo si no tienes uno).:
FileETag none
AddOutputFilterByType DEFLATE text/html text/plain text/xml text/css app
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch \bMSI[E] !no-gzip !gzip-only-text/html
Header append Vary User-Agent env=!dont-vary
Ver para creer ...
Hay otros trucos posible, establecer la caducidad de los elementos de tal manera que nunca va a cambiar mucho en el futuro, pero esto implica no ser capaz de cambiar hasta la fecha fijada.
@ Emmanuel: Pensé que tenía algún problema para leer blanco sobre el modo de color negro. Probablemente provienen de una generación que comenzó con el monitor de fósforo verde
y luego, cuando tengo que hacer con el "código", yo prefiero esta solución 
Evidentemente, es una cuestión de gusto 
@ David: Estoy feliz! El único "problema" que encontré en estos días es un cambio significativo en el rendimiento, por (mt) durante la noche, hasta llegar a un punto muerto!
He leído en su blog que estos días están haciendo algunos trabajos de mantenimiento y los servidores que se encuentran en Los Angeles, luego una zona de 9 horas de tiempo, cuando nos estamos acercando a la media noche, tendrán acceso a los picos. Confío, sin embargo, que la situación mejore, dado el excelente desempeño durante las horas del día aquí en Italia
@ Nicolás: la punta es excelente! Me documento y probar! Gracias
Excelente directamente sobre las imágenes en movimiento. Yo en mi sitio web, estaba pensando en introducir para reducir el "peso" de los iconos de muchos pequeños que tengo para el resto ... a menos que tenga una o múltiples idiomas-CSS, WP-Cache puede hacer por usted. En cuanto a la ETag, a menos que cambie el mensaje y no es una cosa de WordPress, pero me gustaría recomendar a desactivar ... Sin embargo creo que un excelente trabajo de limpieza, un poco de "que todos deberíamos hacer de vez en cuando en nuestros blogs!