El rendimiento web es importante para la sostenibilidad. Cuanto menos tengamos que transferir, mejor. También podemos hacer mucho para optimizar el funcionamiento del contenido con el navegador para que el usuario final obtenga información lo más rápido posible.
Como se discutió en artículos anteriores, Green LAMP y Lean WordPress, hay mucho que hacer a nivel de servidor para acelerar su sitio. Sin embargo, el sistema de administración de contenido (CMS) tiene un gran control sobre qué y cuándo se presenta el código en la pantalla. En última instancia, desea presentar su contenido principal lo más rápido posible para que el navegador pueda presentarlo lo más rápido posible.
En este artículo, me centraré en el CMS de código abierto Drupal, que representa alrededor del 12 % del mercado de CMS.
(Nota: WordPress tiene complementos y Drupal tiene módulos).
- Eliminar HTML innecesario para ayudar a que la página se cargue más rápido usando el módulo Fences. Para reemplazar el marcado con un marcado más claro, haga una copia de cualquier archivo de plantilla (*.tpl.php) que viene con Fences y agréguelo a su tema personalizado. También puede crear sus propios archivos *.tpl.php de estilo Fences y colocarlos en su tema utilizando la convención de nomenclatura de vallas. Fences los encontrará automáticamente y los agregará a la lista disponible en la lista desplegable para la configuración del campo.
- Agregue y comprima su CSS y JavaScript activando el módulo Agregación avanzada de CSS/JS (AddAgg). El código de compresión/agregación predeterminado que viene con Drupal Core está bien, pero hay muchos avances en este módulo que mejorarán aún más la carga de la página. Esta respuesta de StackExchange incluye una buena explicación de cómo mover JavaScript y CSS al pie de página con AddAgg. En Drupal 8, Javascript se ejecuta en el pie de página de forma predeterminada. Este módulo también permite que los sitios utilicen la red de entrega de contenido (CDN) de Google para cargar jQuery. Si un navegador ya cargó un archivo javascript desde un CDN, simplemente usará su archivo almacenado en caché en lugar de descargarlo nuevamente. Hay muchos algoritmos para comprimir código. El compilador de cierre de Google puede ser utilizado por el módulo minify o Speedy para reducir el tamaño de su JavaScript.
- Proporcione imágenes más pequeñas a sus visitantes utilizando el módulo Drupal Core ImageCache. Esto es especialmente importante para los dispositivos móviles donde el navegador muestra imágenes mucho más pequeñas. El módulo Imagen es un backport del formateador de visualización de imágenes sensible de Drupal 8 que permite a los administradores optimizar imágenes para diferentes dispositivos y resoluciones mediante la asignación de estilos de imagen a consultas de medios CSS. La página se cargará más lentamente si las imágenes grandes no están optimizadas. Herramientas como TinyPNG pueden ser útiles para reducir el tamaño de las imágenes antes de subirlas a tu sitio. El módulo Lazy Loader puede darle un empujón al diferir la carga de imágenes que están fuera del. Las imágenes no se cargan hasta que el usuario se desplaza por ellas, lo que aumenta la velocidad de la página y reduce la cantidad total de bytes transferidos, ya que la mayoría de las personas no se desplazan hasta el final de cada página. Esto es especialmente útil para sitios con muchas imágenes. Utilice gráficos vectoriales escalares (SVG) en lugar de PNG o GIF, ya que esto reduce el tamaño del archivo. Los archivos SVG suelen ser muy pequeños, se pueden escribir en línea en archivos HTML5 y CSS, y se escalan sin pérdida de claridad. Esto le permite usar la misma imagen en su teléfono que en su escritorio. Drupal 8 reemplaza muchos de sus archivos PNG con archivos SVG para este propósito.
- Deshabilite los módulos innecesarios y no utilizados. Hay módulos como Devel que no deberían habilitarse en el sitio de producción de todos modos por motivos de rendimiento. El módulo de estadísticas de Drupal también puede ralentizar una página porque tiene que escribir en la base de datos en cada carga de página. También hay módulos como la interfaz de usuario de vistas que solo se necesitan cuando cambias una vista, así que ¿por qué no deshabilitarlas de forma predeterminada? Parte del código de los módulos activados se cargará con cada vista de página, lo que ralentizará su sitio.
- Habilitar el módulo de lista de verificación de SEO y siga sus consejos para asegurarse de que los motores de búsqueda dirijan a los visitantes directamente a la información que están buscando. Es probable que muchas personas que visitan su sitio se salten la página de inicio y vayan directamente al contenido al que los dirige un motor de búsqueda. Esto es muy bueno para el usuario y también muy bueno para el medio ambiente.
- Diseñar pensando primero en los dispositivos móvilesy utilizando HTML5 semántico y CSS3 moderno. Con Drupal, llevamos años sugiriendo comenzar con un buen tema base como Zen o Adaptive Theme para la accesibilidad, en parte porque son excelentes plataformas receptivas. Diseñar para un dispositivo móvil primero obliga a las organizaciones a priorizar lo que es más importante para ellas y simplificar su sitio. Esto se puede agregar cuando un usuario navega por su sitio con una pantalla grande y un gran ancho de banda.
- Almacenamiento en caché, almacenamiento en caché, almacenamiento en caché. En Drupal 7, no es raro que un desarrollador o administrador simplemente se olvide de habilitar el almacenamiento en caché de páginas y bloques (Administrar > Configuración > Rendimiento) en Drupal 7. Con Drupal 8, la agregación de CSS/JS de almacenamiento en caché de páginas y bloques está habilitada de manera predeterminada. será utilizado por más sitios por defecto. Asegúrese de aumentar la vida útil de la memoria caché en Drupal para que no regenere una página a menos que sea necesario. Dentro LÁMPARA verde: ahorre energía y el medio ambiente optimizando su sitio web, hay ejemplos de cómo extender esto aún más.
- No utilice Flash. Además de no funcionar en muchos dispositivos, se sabe que Flash consume mucha energía, lo cual fue una de las razones por las que Apple no admitía Flash en los iPhone. Usa HTML5 seguridad O accesibilidad problemas.
- Piensa en tu contenido. ¿Se podría transmitir claramente el significado con menos imágenes? ¿Se crea el contenido con el marcado semántico adecuado, con el estilo de archivos CSS centralizados (y almacenados en caché)? El blog de Andrew Boardman sobre Manoverboard nos anima a mantenerlo simple. El libro de Steve Krug Don’t Make Me Think contiene principios que son «altamente relevantes para todas las interfaces digitales, no solo por la facilidad de uso y el compromiso humano, sino también para determinar el consumo de energía que impulsa nuestro comportamiento en línea. Andrew también aboga por archivar el contenido no utilizado. Los usuarios esperan que los sitios web contengan contenido nuevo y no un historial activo de todas las páginas que se han publicado. Menos páginas significa que hay más páginas de calidad para que los motores de búsqueda las indexen y se necesita menos energía para mantenerlas. El contenido debe ser localizable. Los usuarios se beneficiarán de sitios con una estructura de navegación bien pensada. El uso de taxonomías estructuradas también puede ayudar a los visitantes a encontrar contenido relacionado. Habilite Drupal Core Search, o mejor aún, configure Apache Solr y use el módulo Apache Solr de Drupal para brindar una increíble experiencia de búsqueda por facetas. En Drupal, hay muchas cosas que se pueden hacer en el frontend, backend y en el servidor. Con una buena estrategia de contenido, podemos asegurar que el contenido sea fácil de encontrar y simple de usar. Todo esto ayudará a reducir la cantidad de tiempo que un usuario debe pasar en su sitio, lo que reducirá sus emisiones totales de carbono.
- Encuentre maneras de contribuir a la comunidad. Actualmente hay más de un millón de sitios que usan Drupal, lo que representa aproximadamente el 3% de Internet. Si puede optimizar un módulo o tema para que su sitio funcione más rápido, considere devolverlo a la comunidad para que otros puedan beneficiarse de él.
Finalmente, la primera conferencia virtual de UX sostenible se llevará a cabo el 9 de febrero. Es gratis y en línea. Consigue entradas aquí.
