KomentarYa sea que esté ejecutando un blog o un sitio web, la velocidad del sitio es uno de los factores importantes que deciden su éxito a la hora de atraer y retener el tráfico. Todos los motores de búsqueda principales, incluido Google, alientan y recomiendan que los sitios respondan con rapidez y rapidez.
Hoy, nos centraremos en la última característica y específicamente para los blogs alojados en la plataforma de blogger de Google. Antes, nos sumergimos en el tutorial; Le recomendaré que adquiera conocimientos básicos o prácticos para copiar y pegar código HTML o CSS en las plantillas de blogger. Si ya estás jugando con el diseño de tu plantilla, nada puede ser mejor que eso.
Después de completar los pasos mencionados a continuación, puede acelerar su blog por muchos pliegues. Varios principios mencionados aquí pueden aplicarse también a otras plataformas. Como siempre, le advierto que primero pruebe estas técnicas en un blog ficticio. Y, mientras lo ejerce en su blog en vivo, mantenga una copia de seguridad de su diseño y contenido existentes. Entonces, comencemos este proceso de optimización para hacer nuestro blogger blogger, un folleto.
Comenzaremos por analizar el estado actual del blog de blogger en cuestión. Para eso, Google proporciona una excelente herramienta llamada PageSpeed Insights. Escriba la dirección de su blog en el cuadro de texto y presione Intro. Después de procesarlo, la herramienta mostrará la puntuación de velocidad tanto para el modo móvil como para el escritorio, junto con las dificultades y las sugerencias para solucionarlos.
Puntuación de Google PageSpeed para escritorio
Como se muestra en la imagen de arriba, puede ver una puntuación de muestra para el modo de escritorio. Idealmente, esta puntuación debería ser mayor de 85 tanto para el modo móvil como para el de escritorio. Cualquier cosa debajo requiere atención. Recuerde, si está publicando publicaciones largas que contienen una gran cantidad de imágenes, su puntaje aún puede permanecer por debajo de 85, lo cual es bastante razonable y puede ignorarse de manera segura incluso después de que se complete el proceso de optimización.
Por lo tanto, supongo que ha utilizado esta herramienta y ha obtenido su puntuación de PageSpeed tanto para el modo de escritorio como para el móvil y está muy por debajo de 85. Justo debajo de estas puntuaciones, encontrará las razones y las sugerencias descriptivas para solucionar el problema. cuellos de botella
Nos centraremos en la sección más importante que trata sobre los activos de bloqueo responsables de ralentizar tu blog de blogger.
Por lo tanto, los principales culpables son los recursos de CSS y JavaScript externos que está utilizando con su plantilla existente. Esto puede incluir CSS de fuentes de Google, una popular biblioteca de JavaScript como jQuery y archivos CSS adicionales. Este es solo un ejemplo de archivos que pueden estar bloqueando la representación oportuna de las páginas web asociadas con el blog de su blogger.
Obtendrá una lista completa de dichos archivos de bloqueo de procesamiento en la página de puntuación de PageSpeed para que pueda trabajar en ellos. Así que vamos a empezar y comenzar el proceso de optimización de la velocidad.
Eliminar archivos de fuentes
La mayoría de los editores de blogs utilizan fuentes de Google para mejorar la tipografía de su blog. Estas fuentes pueden animar su plantilla pero tienen un costo. Es uno de los recursos de bloqueo de procesamiento que ralentizan el blog. Entonces, ¿cuál es la solución? En caso de que esté utilizando WordPress o algún otro CMS con su propio servidor web, le sugeriré una vez que pruebe esta técnica para optimizar los tiempos de carga de las fuentes.
No he probado esta técnica, por lo que no estoy seguro de si funcionará correctamente en su servidor. Ahora, volvamos a nuestro blog blogger que necesita nuestra atención. La solución es muerta simple. NO utilice ningún archivo de fuente en absoluto. Estoy usando Georgia, Arial y Helvetica en este blog y funciona sin ningún archivo CSS de fuente externa. Si está eliminando las fuentes de Google, asegúrese de reemplazarlos con una combinación adecuada de fuentes seguras para la web que combinen bien con su plantilla de diseño.
Por lo tanto, si está realmente interesado en hacer su blog blogger, una cremallera, simplemente elimine cualquier solicitud de archivo CSS de fuente en su plantilla.
Poner fin a la confianza en jQuery y crear pequeños archivos de script en línea
La mayoría de los blogs ahora dependen en gran medida de jQuery para el funcionamiento sin problemas de varias funciones y efectos. Pero con la mejora de los nuevos estándares HTML y CSS, la mayoría de estas características se pueden completar con código CSS y HTML puro.
Si aún utiliza algunas de las funciones que requieren jQuery, intente encontrar una solución que no la necesite. En este punto, el motor de búsqueda de Google es tu mejor amigo. Una vez que se haya asegurado de que ya no necesita jQuery, simplemente elimine la solicitud de inclusión de ese archivo también.
Está presente en el encabezado o en el pie de página de una plantilla de blogger.
Es posible que aún esté utilizando uno o más archivos JavaScript que no tienen dependencia. Mientras su blog obtiene estos archivos de un servidor externo, el proceso de representación de la página web está bloqueado. La solución a este problema es muy simple. A menos que estos archivos sean muy grandes, simplemente haga que su código esté en línea dentro de su plantilla.
En palabras sencillas, en lugar de llamar estos archivos desde un servidor externo, pegará directamente su código directamente en la plantilla de su blogger. Comience guardando todos estos archivos en su escritorio y ábralos uno por uno en su editor de código favorito. Asegúrese de comentar estas etiquetas de inclusión de archivos de secuencia de comandos en su plantilla para poder probar el funcionamiento del código en línea.
Recuerde, no abra estos archivos en un editor de texto enriquecido (por ejemplo, Microsoft Word), ya que su código puede corromperse. Para cada código de archivo, cree el siguiente fragmento de bloque de código de inclusión de script en el encabezado o justo antes del final del cuerpo de la plantilla dentro de la plantilla. Déjame explicarlo en los siguientes pasos.
Para cada código de archivo, cópielo desde el editor de texto y péguelo en el lugar indicado arriba en el fragmento de código. Ahora copie este fragmento de código completo y péguelo justo antes de la etiqueta </body>. Ahora, una vez que abra las publicaciones de su blog para comprobar si la función / función que requiere ese código de script funciona bien o no. Si no funciona, transfiera el código al encabezado de la plantilla y péguelo en algún lugar antes de la etiqueta </header>.
Repita este proceso para todos los scripts pequeños que desee incluir en línea dentro de su código.
Transferir código CSS completo en el encabezado
La plantilla de Blogger CSS se divide en 3 partes. La parte más común y visible es el código de diseño de la plantilla incrustado en forma en línea dentro del encabezado. Los usuarios trabajan en este código CSS para realizar cambios en el diseño de la plantilla. Pero, hay otros dos archivos CSS externos que pertenecen a la categoría de recursos de bloqueo de procesamiento que contribuyen a ralentizar el blog.
Estos dos archivos son:
728935430-widget_css_bindle.css: este archivo CSS consta del código predeterminado para los widgets genéricos de blogger, como el widget de publicaciones populares, el widget de etiquetas y muchos más. (El prefijo numérico de este archivo puede ser diferente en su plantilla).
permission.css: este archivo consta de dos o más líneas de código CSS. Para ser honesto, no estoy seguro de cuál es su uso.
La plataforma de Blogger obtiene automáticamente estos dos archivos de bloqueo de procesamiento de CSS con cada solicitud de página. Ahora, para deshacernos de este problema, necesitamos eliminar estos dos archivos. Pero, si eliminamos directamente estos archivos, la plantilla que utiliza widgets genéricos de blogger puede distorsionar todo el diseño.
Hoy, nos centraremos en la última característica y específicamente para los blogs alojados en la plataforma de blogger de Google. Antes, nos sumergimos en el tutorial; Le recomendaré que adquiera conocimientos básicos o prácticos para copiar y pegar código HTML o CSS en las plantillas de blogger. Si ya estás jugando con el diseño de tu plantilla, nada puede ser mejor que eso.
Después de completar los pasos mencionados a continuación, puede acelerar su blog por muchos pliegues. Varios principios mencionados aquí pueden aplicarse también a otras plataformas. Como siempre, le advierto que primero pruebe estas técnicas en un blog ficticio. Y, mientras lo ejerce en su blog en vivo, mantenga una copia de seguridad de su diseño y contenido existentes. Entonces, comencemos este proceso de optimización para hacer nuestro blogger blogger, un folleto.
Comenzaremos por analizar el estado actual del blog de blogger en cuestión. Para eso, Google proporciona una excelente herramienta llamada PageSpeed Insights. Escriba la dirección de su blog en el cuadro de texto y presione Intro. Después de procesarlo, la herramienta mostrará la puntuación de velocidad tanto para el modo móvil como para el escritorio, junto con las dificultades y las sugerencias para solucionarlos.
Puntuación de Google PageSpeed para escritorio
Como se muestra en la imagen de arriba, puede ver una puntuación de muestra para el modo de escritorio. Idealmente, esta puntuación debería ser mayor de 85 tanto para el modo móvil como para el de escritorio. Cualquier cosa debajo requiere atención. Recuerde, si está publicando publicaciones largas que contienen una gran cantidad de imágenes, su puntaje aún puede permanecer por debajo de 85, lo cual es bastante razonable y puede ignorarse de manera segura incluso después de que se complete el proceso de optimización.
Por lo tanto, supongo que ha utilizado esta herramienta y ha obtenido su puntuación de PageSpeed tanto para el modo de escritorio como para el móvil y está muy por debajo de 85. Justo debajo de estas puntuaciones, encontrará las razones y las sugerencias descriptivas para solucionar el problema. cuellos de botella
Nos centraremos en la sección más importante que trata sobre los activos de bloqueo responsables de ralentizar tu blog de blogger.
Por lo tanto, los principales culpables son los recursos de CSS y JavaScript externos que está utilizando con su plantilla existente. Esto puede incluir CSS de fuentes de Google, una popular biblioteca de JavaScript como jQuery y archivos CSS adicionales. Este es solo un ejemplo de archivos que pueden estar bloqueando la representación oportuna de las páginas web asociadas con el blog de su blogger.
Obtendrá una lista completa de dichos archivos de bloqueo de procesamiento en la página de puntuación de PageSpeed para que pueda trabajar en ellos. Así que vamos a empezar y comenzar el proceso de optimización de la velocidad.
Eliminar archivos de fuentes
La mayoría de los editores de blogs utilizan fuentes de Google para mejorar la tipografía de su blog. Estas fuentes pueden animar su plantilla pero tienen un costo. Es uno de los recursos de bloqueo de procesamiento que ralentizan el blog. Entonces, ¿cuál es la solución? En caso de que esté utilizando WordPress o algún otro CMS con su propio servidor web, le sugeriré una vez que pruebe esta técnica para optimizar los tiempos de carga de las fuentes.
No he probado esta técnica, por lo que no estoy seguro de si funcionará correctamente en su servidor. Ahora, volvamos a nuestro blog blogger que necesita nuestra atención. La solución es muerta simple. NO utilice ningún archivo de fuente en absoluto. Estoy usando Georgia, Arial y Helvetica en este blog y funciona sin ningún archivo CSS de fuente externa. Si está eliminando las fuentes de Google, asegúrese de reemplazarlos con una combinación adecuada de fuentes seguras para la web que combinen bien con su plantilla de diseño.
Por lo tanto, si está realmente interesado en hacer su blog blogger, una cremallera, simplemente elimine cualquier solicitud de archivo CSS de fuente en su plantilla.
Poner fin a la confianza en jQuery y crear pequeños archivos de script en línea
La mayoría de los blogs ahora dependen en gran medida de jQuery para el funcionamiento sin problemas de varias funciones y efectos. Pero con la mejora de los nuevos estándares HTML y CSS, la mayoría de estas características se pueden completar con código CSS y HTML puro.
Si aún utiliza algunas de las funciones que requieren jQuery, intente encontrar una solución que no la necesite. En este punto, el motor de búsqueda de Google es tu mejor amigo. Una vez que se haya asegurado de que ya no necesita jQuery, simplemente elimine la solicitud de inclusión de ese archivo también.
Está presente en el encabezado o en el pie de página de una plantilla de blogger.
Es posible que aún esté utilizando uno o más archivos JavaScript que no tienen dependencia. Mientras su blog obtiene estos archivos de un servidor externo, el proceso de representación de la página web está bloqueado. La solución a este problema es muy simple. A menos que estos archivos sean muy grandes, simplemente haga que su código esté en línea dentro de su plantilla.
En palabras sencillas, en lugar de llamar estos archivos desde un servidor externo, pegará directamente su código directamente en la plantilla de su blogger. Comience guardando todos estos archivos en su escritorio y ábralos uno por uno en su editor de código favorito. Asegúrese de comentar estas etiquetas de inclusión de archivos de secuencia de comandos en su plantilla para poder probar el funcionamiento del código en línea.
Recuerde, no abra estos archivos en un editor de texto enriquecido (por ejemplo, Microsoft Word), ya que su código puede corromperse. Para cada código de archivo, cree el siguiente fragmento de bloque de código de inclusión de script en el encabezado o justo antes del final del cuerpo de la plantilla dentro de la plantilla. Déjame explicarlo en los siguientes pasos.
Para cada código de archivo, cópielo desde el editor de texto y péguelo en el lugar indicado arriba en el fragmento de código. Ahora copie este fragmento de código completo y péguelo justo antes de la etiqueta </body>. Ahora, una vez que abra las publicaciones de su blog para comprobar si la función / función que requiere ese código de script funciona bien o no. Si no funciona, transfiera el código al encabezado de la plantilla y péguelo en algún lugar antes de la etiqueta </header>.
Repita este proceso para todos los scripts pequeños que desee incluir en línea dentro de su código.
Transferir código CSS completo en el encabezado
La plantilla de Blogger CSS se divide en 3 partes. La parte más común y visible es el código de diseño de la plantilla incrustado en forma en línea dentro del encabezado. Los usuarios trabajan en este código CSS para realizar cambios en el diseño de la plantilla. Pero, hay otros dos archivos CSS externos que pertenecen a la categoría de recursos de bloqueo de procesamiento que contribuyen a ralentizar el blog.
Estos dos archivos son:
728935430-widget_css_bindle.css: este archivo CSS consta del código predeterminado para los widgets genéricos de blogger, como el widget de publicaciones populares, el widget de etiquetas y muchos más. (El prefijo numérico de este archivo puede ser diferente en su plantilla).
permission.css: este archivo consta de dos o más líneas de código CSS. Para ser honesto, no estoy seguro de cuál es su uso.
La plataforma de Blogger obtiene automáticamente estos dos archivos de bloqueo de procesamiento de CSS con cada solicitud de página. Ahora, para deshacernos de este problema, necesitamos eliminar estos dos archivos. Pero, si eliminamos directamente estos archivos, la plantilla que utiliza widgets genéricos de blogger puede distorsionar todo el diseño.
Por lo tanto, una solución ideal es no solo eliminar estos archivos, sino también copiar su código justo antes de nuestro diseño de plantilla existente. Este es un proceso de dos pasos que debe completarse cuidadosamente. Asegúrese de realizar una copia de seguridad de su plantilla antes de completar este paso.
En primer lugar, guarde el contenido de estos dos archivos en archivos de texto plano separados. Ahora, encuentre el siguiente código dentro de su plantilla de blogger. Está presente al comienzo del código CSS de su plantilla dentro del encabezado.
Excluir widgets y archivos de script de Google+ (pie de página)
Otros dos recursos de bloqueo de procesamiento son dos archivos JavaScript incluidos automáticamente por la plataforma Blogger. Uno de ellos es un script de Google+ y el otro está relacionado con todos los widgets de blogger utilizados en el blog. Ambos archivos se llaman al final de la plantilla.
Deshabilitar la inclusión de estos dos archivos es muy simple. Pero, después de excluir estos dos archivos, ocurren pocos cambios en la sección Diseño del panel de control de blogger y se deben tener en cuenta algunas otras cosas importantes para garantizar que no rompa su plantilla de diseño.
Primero, veamos cómo excluir fácilmente estos dos archivos de nuestra plantilla. Vaya al final de su código de plantilla y encuentre la etiqueta </body>. Reemplácelo con el siguiente fragmento de código.
Como dije antes, la exclusión de estos dos archivos requiere más atención por parte del propietario del blog mientras se trabaja con la plantilla. Si abre una de las publicaciones de su blog en un navegador web y examina su código fuente, observará una gran cantidad de código comentado al final de la plantilla que también incluye los dos archivos de los que queríamos deshacernos.
Código del widget de Blogger en pie de página.
Como se muestra en la imagen anterior, puede ver que los archivos de script ahora están comentados y ya no obstaculizan el proceso de representación de la página, lo que acelera significativamente su blog.
En este punto, si hace clic en la opción Diseño dentro de su tablero de control, notará que toda la estructura del diseño ahora está alineada verticalmente como una pila de cajas que se mantienen una encima de la otra como se muestra en la imagen a continuación.
No hay necesidad de entrar en pánico. Solo cuida una cosa extremadamente importante de aquí en adelante. Si está realizando algunos cambios en los widgets existentes dentro de su plantilla de diseño, no se necesita hacer nada y puede editarlos libremente. Pero, si va a agregar un nuevo widget o desea eliminar un widget anterior, vuelva a colocar el fragmento de código en la etiqueta original </body>.
Una vez que haya realizado ese cambio y haya guardado la plantilla, puede agregar o eliminar widgets. Una vez que haya completado el proceso de adición o eliminación del widget, puede volver a reemplazar la etiqueta </body> con el fragmento de código mencionado anteriormente. De esta manera, su plantilla no se romperá y funcionará sin problemas.
Entonces, esto completa el proceso de optimización para acelerar tu blog de blogger. Puede volver a revisar la velocidad de su blog a través de la herramienta PageSpeed Insights y notará que está obteniendo un buen puntaje que es mucho más alto que su puntaje anterior. Los visitantes de su blog también se sorprenderán al ver tiempos de carga significativamente más rápidos de las publicaciones de su blog.
Pautas varias para la optimización de la velocidad
En primer lugar, guarde el contenido de estos dos archivos en archivos de texto plano separados. Ahora, encuentre el siguiente código dentro de su plantilla de blogger. Está presente al comienzo del código CSS de su plantilla dentro del encabezado.
Excluir widgets y archivos de script de Google+ (pie de página)
Otros dos recursos de bloqueo de procesamiento son dos archivos JavaScript incluidos automáticamente por la plataforma Blogger. Uno de ellos es un script de Google+ y el otro está relacionado con todos los widgets de blogger utilizados en el blog. Ambos archivos se llaman al final de la plantilla.
Deshabilitar la inclusión de estos dos archivos es muy simple. Pero, después de excluir estos dos archivos, ocurren pocos cambios en la sección Diseño del panel de control de blogger y se deben tener en cuenta algunas otras cosas importantes para garantizar que no rompa su plantilla de diseño.
Primero, veamos cómo excluir fácilmente estos dos archivos de nuestra plantilla. Vaya al final de su código de plantilla y encuentre la etiqueta </body>. Reemplácelo con el siguiente fragmento de código.
Como dije antes, la exclusión de estos dos archivos requiere más atención por parte del propietario del blog mientras se trabaja con la plantilla. Si abre una de las publicaciones de su blog en un navegador web y examina su código fuente, observará una gran cantidad de código comentado al final de la plantilla que también incluye los dos archivos de los que queríamos deshacernos.
Código del widget de Blogger en pie de página.
Como se muestra en la imagen anterior, puede ver que los archivos de script ahora están comentados y ya no obstaculizan el proceso de representación de la página, lo que acelera significativamente su blog.
En este punto, si hace clic en la opción Diseño dentro de su tablero de control, notará que toda la estructura del diseño ahora está alineada verticalmente como una pila de cajas que se mantienen una encima de la otra como se muestra en la imagen a continuación.
No hay necesidad de entrar en pánico. Solo cuida una cosa extremadamente importante de aquí en adelante. Si está realizando algunos cambios en los widgets existentes dentro de su plantilla de diseño, no se necesita hacer nada y puede editarlos libremente. Pero, si va a agregar un nuevo widget o desea eliminar un widget anterior, vuelva a colocar el fragmento de código en la etiqueta original </body>.
Una vez que haya realizado ese cambio y haya guardado la plantilla, puede agregar o eliminar widgets. Una vez que haya completado el proceso de adición o eliminación del widget, puede volver a reemplazar la etiqueta </body> con el fragmento de código mencionado anteriormente. De esta manera, su plantilla no se romperá y funcionará sin problemas.
Entonces, esto completa el proceso de optimización para acelerar tu blog de blogger. Puede volver a revisar la velocidad de su blog a través de la herramienta PageSpeed Insights y notará que está obteniendo un buen puntaje que es mucho más alto que su puntaje anterior. Los visitantes de su blog también se sorprenderán al ver tiempos de carga significativamente más rápidos de las publicaciones de su blog.
Pautas varias para la optimización de la velocidad
- Además de completar estos pasos vitales, puede seguir las mejores prácticas y pautas adicionales para garantizar que su blog siga ardiendo rápidamente, brindando la mejor experiencia de navegación a los visitantes. Éstos son algunos de estos consejos.
- Al usar imágenes en publicaciones de blogs, asegúrese de optimizarlas en la web para reducir el tamaño general de la página.
- Comprima el código CSS de su plantilla para reducir aún más el tamaño de la página web.
- Al agregar todos los fragmentos de código de JavaScript en línea, asegúrese de comprimir estos scripts también.
- Si es posible, reduce la cantidad de widgets utilizados en tu blog.
- Utilice sprites de imagen, siempre que sea posible.
- Cree un diseño sensible y elimine elementos innecesarios en el diseño para dispositivos pequeños. Suena geek?
