wordpress-performance-parttwo-teaser

La verdad sobre el rendimiento de WordPress [#2/2]

En el primer artículo de esta serie, hablamos sobre todos los puntos importantes para una perfecta optimización del rendimiento en la página. Ahora ya sabe lo que necesita ajustar para acelerar su sitio web de WordPress. Aunque suena bastante fácil en teoría, puede ser bastante difícil de poner en práctica. Por lo tanto, revisaremos juntos todos los puntos para asegurarnos de que apliques todo correctamente. Para ser claros: este artículo cubre cómo acelerar un sitio web de WordPress y obtener una alta calificación de Google PageSpeed.

Analizando el estado inicial

Para esta prueba elijo una instalación limpia de WordPress con importado datos de prueba de unidad de tema para simular un blog completo. Mi tema favorito de WordPress es Baskerville de Anders Norèn porque necesita bastante CSS y JavaScript. Además, le asigné a cada artículo una imagen del artículo. Esto simula un blog bien mantenido de larga data. Además, instalé el complemento Jetpack y activé exactamente los mismos puntos que hice en mi sitio web (TechNick – que tiene 93 de 100 puntos de Google Page Speed). Esto tiene la ventaja de optimizar un sitio web similar a una instalación real normal, ya que se pueden encontrar más archivos CSS y JavaScript dentro del código fuente HTML. No queremos que la optimización sea demasiado fácil.

Activo en Jetpack:

  • Fotón
  • Publicar
  • Intercambio
  • Incrustaciones de código corto
  • Verificación del sitio
  • Suscripciones
  • Enlaces cortos de WP.me
  • Estadísticas de WordPress.com

1. Antes de comenzar: cree un tema secundario

Antes de comenzar, debe crear un tema secundario y activarlo. Los cambios directos en un tema solo tienen sentido si lo creaste tú mismo y, por lo tanto, no se actualizará. Para todos los demás temas, sería mejor que usara un tema secundario, ya que perdería todos los cambios con una actualización del tema y nada volvería a funcionar como debería. los WordPress Codex tiene una gran instrucción Cómo crear un tema hijo. Es importante no para cargar el archivo CSS del tema principal a través del archivo CSS del tema secundario a través de @import. Esto no solo es un mal estilo, sino que va en contra de las pautas de WordPress y provoca una solicitud HTTP más, que queremos evitar. Cargue el CSS correctamente a través de functions.php del tema infantil. Asi es como se hace:


function enqueue_parent_theme_style() {
      wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css' );
}
add_action( 'wp_enqueue_scripts', 'enqueue_parent_theme_style');

La hoja de estilo CSS del tema secundario también debe cargarse correctamente y no debe vincularse en el encabezado. El código debe incorporarse en functions.php del tema secundario y agregarse al encabezado.

/**
 * Proper way to enqueue styles and scripts
 */
function theme_name_scripts() {
	wp_enqueue_style( 'style-name', get_stylesheet_uri() );
}
add_action( 'wp_enqueue_scripts', 'theme_name_scripts' );

La carpeta del tema secundario debe contener un archivo CSS llamado estilo.css y un archivo llamado funciones.php. Una captura de pantalla ayudaría a encontrar fácilmente el tema secundario. Ahora, cargue su nuevo tema secundario a través de (S)FTP en el wp-contenido/temas carpeta en el servidor. Vaya a la interfaz de administración de WordPress y active su tema secundario. Si lo ha hecho correctamente, su código fuente HTML debería contener tres archivos CSS:

  • padre-estilo-css
  • estilo-css
  • jetpack_css-css

2. Prueba el Rendimiento y los Puntos PageSpeed ​​de Google

Para comprender los efectos de los cambios, deberá analizar el estado inicial. Utilizar Herramientas de Pingdom y Información sobre la velocidad de la página de Google para probar el sitio web sin ninguna optimización. No olvides hacer clic en Ámsterdam (si esa es tu ubicación más cercana), que puedes encontrar debajo de la barra de URL en la configuración.

Estado inicial con Pingdom Tools:

pingdom-herramientas-ergebnisEstado inicial con Google PageSpeed ​​Insights:

pagespeed-insights-ergebnis

68 de 100 puntos posibles es malo. Por lo tanto, hay suficiente espacio para optimizaciones.

1. Ajuste el archivo .htaccess

Antes de comenzar, echemos un vistazo rápido al archivo .htaccess de WordPress y agreguemos algunas líneas de código. Puede encontrar el archivo .htaccess en la carpeta principal de WordPress en el servidor donde se encuentran las carpetas. wp-content, wp-admin, etc se encuentran. Cargue el .htaccess en el escritorio y pegue lo siguiente debajo de «Finalizar WordPress»:

################### Activate compression ######
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript

################# Activate browser caching ######
ExpiresActive On
ExpiresDefault "access plus 1 month 1 days"
ExpiresByType text/html "access plus 1 month 1 days"
ExpiresByType image/gif "access plus 1 month 1 days"
ExpiresByType image/jpeg "access plus 1 month 1 days"
ExpiresByType image/png "access plus 1 month 1 days"
ExpiresByType text/css "access plus 1 month 1 days"
ExpiresByType text/javascript "access plus 1 month 1 week"
ExpiresByType application/x-javascript "access plus 1 month 1 days"
ExpiresByType text/xml "access plus 1 seconds"

La prueba de Google PageSpeed ​​muestra los efectos de estas dos entradas en el rendimiento:

Bildschirmfoto-2014-12-12-um-14.57

Con esta herramienta, puedes comprobar si funciona la compresión Gzip. los Herramienta REDBot comprueba el correcto funcionamiento de la memoria caché del navegador.

2. Optimiza CSS y JavaScript

Antes de comenzar con ajustes importantes en el CSS, primero debe probar ajustes menores como el resumen y la compresión. Primero compruebo si jQuery debe permanecer en el encabezado (como suele serlo por razones de compatibilidad). Entonces, agrego algo de código a functions.php del tema secundario que coloca todos los archivos de JavaScript en el pie de página.

/**
*
* Puts all JavaScript into the footer
*
*/
add_action( 'wp_enqueue_scripts', 'evolution_print_jquery_in_footer' );

function evolution_print_jquery_in_footer() {

if ( ! is_admin() )

remove_action('wp_head', 'wp_print_scripts');
remove_action('wp_head', 'wp_print_head_scripts', 9);
remove_action('wp_head', 'wp_enqueue_scripts', 1);
}

Descarga e Instalación de Autoptimize

optimizar automáticamente

Autoptimize es un complemento pequeño y poderoso para la compresión, resumen y minimización de archivos CSS y JavaScript. Tiene, además, una función incorporada para el “CSS above-the-fold” que necesitaremos más adelante. Después de instalar y activar Autoptimize, cambie a “Configuración => Optimizar automáticamente” en el tablero de WordPress y haga clic en las tres opciones: Optimizar HTML, CSS y JavaScript. Cuando haya hecho esto, su código fuente HTML se verá comprimido pero ordenado. La cantidad de archivos incorporados se ha reducido drásticamente. Solo puedo encontrar dos archivos CSS (tema y fuentes de Google) y dos archivos JavaScript (tema y Jetpack) en el código fuente del tema secundario de Baskerville.

Descarga Autoptimize de WordPress.org

Descarga e Instalación de Cachify

cachificar

Cachify es un complemento de almacenamiento en caché de WordPress muy eficiente que tiene solo unas pocas opciones de configuración. Sin embargo, hace un trabajo bastante bueno. Cachify genera páginas HTML estáticas a partir de páginas PHP dinámicas. Estos se pueden entregar más rápido al navegador, ya que no requieren el intérprete de PHP para cada llamada. Cachify es uno de los mejores complementos de almacenamiento en caché del mercado porque es fácil de usar y brinda buenos resultados. El caché se almacena mejor en el disco duro: de las dos opciones, esta es la más rápida. Sin embargo, deberá agregar un fragmento de código al .htaccess. Puede encontrar este y muchos más consejos del desarrollador Sergej Müller en el sitio web de Cachify.

Descargar Cachify desde wordpress.org

Resultados provisionales

prueba de ein-weiterer

Las herramientas de Pingdom son amables con nosotros y ya muestran resultados decentes. ¡Apuesto a que Google PageSpeed ​​Insights no será tan optimista!

zwischentest-google

Google agradece todo el esfuerzo con un solo punto ya que aún quedan tres problemas con el script de prueba de los cuales solo uno puede solucionarse sin más. ¿Porque eso? Repasemos los tres puntos:

Punto 1: elimine los recursos de JavaScript y CSS que bloquean la representación del contenido de la mitad superior de la página.

Fácil de resolver. Se trata de encontrar los puntos dentro del CSS necesarios para mostrar el contenido en la mitad superior de la página. Estas Las partes CSS deben comprimirse y agregado en línea en el encabezado. Vincule el resto del CSS en el pie de páginapor lo que no perturba la reproducción de la página.

Punto 2: Optimizar Imágenes. No está libre de problemas con este tema ya que necesita cambiar el código.

Primero, determine qué tamaño deben tener las imágenes de los artículos en su página de inicio. Si usa Google Chrome, haga clic derecho en la imagen y elija «Inspeccionar elemento». Allí verás qué tamaño debe tener y el tamaño real de la imagen.

bild-untersuchen

Como puede ver en la captura de pantalla, la imagen tiene 600 x 300 píxeles y HTML la escala a un tamaño de 359 x 180 píxeles. Entonces, necesitamos un tamaño correcto de 359 píxeles por algo.

Índice.php es responsable de la visualización de la página de inicio. Si lo copia de la carpeta del tema principal y lo abre con un editor de texto, notará que el contenido.php de El índice.php está cargado. Cópielo también en el escritorio y agregue la siguiente línea:

post-miniatura

Reemplace esta línea por, por ejemplo:

<?php the_post_thumbnail( 'front-thumb' ); ?>

Además, deberá agregar lo siguiente en functions.php de su tema secundario:

/**
* Image sizes
*
*/
if ( function_exists( 'add_theme_support' ) ) {

add_theme_support( 'post-thumbnails' );
add_image_size( 'post-image', 945, 9999 );
add_image_size( 'post-thumbnail', 600, 9999 );

add_image_size( 'front-thumb', 359, 9999 );
}

Para asegurarse de que sus cambios no se pierdan con la próxima actualización del tema, cargue el editado contenido.php junto con las funciones.php en la carpeta del tema hijo en el servidor Ahora, las imágenes en la página de inicio deben asignarse nuevamente, para que WordPress pueda cambiar la escala de las miniaturas de las publicaciones correctamente. Probemos de nuevo nuestro sitio web con Google PageSpeed ​​Insights. No olvides: Borrar el caché de Cachify de antemano (símbolo de papelera en la parte superior derecha del tablero).

cachify-caché-loeschenEl nuevo resultado de Google PageSpeed ​​Insights

weiterer-pagespeed-testPunto 3: Reducir JavaScript.

javascript-reduzieren

¿Qué puedo decir? Esta solicitud no tiene sentido ya que el JavaScript ya está excelentemente comprimido. Simplemente ignóralo, no hará que tu sitio web sea más rápido. Especialmente no con el JavaScript cargado al final y el complemento le ha asignado un atributo diferido (incluso si no tiene sentido porque está en el pie de página). Ahora, solo hay un ajuste más que hacer si no estamos satisfechos con los 93 puntos de Google PageSpeed ​​Insights:

3. Recursos CSS que bloquean el renderizado: vayamos al grano

Espero que esté feliz de probar cosas nuevas y que le guste hacer el trabajo complicado porque tenemos que probar algunas cosas para encontrar la mejor solución. En este punto, necesitamos encontrar todo el contenido CSS en la hoja de estilo que es responsable de mostrar el contenido de la parte superior de la página. Descargue Style.css del tema principal «Baskerville» en el escritorio y abra el archivo con un editor de texto. No olvides la hoja de estilo de Google Fonts; la mayoría de los temas utilizan Google Fonts para garantizar una tipografía agradable. Además, cree un nuevo archivo CSS y asígnele el nombre «test.css» o algo así. Esto es necesario solo para los bits CSS copiados del archivo de fuentes de Google y el archivo CSS del tema Baskerville.

Nota: Haga una copia del archivo del tema original antes de comenzar a editarlo.

Ahora podemos probar algunas cosas y encontrar el CSS, que es necesario para mostrar el contenido en la parte superior de la página. Para eso, puedes usar este generador. Elegí esta manera: primero, copié el contenido del archivo de Google Web Font. Esto es importante para evitar tartamudeos cuando se muestran las fuentes. Luego, copié los puntos CSS 0 a 7 del stylesheet.cc del tema Baskerville (número de línea 37 a 1240). Este CSS (Google Web Fonts y el style.cc 0 a 7) ahora debe ser comprimido tanto como sea posible por un compresor CSS.

compresor css

Luego agregué el CSS altamente comprimido en el campo apropiado en Autoptimize y lo guardé. Si activa las opciones avanzadas, obtendrá el subelemento «Inline and Defer CSS» del elemento «CSS». Haga clic en él y pegue su CSS comprimido. No olvides guardarlo.

Eliminar la hoja de estilo de Google Web Fonts del encabezado

Ya no necesitamos Google Web Fonts en el encabezado, ya que lo comprimimos junto con el resto del CSS necesario para el contenido de la mitad superior de la página y lo agregamos en línea en el encabezado. Podemos eliminar la hoja de estilo de Google con unas pocas líneas de código dentro del functions.php del tema hijo:

/**
* Deregister and Dequeue Google Webfonts
* These fonts are now in the inline CSS
*
*/
function baskerville_remove_scripts() {

wp_deregister_style( 'baskerville_googleFonts' );
wp_dequeue_script( 'baskerville_googleFonts' );

}
add_action( 'wp_print_styles', 'baskerville_remove_scripts', 20 );

Ahora, ha llegado el momento de la verdad: la prueba final con Google PageSpeed ​​Insights.

El resultado final de la página de prueba

El resultado final resulta ser solo un punto por detrás de Smashing Magazine, que tiene un increíble 100 de 100 puntos. Sí, estoy orgulloso de ello.

endergebnis-google-pagespeed

Al mismo tiempo, la vista móvil ha mejorado drásticamente, aunque no hemos optimizado nuestro sitio para esto.

endergebnis-mobile-ansicht

Conclusión

El único punto que aún podríamos ajustar es una mejor compresión de JavaScript. Pero esto nos ahorraría solo 673 bytes (1%). Esto no es relevante en absoluto para el rendimiento. Seguir adelante sólo significaría masajear el ego. 99 de 100 puntos posibles para la vista de escritorio y móvil es un resultado fenomenal. Un sitio web con tal resultado es una excepción. Si llegas a este punto, eres un verdadero artista. Espero que mi artículo lo ayude a convertirse en ese artista y haga que su sitio web sea un verdadero corredor.

enlaces relacionados

(dpe)

#verdad #sobre #rendimiento #WordPress

Publicaciones Similares

Deja una respuesta

Tu dirección de correo electrónico no será publicada.