5 formas de hacer que su sitio sea más pequeño y más rápido -

Confesión: Yo diría que una vez a la semana realmente desearía ser un niño que pasara su día de trabajo cortando césped y haciendo jardinería. ¿Por qué? Porque al final del día, pueden decir “el césped está cortado, el trabajo está completo”. Como desarrolladores web, nunca podremos decir eso, ¿verdad? Un sitio siempre puede ser más eficiente: siempre existen estrategias para eliminar bytes. Siempre. Y mientras nos demos cuenta de eso, interna y eternamente diremos “el sitio no es lo suficientemente bueno”. Para ser un gran desarrollador cotidiano, estamos casi destinados a sentir que nuestro trabajo no es lo suficientemente bueno: ¡qué manera tan negativa de vivir nuestras vidas!

La buena noticia es que existen algunos métodos para obtener ganancias increíblemente fáciles en los departamentos de rendimiento y tiempo de carga. ¡Aquí hay cinco mejoras que puedes completar en minutos para hacer que su sitio sea más rápido para todos los usuarios!

1. Aplastar imágenes – ImageOptim

Aplastar imágenes es el pase gratuito definitivo para mejorar el tiempo de carga del sitio. Photoshop y otras aplicaciones de edición de imágenes son notoriamente ineficientes con la compresión de imágenes, lo que genera muchos KB de descarga adicionales en cada solicitud. ¡La buena noticia es que existen muchas utilidades para eliminar esos KB adicionales! Mi utilidad favorita para Maces ImageOptim.

Puedes usar gzipping tanto como quieras, pero el tamaño adicional de KB de origen es un desperdicio, por lo que usar una utilidad de optimización de imágenes es tan valiosa como cualquier otra estrategia que puedas usar.

2. Llamarada de la nube

CloudFlare, un servicio que comienza siendo gratuito, ofrece muchas mejoras:

• servicios cdn
• Minificación de JavaScript, CSS y HTML
• Servicios de respaldo en tiempo de inactividad
• Prevención DDOS
• Servicio de activos basado en la ubicación

Esto no es un anuncio colocado: davidwalsh.name usa Cloudflare y ha utilizado todas sus funciones. Mi sitio ha ahorrado GB de datos en transferencia gracias a CloudFlare. Incluso cuando mi servidor no funciona, CloudFlare ha servido las páginas sin problemas. Una victoria completa cuando usamos CloudFlare.

3. Bibliotecas de iconos de glifos más pequeños con Fontello

Las fuentes de glifos han sido populares desde hace algunos años y pasaré a enumerar las razones: sabemos por qué son increíbles. El problema es que utilizamos perezosamente archivos de fuentes de glifos completos y solo utilizamos una fracción de las fuentes que contienen. Y aunque rara vez los consideramos, los archivos de fuentes suelen ser enormes. En un emoji: :(. Existen utilidades de Lucking comoFontello .

Fontello le permite elegir glifos individuales de varias fuentes de glifos y así hacer que los KB de su hoja de estilo de iconos de fuente sean más pequeños.

4. Generar archivos estáticos

Nos encantan nuestros scripts dinámicos, pero ¿por qué servir páginas dinámicas cuando bastan páginas estáticas? Esta es una práctica que se ve a menudo con WordPress: el contenido de la publicación generalmente no cambia, pero los anuncios y los comentarios sí.

The answer? Finding the key points when a page may change andgenerating static content when those points occur. A sweet WordPress utilitycalledReally Static which accomplishes this feat for the blogging platform. Of course your non-WordPress CMS system will require custom page generation but the speed advantages will be plenty worth it.

If you have content that you need to rotate in those static pages, like advertisements or links to more current content, consider JavaScript and AJAX requests to get that content — the page will be staticandthe JavaScript will be served from CDN –the only speed consideration will then be the AJAX request!

5. Lazyload Resources…or Embed?

A commonly knownsymptomof site slowness is the number of requests each pagegenerates. In the past we’ve remedied this problem withCSS/image sprites, concatenating JavaScript and CSS resources, and usingdata URIs. You could alsolazyload resources or simply embed them in the page:

document.querySelectorAll('article pre').length  (function() {    var mediaPath="/assets/";    var stylesheet = document.createElement('style');    stylesheet.setAttribute('type', 'text/css');    stylesheet.setAttribute('rel', 'stylesheet');    stylesheet.setAttribute('href', mediaPath + 'css/syntax.css');    document.head.appendChild(stylesheet);    var syntaxScript = document.createElement('script');    syntaxScript.async="true";    syntaxScript.src = mediaPath + 'js/syntax.js';    document.body.appendChild(syntaxScript);})();

The example above loads the syntax highlighter only if elements on the page require highlighting. And what if the syntax highlighter CSS is just a few lines? You could save the extra request and embed it within the page:

style type="text/css"?php include('media/assets/highlight.css'); ?/style/head

Or you could concatenate the highlighter CSS to your site-wide CSS file — either is a benefit!

Como puede ver, se pueden obtener algunas ganancias de velocidad y sitio increíblemente fáciles si está dispuesto a dedicar unos minutos de esfuerzo para lograrlo. Y cuando piensa en la cantidad de visitantes que recibe su sitio y luego en la cantidad de páginas vistas, puede ver por qué estas microoptimizaciones son tan importantes.