Share
En la primera publicación de esta serie, echamos un vistazo a algunas cosas que podemos hacer para mantener la instalación de WordPress en buen estado. Pero eso no es todo lo que podemos hacer..
En esta publicación, vamos a cubrir qué hacer con sus activos como hojas de estilo, archivos JavaScript, imágenes y más.
Menos es más. Ese es el mensaje que estoy tratando de transmitir con toda esta serie. Con ese fin, he hablado sobre qué hacer con HTML exagerado en el, se hace referencia a un par de recursos que le ayudarán a comenzar a escribir código de tema limpio, así como a encontrar los complementos adecuados..
Ahora es el momento de concentrarnos en nuestros activos: hojas de estilo, scripts Java e imágenes..
Todos estamos acostumbrados a escribir CSS, ¿verdad? Incluso los principiantes entre nosotros han tocado una línea de CSS aquí o allá. Alguna vez usado un pantalla: ninguna ¿algun lado? Ahí tienes, aplicas una regla de estilo..
En su forma más cruda, estoy seguro de que todos los hemos usado. Las personas más experimentadas sabrán que es una buena idea mantener sus estilos donde pertenecen: en sus hojas de estilo. Esto es principalmente una cuestión de mantenimiento. Si tiene estilos en línea en todas sus plantillas, se perderá tratando de encontrar el lugar correcto para ajustar algo, y cuando ajusta eso, todavía tiene que encontrar esos otros cinco lugares que tienen el mismo estilo en línea aplicado..
Poner estilos en archivos de hojas de estilo tiene otra ventaja: puede escribir menos para hacer lo mismo, usar reglas de estilo genéricas en lugar de reglas enfocadas, pero incluso podría ir un paso más allá y usar un preprocesador..
Stylus, LESS y Sass son todos procesadores de CSS. Puede usarlos para escribir menos código y terminar con un resultado final más limpio. Léalo como: menos trabajo, menos código, más fácil de mantener!
Si bien Stylus es la excepción aquí, tanto LESS como Sass tienen complementos de WordPress disponibles. Si puedes evitar usarlos, hazlo. Hay formas de generar una hoja de estilo desde un .Menos y .hablar con descaro a archivo solo una vez, sin usar esos plugins.
Sin ser demasiado específicos, estos preprocesadores le permitirán escribir mucho menos código para obtener el mismo resultado final. En muchos casos, incluso combinarán estilos, lo que hará que sus hojas de estilo sean más limpias y fáciles de mantener. Un tutorial rápido sobre LESS y uno sobre Sass tienen tutoriales existentes aquí mismo en Tuts+.
En cuanto a cuál es mejor, esto se basa en gran medida en las preferencias personales. Los tres procesadores están creciendo y encontrando su camino. Puede encontrar una comparación de los tres procesadores disponibles aquí que explicarán más detalladamente cuáles son sus fortalezas..
JavaScript se ha convertido en una parte aceptada del desarrollo web. Hace unos años, seguíamos aceptando que era normal que nuestros visitantes tuvieran JavaScript deshabilitado, pero esa es ahora la excepción, no la regla..
Personalmente, prefiero construir mis sitios sin él y luego agregar los scripts como una mejora. Esto tiene la ventaja de permitirme mantener los scripts al mínimo, ya que el sitio ya funciona de manera inmediata sin él.
La única opción real para escribir menos JavaScript es hacer exactamente eso. Escribe menos; sin embargo, un buen consejo aquí es utilizar la biblioteca jQuery que viene empaquetada con WordPress, ya que está diseñada específicamente para permitirle escribir menos para lograr el mismo resultado pero al mismo tiempo ser rápido y fácil de usar.
¿Recuerdas el primer post de esta serie? Mencioné que en los últimos tres años, los sitios web tuvieron un aumento absurdo de 235% en tamaño. Loco, ¿no es así? Aquí hay otro hecho: una gran parte de ese aumento viene en forma de imágenes. Dudo que alguien esté sorprendido por esto, ya que el uso de imágenes grandes se ha convertido en una tendencia de diseño, pero aun así, debemos esforzarnos por hacerlo mejor..
Pero cómo?
Asegúrese de que si está utilizando WordPress para establecer los tamaños de imagen adecuados para sus imágenes. No tiene sentido cargar una imagen de 500x500 si solo está utilizando una versión de 100x100 en su diseño. La siguiente opción es usar un servicio como smush.it o kraken.io. Ambos tienen complementos de WordPress disponibles y ambos hacen aproximadamente lo mismo: extraen las cosas de las imágenes que no necesitas o no quieres, las optimizan y devuelven el archivo más pequeño posible de tu imagen sin perder calidad. Smush.it es un servicio gratuito, donde Kraken tiene una solución gratuita y también una solución de pago que optimizará sus imágenes sobre la marcha..
Por ahora, puedes ver que estoy por menos. Menos código, menos imágenes, menos todo. Sin embargo, al final del camino: por más rápidos que sean mis sistemas minimalistas, todavía quiero esa milla extra de asombroso. Me aseguraré de que mi código sea lo más fácil de mantener posible, que mis hojas de estilo sean lo más pequeñas posible y que mis scripts sean cortos. Todo eso, sin embargo, es primordialmente de preparación. Después de todo, todavía tendré los resultados finales minificados. Al usar el preprocesador para mis hojas de estilo, ya puedo producir una edición minified. Para scripts hay soluciones similares disponibles..
Aquí, es importante asegurarse de que sus scripts y hojas de estilo se imprimen utilizando wp_enqueue_script y wp_enqueue_style funciones No se limite a tirarlos en el cabeza de tu plantilla, pero usa function.php para encolarlos y dejar que el wp_head función hacer la salida real.
¿Porque es esto importante? Porque si usted pone en cola adecuadamente sus scripts y hojas de estilo, los diferentes complementos de almacenamiento en caché y minimización disponibles pueden combinarlos adecuadamente en una sola hoja de estilo y script..
Caching? Sí, caching. Junto a la combinación de hojas de estilo y scripts, estos complementos proporcionan un sistema para almacenar en caché la salida de la base de datos o incluso la página completa que obtiene la salida. Ambos disminuirán drásticamente la cantidad de tiempo que un sitio necesitará cargar. Más allá del alcance de esta serie, para elaborar ampliamente los complementos de almacenamiento en caché disponibles y sus características, Adam Burucs escribió un artículo comparando los dos complementos de almacenamiento en caché más grandes que es un buen lugar para comenzar si busca información sobre los dos..
Los recursos externos son una parte interesante de todo esto. Por un lado, usar un proveedor externo descargará el tráfico de su propio servidor. Por lo general, será más rápido debido a las limitaciones del navegador en la cantidad de solicitudes que se pueden enviar a un servidor. Pero hay un inconveniente. No puede controlar lo que viene de su host externo y necesita confiar en que los datos seguirán siendo los mismos y que el host estará disponible. En algunos casos, podría ser una mejor idea mantener sus recursos en su propio sitio..
Para resumir: manténlo delgado, asegúrate de que tus hojas de estilo y scripts sean lo más pequeños que puedas, y luego minimízalos aún más. Cargue las imágenes en el tamaño que las necesite y colóquelas en un optimizador como smush.it o kraken.io. Use un complemento de almacenamiento en caché como punto final para su salida después de haber minimizado todos los elementos antes de introducir cualquier almacenamiento en caché.
Queda una versión más en esta serie en la que cubriremos referencias adicionales sobre los temas que hemos discutido y, con suerte, proporcionaremos algunas ideas útiles adicionales..
Accentsconagua