¡Comencemos con el Rendimiento de Interfaz!

• No pierda favicons:

Los favicons son como la pequeña ID de su sitio. Y ya sea que tenga un archivo favicon.ico o no en la carpeta raíz de su sitio web, los navegadores lo solicitarán y si no tiene el archivo, la respuesta será un error “404 No encontrado“.

Tenga cuidado y procure no dar una impresión negativa en la primera interacción con el navegador. Para resolver todos los problemas, puede generar favicon y archivo de manifiesto para su sitio web con esta herramienta en línea.

• Utilice metaetiquetas de redes sociales:

Las metaetiquetas son muy importantes para las redes sociales y la clasificación de Google. Puede generar todas sus metaetiquetas sociales (Facebook, Twitter, Google, etc.) con este generador de metaetiquetas en línea.

• Comprima sus imágenes:

Cargar imágenes puede aumentar o prolongar el tiempo de carga de su página hasta un 70%. Así que, si puede, use imágenes SVG y optimícelas después de la producción. Para ello, puede probar este compresor de imágenes en línea.

• Optimización CSS:

Autoprefixer para CSS multiplataforma

Todos escribimos reglas CSS para nuestro navegador favorito, pero necesita prefijar todas estas reglas para admitir todo tipo de navegador. Autoprefixer utilizará los datos basados ​​en la popularidad actual del navegador y el soporte de propiedad para aplicarle prefijos. Puedes usarlo con la línea de comando.

npm install -g postcss-cli autoprefixer

postcss *.css use autoprefixer -d build

O con la configuración del paquete web o con esta herramienta en línea.

Purifycss

Una herramienta increíble que puede ayudarlo a eliminar todo el código CSS no utilizado en su proyecto. purifycss toma contenido (HTML / JS / PHP / etc.) y CSS, y devuelve solo el CSS usado, y es muy útil si su aplicación está usando un marco CSS como Bootstrap.

Para instalar purify-css:

npm install -g purify-css

Cómo usarlo:

purifycss src/css/main.css src/css/bootstrap.css src/js/main.js — min — info — out src/dist/index.css

Obtenga más información de la página github de purify-css.

Minify CSS

Prueba CSS Compressor. ¡Es rápido, fácil y gratis!

• Verifique el rendimiento con PageSpeed ​​Insights

PageSpeed ​​Insights mide el rendimiento de su página para dispositivos móviles y de escritorio. Obtiene la URL dos veces, una con un agente de usuario móvil y otra con un agente de usuario de escritorio.

PageSpeed ​​Insights comprueba si una página ha aplicado las mejores prácticas de rendimiento comunes proporcionándole una puntuación (que va de 0 a 100 puntos) y también, le da algunos consejos para mejorar su puntuación.

• Compresión GZIP

  Habilitar la compresión es una de las formas más rápidas de mejorar el rendimiento de su sitio. Configure GZIP en su servidor y permita que sus usuarios disfruten de los beneficios.

Este es un vistazo de cuánto ancho de banda es pósible llegar a guardar en su propio sitio web.

También puede verificar su compresión Gzip aquí.

• Use CDN

  Según HostPapa, “una red de entrega de contenidos (CDN, por sus siglas en inglés) se utiliza para llevarle contenido web importante a altas velocidades y al máximo rendimiento a los visitantes de un sitio web. La prioridad de una CDN es reducir la latencia, en otras palabras, reducir la cantidad de tiempo que tarda en cargar un sitio web”.

Si esto es lo que busca para su sitio web, le recomiendo probar el plan gratuito de CloudFlare.

• Rastree los errores de Frontend con Sentry:

Sentry es una herramienta increíble para desarrolladores frontend que informa automáticamente las excepciones JavaScript no detectadas activadas desde un entorno de navegador y proporciona una API para informar sus propios errores.

Con esta herramiente usted podrá ver todos los errores en tiempo real y hasta recibir notificaciones por correo electrónico, SMS o Slack. Sentry también puede solicitar comentarios de los usuarios cuando se producen errores frontend.

• Use Google Tag Manager:

En resumen, Google Tag Manager es una solución completa para análisis con la nueva versión de Google Universal Analytics. Por otro lado, Google Tag Manager puede administrar todos sus fragmentos de JavaScript que envían información a terceros en sus páginas web como widgets de facebook y twitter. Le ayuda a ahorrar tiempo de carga y administrar todos los fragmentos de JavaScript en un solo lugar.

¡Gracias por leer!

Siéntase libre de dejar sus comentarios u opiniones. Y si cree que otras personas deberían leer esto, puede compartir esta publicación.

Y no olvide seguirme en mis perfiles de redes sociales para que pueda recibir notificaciones sobre mis próximas publicaciones.