Share
Cuando desee optimizar el rendimiento de un sitio web de forma manual, sin utilizar un enfoque prefabricado como AMP, ¿cuáles son los pasos clave que debe seguir??
En este video de mi curso Optimice su sitio web sin AMP, descubrirá una lista de verificación simple que puede usar para asegurarse de que su sitio se cargue tan rápido como lo haría con AMP, si no más rápido.
Aquí está la lista de verificación de optimización básica con la que trabajaremos:
Como puede ver, esta lista de verificación es una parte de las tareas que debemos completar, los principios de la parte que debemos seguir y también los objetivos que queremos alcanzar. Echemos un vistazo a cada uno de ellos con más detalle..
Lo primero en nuestra lista es un objetivo, y es que queremos que nuestro sitio se cargue más rápido o más rápido que la versión AMP del mismo sitio. Es una buena idea seguir controlando el tiempo de carga a medida que avanza en su proceso de desarrollo, de modo que eso es lo que vamos a hacer mientras trabajamos en todo..
Ahora vamos a entrar en las cosas técnicas que tenemos que hacer. La primera consideración es que queremos cargar las fuentes web que usaremos cargadas lo más rápido posible.
Las fuentes web a menudo son archivos relativamente grandes, y no puede mostrar su contenido correctamente hasta que se carguen esas fuentes web. Así que nos aseguraremos de que las fuentes web se carguen muy temprano en la imagen, probablemente como la primera cosa que comienza a cargarse..
Lo siguiente que vamos a hacer es asegurarnos de que nuestro CSS sea muy eficiente y de tamaño muy pequeño.
A veces, puede tener la tentación de tomar un acceso directo e incluir una biblioteca masiva de CSS en sus sitios para ayudar a acelerar el proceso de desarrollo, incluso si la mayoría de ese CSS no es necesario..
Lanzar un archivo CSS masivo puede ayudar a acelerar su desarrollo, pero probablemente ralentizará su sitio web y disminuirá el rendimiento de sus sitios en los motores de búsqueda. Lo digo porque la velocidad de carga es ahora un factor de clasificación. Por eso es importante que tu CSS sea lo más pequeño y eficiente posible.
También tomará ese CSS y lo cargará en línea en la sección principal del sitio. Esta es una técnica que usa AMP, y es una excelente técnica de optimización. Así que definitivamente vamos a mantener nuestro propio proceso de optimización..
A pesar de que nuestro CSS estará en línea en la sección principal, todavía queremos trabajar en nuestro CSS en archivos separados. Tratar de escribir CSS directamente en la sección principal de un archivo HTML realmente no es muy práctico. Así que vamos a configurar todo para poder trabajar externamente en nuestros archivos CSS y luego incluirlos en línea en los archivos HTML para obtener lo mejor de ambos mundos..
Lo siguiente que vamos a hacer es asegurarnos de que, en la mayor medida posible, cualquier JavaScript que utilicemos esté combinado y minimizado..
Una de las desventajas de trabajar con AMP es que tiene varios archivos JavaScript que debe ingresar, y cada uno de ellos debe ingresar por separado. Pero en la mayor medida posible, vamos a tomar nuestro JavaScript y lo combinaremos en un solo archivo, de modo que tengamos el número mínimo absoluto de solicitudes del navegador..
Para hacer que ambas cosas sucedan, trabajando en CSS externamente y combinando y minimizando JavaScript, vamos a configurar un proceso de compilación que hará que ambas cosas sucedan automáticamente.
Usaremos a Gulp para hacer eso. Eso significa que necesitarás tener Node instalado en tu sistema, y también deberás incursionar un poco en el uso del terminal. Pero durante el curso, le explicaré qué hacer, así que incluso si no ha trabajado con la terminal, debería estar bien..
Lo siguiente es que solo vamos a usar JavaScript asíncrono (asíncrono). Lo que esto significa es que la forma en que vamos a cargar nuestro JavaScript no evitará que se carguen otras cosas en la página al mismo tiempo.
Otra cosa que haremos con nuestro JavaScript es que lo vamos a postergar. Eso significa que vamos a impulsar nuestro JavaScript hasta el final del proceso de renderizado. Vamos a asegurarnos de que todo lo demás en nuestro sitio esté completamente cargado antes de hacer nada con JavaScript..
También nos aseguraremos de que cada bit de JavaScript que utilicemos sea un JavaScript de vainilla, y lo haremos para asegurarnos de que no tenemos dependencias. Si usamos, digamos, una caja de luz que depende de jQuery, ahora tenemos que cargar jQuery en nuestro sitio, y eso es más tamaño de archivo y más procesamiento para que el navegador lo maneje.
A menudo no es necesario utilizar varias bibliotecas de JavaScript. Con frecuencia, puede lograr la funcionalidad que desee con JavaScript de vainilla..
También vamos a preferir JavaScript simple. Así que vamos a tratar de mantener el tamaño del archivo de nuestro JavaScript en un mínimo absoluto. No queremos muchas campanas y silbidos; Queremos mantener todo lo más ajustado y eficiente posible..
Y el último punto en JavaScript es que queremos asegurarnos de que, en la medida de lo posible, atendamos a las personas que tienen JavaScript desactivado..
Con la versión AMP del sitio que vamos a crear, si desactivamos JavaScript, puede ver que no tenemos mucho contenido para mirar..
Podríamos hacer un poco más con este sitio para hacerlo un poco más amigable. Pero en su mayor parte, AMP depende totalmente de JavaScript para brindarle cualquier tipo de contenido..
Con nuestra versión que no es de AMP, todavía tenemos nuestra imagen de fondo que se muestra bien, y en realidad también estamos insertando un punto de repliegue para los iconos de fuentes aquí, porque a menudo las personas que bloquean las fuentes de JavaScript también bloquean.
Tenemos un mensaje para que la gente sepa por qué no puede aparecer el video de YouTube, y lo mismo debajo de donde estaría nuestro CodePen.
Nuestra galería sigue apareciendo igual, y luego abajo, solo tenemos la versión de texto de nuestros tweets mostrando como una alternativa en caso de que no haya JavaScript.
También vamos a asegurarnos de que usamos la carga perezosa tanto en imágenes como en iframes. Si tiene un sitio que es bastante largo, la persona normalmente verá primero lo que está en la parte superior de ese sitio web, y luego se desplazará hacia abajo y verá el resto del contenido..
Pero no desea que esperen a que se cargue el resto de ese contenido antes de que puedan comenzar a ver qué hay en la parte superior del contenido. Entonces, con la carga perezosa, solo carga lo que está arriba primero, y luego carga gradualmente el resto del contenido a medida que la persona se desplaza hacia abajo..
Finalmente, también nos aseguraremos de prevenir el reflujo. Algo que verás a menudo, especialmente en dispositivos móviles, es que a medida que se cargan elementos más lentos, como las imágenes, por ejemplo, el resto del diseño de la página debe reajustarse alrededor de la imagen recién cargada.
Esto es malo por un par de razones:
En el curso completo, Optimice su sitio web sin AMP, pondrá en práctica esta lista de verificación. Aprenderá exactamente cómo tomar un sitio existente basado en AMP y convertirlo para usar equivalentes que no sean AMP. En otras palabras, aprenderá cómo hacer que sus sitios se desarrollen a toda velocidad, con técnicas de optimización que usted mismo decida..
Puede tomar este curso de inmediato con una suscripción a Envato Elements. Por una única tarifa mensual baja, obtiene acceso no solo a este curso, sino también a nuestra creciente biblioteca de más de 1,000 cursos de video y libros electrónicos líderes en la industria en Envato Tuts+.
Además, ahora obtiene descargas ilimitadas de la enorme biblioteca de Elementos Envato con más de 400,000 activos creativos. Cree con fuentes, fotos, gráficos y plantillas únicas, y entregue mejores proyectos más rápido.
Accentsconagua