Cómo acelerar el rendimiento de WordPress con 70% [estudio de caso]

Esta vez quiero mostrarle algunas técnicas simples sobre cómo mejorar o aumentar la velocidad de su sitio en WordPress. Probé la velocidad de mi blog unos días antes, noté que la velocidad era horrible. La velocidad de la página de Google me da un 6. Debe saber que la velocidad del sitio es muy importante para hacer sitios web populares en los motores de búsqueda. Claramente, Google actúa cada vez más en base a lo que es intuitivamente intuitivo: un sitio web con un rendimiento débil da como resultado una experiencia de usuario deficiente, y los sitios web con experiencias débiles de los usuarios merecen menos promoción en los resultados de búsqueda.
Así que comencemos a probar nuestros sitios web con la velocidad de la página de Google: por el momento en que esta es la velocidad de GooglePage para este blog:

Antes de comenzar a optimizar el blog de WordPress GooglePage Speed ​​es:

La primera pregunta que me hago es: ¿qué causa este gran problema con mi blog? La velocidad de la página de Google me da algunos consejos para que mi página sea más rápido:
Optimizar las imágenes
Eliminar JavaScript y CSS que bloquea la representación en el contenido anterior
Minimiza CSS
Use el almacenamiento de su navegador en caché
Reducir JavaScript
Así que estoy empezando a trabajar para remediar estos problemas que ralentizan el blog.
Optimizar las imágenes
El principal problema con la velocidad de los sitios web proviene del tamaño de las imágenes.
Por lo tanto, lo primero que debe verificar si el sitio web va lentamente, debe verificar el tamaño de las imágenes.
Intente abrir la inspección de elementos en el navegador y vea cuánto tiempo lleva cargar una imagen.
Si carga una imagen de 1.5 MB, el sitio debe descargar esta imagen antes de cargarla. Calcule ahora si tiene 10 imágenes para descargar cada vez que se cargue su sitio. 15 MB de descarga cada vez … ¿Qué quiero decir con optimización de imágenes para reducir el tamaño del archivo de imagen a través de complementos y herramientas?
Primero instalé un complemento llamado Ewww Image Optimizer
Reduzca el tamaño del archivo para las imágenes en WordPress, incluidos NextGen, Grand Flagallery y otros, utilizando métodos de pérdida/pérdida y conversión

Este complemento funciona bien e intenta reducir el tamaño de mi archivo de imágenes. Ewww, necesito algo de tiempo para hacer esto, así que no me gusta mucho.
También creo que este complemento no es tan compatible con nuestra tarea, por lo que eliminamos este complemento.
Luego decidí instalar WP Smushit otro complemento que parece coincidir con nuestro sitio y tema sin ningún problema. Por lo tanto, recomiendo a nuestros compradores que usen este complemento para comprimir sus imágenes.
Ahora quiero compartir este video, eche un vistazo a cómo puede configurar este complemento: después de configurar el complemento, veo que las imágenes se reducen en un 10% – 20%. Sin embargo, la prueba de Google PageSpeed ​​no cambia tanto el complemento le da a mi blog solo unos pocos puntos. Luego comencé a comprimir las imágenes solo, si quieres algo perfecto, tienes que hacerlo manualmente. Así que obtengo las imágenes y las cambio de tamaño con Adobe Photoshop después de guardar el nuevo archivo. Veo que el archivo sigue siendo tan grande. La única forma de reducir el tamaño del archivo es comprimir el archivo con algunas herramientas ahora. He probado tantos compresores en línea, pero el único que me gusta es compressnowam cargado las nuevas imágenes redimensionadas en Compressnow y el instrumento los comprime en archivos de imagen pequeños (aproximadamente 10-70 kb). ¡Momento de la verdad! Probemos el sitio con las nuevas imágenes.

Ahora, este es un buen resultado si lo considera antes que solo tenemos un 6. Gané 42 puntos con optimizaciones de imágenes. Mi experiencia muestra que el parámetro más importante para acelerar cualquier sitio web son archivos multimedia. Estos archivos requieren tanto tiempo para descargar. A continuación puede leer este elemento de Google cómo optimizar sus imágenes:

https://developers.google.com/speed/docs/insights/optimizeimages

