Recortar el Bloat Lean It Out

En las dos publicaciones anteriores de esta serie, hemos discutido cómo hemos pasado de los sitios web pequeños a las enormes aplicaciones y sitios que tenemos hoy. Hemos discutido algunas de las opciones que podemos tomar en relación con la inclinación de nuestro sitio web de WordPress, qué debemos tener en cuenta y por qué cada cosa es importante.. 

En este post, voy a dar algunos ejemplos reales de lo que estoy hablando. No será una guía directa que se ajuste perfectamente a cada caso de uso, pero la intención es proporcionar algunos ejemplos para ayudarlo a comenzar con la limpieza y el recorte de las partes extrañas en su blog que no hace. necesitar.

Archivos de plantillas que se inclinan hacia fuera

A continuación, he tomado un fragmento de HTML de un proyecto reciente. El sitio original contenía muchas cosas que realmente no necesitaba. Con el tiempo, la compañía acumuló complementos y adiciones a su tema y ahora experimentaban tiempos de carga absurdamente lentos.. 

En este caso, la solución más sencilla sería abofetear una capa de almacenamiento en caché delante de ella y terminar. Pero eso realmente no resuelve el problema. Una de las cosas que terminé haciendo fue eliminar aproximadamente el 50% del HTML en el tema, reescribirlo cuando fue necesario y ajustar el CSS en consecuencia para mantener el diseño igual..

Aquí hay una parte del HTML que estaba en el tema original. Arreglé un poco el formato.

El título de la publicación va aquí

  • nombre de la categoría
Publicado en 28 de febrero de 2014 - 2:40 pm por Bob el administrador
Comentario
Publicar imagen del título aquí

publicar contenido aquí

No es el peor HTML que haya visto nunca, y absolutamente ninguna de las partes que realmente hizo al sitio mucho más lento, pero es perfecto para lo que estoy tratando de mostrar aquí: se puede hacer mucha limpieza. Hay una cantidad excesiva de envoltorios y limpieza div elementos. 

Después de un poco de limpieza terminé con:

El título de la publicación va aquí

  • nombre de la categoría
Publicado en 28 de febrero de 2014 - 2:40 pm por Bob el administrador
Comentario
Publicar imagen del título aquí

publicar contenido aquí

Esta pieza de código tiene la mayoría de sus envoltorios despojados. Si no los necesitas, no los agregues. El uso adecuado de CSS le permitirá evitar el uso de la mayoría, si no todos, de los envoltorios en el código original. 

Este ejemplo puede parecer insignificante, y por sí solo, lo es. Pero haga esto en todas partes para cada plantilla en su tema y obtendrá un resultado significativamente menor. 

Al renderizar su sitio, los navegadores estarán más contentos con él, los visitantes móviles en todas partes apreciarán que su sitio se abra más rápido en sus teléfonos porque menos datos significa tiempos de carga más rápidos y usted será más feliz cuando necesite ajustar algo en el código.

Hay mucho más que discutir aquí, pero esta serie no pretende ser la guía definitiva para escribir HTML limpio. En su lugar, su propósito es informarle sobre las posibles mejoras que puede aplicar a su sitio.. 

Rachel McCollin ha escrito una guía muy elaborada y extensa sobre cómo crear un tema para WordPress. Sus detalles de la serie con detalles excepcionales sobre cómo crear un tema y sus ejemplos carecen por completo de cualquier hinchazón, puedo recomendar a cualquiera que busque algunos consejos sobre cómo ordenar su HTML para echar un vistazo a su serie..

Recortando Nuestros Plugins

Ahora que hemos echado un vistazo a los temas, hablemos de complementos.

Muchas de las mismas reglas se aplican aquí. Cuanto más limpio esté escrito el plugin, más fácil será el ajuste cuando sea necesario. Recuerde que perderá la compatibilidad si ajusta un complemento directamente, por lo que generalmente es mejor tratar de evitarlo..

Los complementos vienen en todos los tamaños. Es decir, que algunos hacen lo que tienen que hacer y nada más, otros hacen lo que tienen que hacer y muchas otras cosas. El aumento de características no es infrecuente y es algo que realmente desea vigilar de cerca cuando selecciona los complementos que desea utilizar. En algunos casos (pero no en todos), cuantos más complementos tengas, más lentas serán las cosas.. 

Por supuesto, esto depende en gran medida de la calidad del código del complemento. Por eso es importante asegurarse de realizar la diligencia debida cuando investigue los complementos que está a punto de instalar.. 

Individualmente, puede parecer que cada complemento no está haciendo mucho, pero si reúne una gran cantidad de complementos mal codificados, verá una disminución significativa en el rendimiento.

Cuando inicialmente estaba escribiendo este artículo, iba a tocar un montón de cosas para vigilar al seleccionar sus complementos; Sin embargo, Barış Ünver ha escrito una excelente guía sobre qué buscar al elegir un complemento y no necesito repetir sus palabras aquí.. 

En su lugar, lea su guía si está buscando consejos sobre qué plugin usar.

Que sigue?

Primero, resumamos: Cuanto más limpio escribas tu código, ya sea HTML, PHP, JavaScript, C, más fácil será mantenerlo y ajustarlo más tarde. Esta publicación intentó darle un par de asideros para limpiar sus plantillas y se refiere a excelentes recursos para comenzar con esto y encontrar complementos..

Algunos de ustedes habrán notado que no hablé sobre nada relacionado con CSS, JavaScript, minimizando elementos y otras formas de optimización. Eso es porque el próximo post será exactamente eso.

Mientras tanto, hágame saber en los comentarios cuáles son sus pensamientos después de leer!