Optimización de WooThemes.com – WooCommerce

Siempre están sucediendo muchas cosas en WooThemes en términos de desarrollo, mantenimiento y soporte de temas. Junto con todo lo que se necesita para crear temas de alta calidad y mantener contentos a nuestros clientes, también hay bastante trabajo detrás de escena involucrado en el mantenimiento del sitio web de WooThemes.

WooThemes.com maneja mucho tráfico y, de hecho, es rápido acercándose a casi 5 millones de páginas vistas por mes por lo que es realmente más importante que nunca para nosotros mantener el sitio tan optimizado y optimizado como podamos.

Esta publicación analizará algunas de las actualizaciones recientes que hemos realizado en el sitio para mejorar el rendimiento, aumentar la facilidad de uso y adoptar nuevas tecnologías.

Gradientes CSS3

Lo primero que veremos es algo que probablemente no notarías a menos que tengas un buen ojo. Las secciones de navegación y encabezado en todo el sitio se han rediseñado para usar degradados y sombras CSS3, en lugar de imágenes.

Visualmente, la diferencia es mínima, pero no tener que cargar una imagen de 2000 px de ancho en cada página hace la diferencia cuando se trata de tiempo de carga. Tenerlo todo en CSS también lo hace mucho más fácil si queremos cambiar el estilo por cualquier motivo. A continuación se muestra el CSS que usamos para aplicar los gradientes para el encabezado, generado usando el muy práctico Generador de gradientes CSS:

background: rgb(113,153,183); /* Old browsers */
background: -moz-radial-gradient(top, ellipse cover,  rgba(113,153,183,1) 0%, rgba(48,100,148,1) 100%); /* FF3.6+ */
background: -webkit-gradient(radial, top center, 0px, center center, 100%, color-stop(0%,rgba(113,153,183,1)), color-stop(100%,rgba(48,100,148,1))); /* Chrome,Safari4+ */
background: -webkit-radial-gradient(top, ellipse cover,  rgba(113,153,183,1) 0%,rgba(48,100,148,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-radial-gradient(top, ellipse cover,  rgba(113,153,183,1) 0%,rgba(48,100,148,1) 100%); /* Opera 12+ */
background: -ms-radial-gradient(top, ellipse cover,  rgba(113,153,183,1) 0%,rgba(48,100,148,1) 100%); /* IE10+ */
background: radial-gradient(top, ellipse cover,  rgba(113,153,183,1) 0%,rgba(48,100,148,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#7199b7", endColorstr="#306494",GradientType=1 ); /* IE6-9 fallback on horizontal gradient */

Tipografía

Otra área del sitio que se ha mejorado es la forma en que manejamos la tipografía. Inicialmente servimos nuestra fuente personalizada (Geogrotesque, para aquellos interesados) usando Cufon, que era la forma más confiable y aceptable de manejar fuentes personalizadas antes de que @font-face llegara a nuestras vidas. Las fuentes en WooThemes.com ahora se cargan usando @font-face CSS, lo que elimina el uso excesivo de JavaScript y hace que sea mucho más fácil implementar y manejar las fuentes, al mismo tiempo que reduce el tiempo de carga.

Interfaz

Además de los cambios de rendimiento, también realizamos cambios en la apariencia y la interfaz en todo el sitio. Recientemente actualizamos nuestra página de lista de temas con una barra lateral que contiene algunos filtros, lo que facilita mucho la navegación a través de nuestros más de 125 temas y encuentra el que se adapta a tus necesidades. También implementamos este sistema de filtro de barra lateral en nuestra página de extensiones, que ha crecido significativamente desde el lanzamiento de WooCommerce con un montón de extensiones que antes estaban ocultas en las páginas de archivo.

También estamos en el proceso de rediseñar nuestra página de registro de afiliados, en función de información y comentarios basados ​​en análisis adecuados, y algunas pruebas A/B, que no es algo que hayamos hecho mucho en el pasado, y estamos entusiasmados. para ver cómo afectará esto la forma en que diseñamos para woocommerce.com.

Esos son solo algunos de los cambios relacionados con el front-end que hemos realizado en el sitio en los últimos meses. Se necesita mucho más para mantener un sitio como WooThemes a diario y compartiremos más de estos procesos contigo en el futuro.