Elimine JavaScript y CSS que bloquea el segundo consejo que la velocidad de la página de Google me da es eliminar JavaScript y CSS que bloquea la representación.
Luego comencé a leer sobre este problema y descubrí que tengo que llamar a todos mis archivos JS y CSS en pie de página. Si tiene una pequeña plantilla HTML, puede hacerlo sin ningún problema, en otros casos, como un tema de WordPress, esto es más complicado porque debe llamar a algunos scripts y encabezado. Entonces, lo único que puedo hacer para eliminar algunos JavaScript y CSS llamado, pero no se usa en la página del blog. Este blog se ejecuta en el negocio multifuncional sensible a la especulación que utilizó algunos archivos JavaScript y CSS diferentes, pero en este caso, si solo lo usé como un blog. Por lo tanto, elimine algunos de estos archivos porque no usaré otras funciones. Mi ejemplo es sobre la especulación, pero es lo mismo con otros temas. Los temas de WordPress llaman a los archivos JavaScripts y CSS a través de Functions.php. Estos archivos se llaman con esta función wp_enqueue_style, wp_enqueue_script después de que se hayan registrado, pero esto no es de nuestro interés ahora. La función que carga la especulación es:
function coness_register_global_styles () {global $ cl_redata;wp_enqueue_style (‘style’, get_stylesheet ());wp_enqueue_style (‘bootstrap -resive’);#wp_enqueue_style (‘jquery.fancybox’);#wp_enqueue_style (‘vector-icons’);wp_enqueue_style (‘font-awesome’);wp_enqueue_style (‘linecon’);#wp_enqueue_style (‘Steadysets’);# wp_enqueue_style (‘hoverex’);#wp_enqueue_style (‘jQuery.easy-Pie-chart’);#wp_enqueue_style (‘idangero.swiper’);#if (retdux_post_meta (‘cl_redata’, (int) coness_get_post_id (), ‘fullscreen_post_style’) ||} Como puede ver antes de algunas de estas líneas, colocamos “#” para desactivar algunos estilos, como iconos vectoriales que no uso o jquey.easy-piñera.Estos archivos no se usan en un blog simple, pero son necesarios si, por ejemplo, creará un sitio web comercial.
Eliminemos algunos JavaScripts ahora: function Coness_register_Global_scripts () {global $ cl_redata; wp_enqueue_script (‘bootstrap.min’); #wp_enqueue_script (‘jQuery-fesing-1-1’); wp_enqueue_script (‘jQuery-fesing-3’); wp_enqueue_script (‘jquery.mobilemenu’); #wp_enqueue_script (‘isótopo’); if ($ cl_redata [‘nicescroll’]) wp_enqueue_script (‘suaveScroll’); #wp_enqueue_script (‘jQuery.flexslider-min’); #wp_enqueue_script (‘jquery.fancybox’); #wp_enqueue_script (‘jQuery.fancybox-media’); # wp_enqueue_script (‘jQuery.CaroUfredsel-6.1.0 empacado’); #wp_enqueue_script (‘jQuery.Hoverex’); #wp_enqueue_script (‘MediaementPlayer’); #wp_enqueue_script (‘tooltip’); #wp_enqueue_script (‘jQuery.parallax’); wp_enqueue_script (‘main’); wp_enqueue_script (‘comment-refly’); wp_enqueue_script (‘marcador de posición’); #wp_enqueue_script (‘Countdown’); wp_enqueue_script (‘waypoints.min’); #wp_enqueue_script (‘idangero.swiper’); wp_enqueue_script (‘jQuery.ApePear’); # wp_enqueue_script (‘modernizr’); #wp_enqueue_script (‘jQuery.countto’); wp_enqueue_script (‘animaciones’); #wp_enqueue_script (‘Background-check.min’); #wp_enqueue_script (‘jquery.fulPage’); #wp_enqueue_script (‘skroll’); #wp_enqueue_script (‘select2’); #wp_enqueue_script (‘jquery.slicknav.min’); #wp_enqueue_script (‘classie’); #wp_enqueue_script (‘mixitup’); # wp_enqueue_script (‘masonería’); #wp_enqueue_script (‘jQuery.onePage’); wp_enqueue_script (‘ImagesLoaded’); #wp_enqueue_script (‘jquery.infinicol’);
If (redux_post_meta (‘cl_redata’, (int) coness_post_id (), ‘fullscreen_post_style’) || } Ahora, estos archivos ya no se cargarán y esto reducirá el tiempo de carga. Aconsejo a cualquiera que use especulación: negocios o torre multifuncional receptivo | El tema WP multifuncional basado en negocios solo para fines de blog para desactivar estos archivos JavaScript y CSS como lo hacen anteriormente. Resultados: 60 puntos de 100 gané 54 puntos desde la primera prueba. Muy orgulloso, pero no disfrutado. Al principio parece ser fácil, pero ahora es más difícil ganar más puntos y hacer que mi sitio sea más rápido. Use el almacenamiento de Google Browser ofrece este consejo, por lo que para resolver este problema que leí al respecto: https://gtmetrix.com/leverage-browser-caching.html y puede hacerlo. Puede almacenar los archivos en el caché manualmente con Htaccess, pero si usa el tema de WordPress, ya que uso W3 Total Cache. Después de instalar este complemento, totalmente compatible con nuestra tarea, voy a configurar el caché de navegación en la configuración del complemento.

Después de configurar que es simple, puede usar mi propia configuración como en la imagen a continuación, como puede ver, verifiqué las opciones de “Establecer el encabezado”, “Establecer el encabezado de control de caché”.
Hago clic en el rescate de todas las configuraciones y también reviso el archivo .htaccess que fue escrito con las nuevas instrucciones. Parece que el complemento funciona bien, pero después de una nueva prueba no veo mejoras. Esto es extraño, así que creo que algo no va bien con el módulo Apache Mod_Expires. Ahora abro mi shell y verifique este módulo que ha sido deshabilitado. Así que lo activé con el comando “A2enMod Mod_Expires” de un sistema operativo Debian. Si aloja en una plataforma compartida, solicite al administrador del servidor que active este módulo.
El mejor alojamiento web de 20 para pequeñas empresas (reseñas de 2021)

¡Es tan importante! Ahora, después de probar el sitio nuevamente, hemos alcanzado 7 puntos. Minimiza CSS, minimiza los JavaScripts Esta regla se desencadena cuando las ideas de PageSpeed ​​detectan que el tamaño de uno de sus recursos podría reducirse mediante la minimización. La descripción anterior de la velocidad de la página de Google, por lo que ahora tengo que reducir los recursos con caché total W3. Abro las pestañas minificadas y empiezo a jugar y probar con ellas. Mi mejor configuración: