Si administra su blog de WordPress en herramientas como Page Speed, Pingdom o comprobaciones similares, luego suelen quejarse en sus informes de los largos tiempos de carga del blog, que pueden optimizarse con el “caché del navegador”, entre otras cosas. He leído los documentos de ayuda vinculados, pero para ser honesto, me faltaban las instrucciones específicas. Después de buscar un poco en Google, encontré complementos como "W3 Total Cache' y similares, que no quería usar, sin embargo, porque hacen más y más cosas en segundo plano y no quería volver a probar la funcionalidad de todo el sitio.
Aproveche el almacenamiento en caché del navegador sin un complemento de WordPress
Por suerte había otro interesante articulo en ingles, quien informó sobre "Aprovechar el almacenamiento en caché del navegador", que también puede activar en WordPress SIN un complemento. Y todo el proceso también es muy rápido, porque solo tiene que copiar y pegar unas pocas líneas de esta guía en el archivo htaccess de WordPress; todo el proceso realmente no toma más de 20 segundos. Para hacer esto, simplemente agregue las siguientes líneas al archivo .htaccess existente en el directorio principal de WordPress:
Agregue estas líneas al archivo .htaccess debajo del pequeño bloque de WordPress que generalmente se ve así (¡NO pegue este código! ¡Ya debería estar en el htaccess!):
# BEGIN WordPress
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>
# END WordPress
Si desea configurar esto usted mismo, haga la prueba y verifique su sitio ANTES y DESPUÉS de los cambios. Entonces ves lo que trajo. Me bastó con saltar de 81 a 89 de 100 puntos. Esto significa que mi blog es mejor que el 78% de todos los sitios probados. Bueno, "estoy feliz"! :)
Actualización: acabo de encontrar otro "comando" que también importa archivos .js a archivos .js Navegador- Incluye almacenamiento en caché. Esto me ha llevado a otros 2 puntos positivos para Pingdom. Estas líneas también se incluyen en el archivo .htaccess:
<filesMatch "\\.(js|js.gz)$">
Header set Cache-Control "max-age=604800, private"
</filesMatch>
Jens dirige el blog desde 2012. Actúa como Sir Apfelot para sus lectores y los ayuda con problemas de carácter técnico. En su tiempo libre monta monociclos eléctricos, toma fotos (preferiblemente con el iPhone, por supuesto), escala las montañas de Hesse o camina con la familia. Sus artículos tratan sobre productos de Apple, noticias del mundo de los drones o soluciones a bugs actuales.
¡Hola Mathias! Para ser honesto, parece ser el mismo para todas las páginas del navegador. Acabo de mirar los grandes sitios de periódicos diarios y ya no tienen un favicon en la línea del navegador sino en la pestaña del navegador. Creo que es solo un problema de visualización del navegador. Si lo ve diferente, envíeme una página de muestra que se vea diferente. Tal vez puedas encontrarlo en el código fuente. LG! señor Appleot
Muchas gracias por este útil consejo.
Los consejos funcionaron muy bien.
Antes: Móvil 57 / Escritorio 71
Después del almacenamiento en caché de imágenes: Móvil 67 / Escritorio 82
Después del almacenamiento en caché de .js: Mobile 70 / Desktop 85
Hola, romper la marca de 90 sería genial.
¿Tienes algún otro consejo que pueda ayudarme?
Ya cargo el JS en el pie de página en lugar de en el encabezado y el caché usando Cachify.
W3 Total Cache demostró ser demasiado poderoso para mi sitio de nicho.
Saludos David
¡Hola David!
He echado un vistazo a pingdom, pero no tengo ningún consejo general sobre lo que se puede mejorar de su parte. Son solo muchos gráficos pequeños que consumen tiempo. Solo podían combinarse con los llamados "sprites". Ves eso a veces en sitios como Facebook o algo así. Todos los iconos pequeños se combinan en un gráfico y la pantalla siempre muestra el mismo gráfico con una sección diferente. Pero eso sería mucho jugueteo.
Soy un novato en WordPress.
su guía un
me llevó a 95 en Pingdom
después de todos los otros consejos que he probado en los htacces,
solo me dieron un "acceso denegado".
GRACIAS
Saludo
Hermann
BAÄÄÄÄM!!! De 68 a 97 puntos en el grado de rendimiento de Pingdom y de 4sek a 768ms de tiempo de carga. ¡Gracias! :)
Sin embargo, lo que no funciona para mí es incluir archivos .js en el almacenamiento en caché del navegador. Si inserto las tres líneas de código mencionadas en el .htaccess, ya nada funciona... pero no quiero quejarme ahora;) ¡Estoy muy emocionado!
Bueno, el archivo htaccess funciona con algunos proveedores y con otros no. Desafortunadamente no puedo dar ninguna garantía por eso. Pero con todo incluido funciona exactamente con el código.
También me gusta decir gracias, porque mi página se ha hecho un poco más rápida:
Móvil de 58 a 61 y escritorio de 79 a 83. Experiencia de usuario Tengo 98/100, signifique lo que signifique.
En general, hubiera deseado más rápido, pero aún así una mejora. Si consideras que la verdad es que no tengo ni idea de esas cosas… ;).
Antes de volver a medir, también había reducido todas mis fotos, porque esa también era la razón por la que la gente se quejaba, pero sigo recibiendo el mensaje de que debo optimizar y comprimir las fotos. ¿Todos pesan menos de 60 kb y aún son demasiado grandes? ¿A qué % debo comprimir (tomé 80%)?
¿Puedes decirme también cómo puedo reducir javascript? Ni siquiera sé dónde encontrar algo así. Eso también es denunciado.
¡Hola Tina! El javascript generalmente se puede subcontratar, de modo que solo se pueda encontrar una referencia al javascript en el código fuente. El complemento Cachify también es útil, ya que también puede reducir Javascript al eliminar comentarios y similares del código...
Del 55 al 67!!!!
Es una locura.
Probé algunas cosas de antemano, que nunca me satisficieron.
Complementos, etc. y siempre había algo de qué quejarse.
Pero eso es tan fácil... y solo tomó 10 segundos. :-)
Gran consejo. Muchas gracias y te lo paso.
Para todos los lectores de comentarios que deseen probarlo: desafortunadamente, Easyname no es compatible con este código, mi sitio se cayó de inmediato.
Así que tengo que decir GRACIAS aquí una vez más, porque con sus consejos y los de algunos otros profesionales de TI, yo (mujer que tengo CERO (!) una pista sobre programación = principiante total) conseguí que mi sitio subiera a 99/100 en Google Prueba de velocidad. Camino con una sonrisa de 360° todo el tiempo. Solo con MOBIL sigo en 79/100 ... pero desafortunadamente hay algunas razones inmutables. Bueno, mi compañía ciertamente no es buscada con tanta frecuencia.
Así que damas y caballeros, no se den por vencidos, en algún momento también funcionará para ustedes, de lo contrario estaré feliz de ayudarlos ;).
hallo,
Actualmente estoy reconstruyendo mi blog y estoy en el proceso de optimizar los tiempos de respuesta.
Gracias por tu artículo
Todavía tengo un fragmento. Ganó 3 puntos en información de Pagespeed en Windows
# almacenamiento en caché
Caduca Activo el
ExpiresDefault "acceso más 2 semanas"
Establecer filtro de salida DESINFLAR
mod_gzip_on Sí
mod_gzip_dechunk Sí
mod_gzip_item_incluir archivo \.(html?|txt|css|js|php|pl)$
controlador mod_gzip_item_include ^cgi-script$
mod_gzip_item_include mimo ^texto/.*
mod_gzip_item_include mimo ^aplicación/x-javascript.*
mod_gzip_item_exclude mimo ^imagen/.*
mod_gzip_item_exclude rspheader ^Codificación de contenido:.*gzip.*
# almacenamiento en caché
esto también funciona mucho mobile +3 y desktop +4:
¡Querido Uwe, queridos lectores!
Incluiré el código aquí sin verificarlo. Una parte de ello ya se tiene en cuenta arriba, pero tal vez ayude a uno u otro a chulo un poco más. :) Pero siempre tenga en cuenta: lo acabo de probar en el código anterior en el artículo. Si copia cosas a ciegas en su archivo .htaccess, ¡primero debe hacer una copia de seguridad!
Gracias por la gran crítica.
Me trajo algo genial. Luego trató de incorporar el código de Uwe. El resultado de la prueba fue fantástico, pero la página ya no era accesible.
Lo implementé así ahora:
AddHandler php53-cgi .php
php_value memory_limit 256M
php_value max_input_vars 10000
Todavía recibo este mensaje:
Reparación necesaria:
Elimine los recursos JavaScript y CSS que bloquean la representación en el contenido de la mitad superior de la página
¿De qué otra manera puedo resolver esto?
gracias ursula
El problema con "above the fold" no es tan fácil de resolver, ya que tienes que mover los scripts hacia abajo en el código. Y para hacer eso tienes que intervenir en la programación del tema, lo cual no es una buena idea si no eres bueno en PHP/HTML. Yo no confiaría en mí mismo... :)
Hola señor Apfelot,
Su artículo es un comienzo bueno y fácil.
He escrito una guía un poco más avanzada, que luego también incluye el tema de optimización y almacenamiento en caché de imágenes. Le agradecería si pudiera recomendar mi artículo con un breve párrafo al final. http://wp-config.tips/2015/03/wordpress-pagespeed-optimierung-all-inkl-com/
Desde el servidor en Ámsterdam, mi página tiene un tamaño de página de 2.4 MB. Tiempo de carga de 1.04 s.
Solicitudes 39 y Perf.grado 98/100.
Su sitio web es más rápido que el 89% de todos los sitios web probados.
Así de rápido comen. Básicamente dejo la subcontratación de Above CSS y todo eso a los temas. Esto volverá a ser un problema con la próxima actualización. Gracias por el artículo. Lo cual fue muy útil.
También puede agregar el código en pequeños fragmentos (¡elija con sensatez!). Entonces puede ver qué parte está causando problemas y posiblemente puede omitirla.
¿Las nuevas publicaciones afectan la frescura? ¿Se muestran las publicaciones nuevas de todos modos, o solo después de que se haya vaciado el caché (o el almacenamiento en caché solo se aplica a los archivos, que luego se muestran en la posición específica durante el tiempo específico?)
¡Gracias por las instrucciones!
Este no es el tipo de almacenamiento en caché realizado por complementos como Supercache o Fastcache. De hecho, guardan la página y luego transmiten la versión guardada. Pero siempre tienen la opción de actualizar el caché cuando se escribe una nueva publicación o se modifica una anterior. Entonces no tienes problemas con nuevas aportaciones. :)
No con el código anterior de todos modos. Solo guarda gráficos y archivos javascript. Es posible que obtenga una versión anterior de un archivo JS durante unas horas si cambia algo en él.
¡Hola!
Agregué el código al archivo htaccess como se describe arriba. Sin embargo, nada ha cambiado con Pingdom. Todavía sugiere aprovechar el almacenamiento en caché del navegador (se enumeran todos los archivos de imagen). Cuando pruebo con Network Monitor (F12) en Firefox, es mucho más rápido con y sin el código de almacenamiento en caché por segunda vez (después de borrar el caché del navegador) porque funciona para imágenes y muchos archivos CSS (¿pero no JS?) 2 en lugar de 304 y tiene muy poco tiempo de conexión y espera.
Después de borrar la memoria caché del navegador (es decir, para nuevos usuarios), el tiempo de carga sigue siendo de unos 6 segundos. Según Google, 200ms sería lo ideal.
¿Cómo puedo reducir aún más el tiempo de carga?
¡Hola Tim! Si está dispuesto a instalar un complemento y tal vez poner algo de dinero en sus manos, le recomendaría WP Rocket. El complemento de almacenamiento en caché aprovecha mucho y también se encarga de reducir y combinar archivos CSS y JS. Es difícil para mí decir por qué el código anterior no funciona para el archivo .htaccess. ¿Quizás su proveedor de alojamiento no ha liberado las funciones, por lo que sus entradas no tienen efecto?
Hola y gracias por abordar este tema con tanto detalle.
Disparé mi sitio en pedazos esta tarde en mi adicción a la velocidad y obtuve un error interno del servidor 500 con un complemento que se suponía que instalaría el almacenamiento en caché del navegador, etc.
Gracias a usted y a otro sitio se atrevieron a modificar el .htaccess manualmente.
Desafortunadamente, las entradas que enumeró probablemente no estén permitidas por mi hoster (UDAG), porque todavía recibo el error "Aprovechar el almacenamiento en caché del navegador" en pingdom. Demasiado. Tengo que preguntar qué está pasando realmente.
Después de todo: muchas optimizaciones del fin de semana me han llevado al menos a 53/60 para la velocidad de la página y 85 para pingodm.
El punto conflictivo también parece ser el largo tiempo de respuesta del servidor (2,62 segundos)
Saludos y gracias por tu gran aporte! Lo instalé en mi sitio web y el rendimiento también ha mejorado. Sin embargo, las herramientas de prueba todavía dicen "Aprovechar el almacenamiento en caché del navegador" cuando pruebo mi sitio. ¿Te pasa lo mismo o desaparece por completo? ¡Gracias por adelantado! LG cristobal
Hola que locura!!!
Mi sitio pasó de 64 a 76 en dispositivos móviles y de 75 a 84 en computadoras de escritorio, excelente.
¡¡Muchísimas gracias!! LG Susana
¡¡¡Estoy impactado!!! Desktop de 68 a un increíble 91. Eso es lo que yo llamo optimizado. Muchas gracias, señor Apfelot. Solo el móvil se queda en 71 y necesita trabajo. Tendré que echar un vistazo más de cerca a lo que está pasando allí.
¡Hola claudia! Cada vez es más difícil conseguir una buena puntuación en la versión móvil. Creo que Google está poniendo el listón bastante alto aquí. Si mides con otras herramientas, obtienes rápidamente una calificación máxima de velocidad y aún así solo tienes una puntuación entre 70 y 80 en Google. ¡Pero buena suerte con el proxenetismo! Jens
¡Estoy emocionado! Sus consejos también han acelerado mi sitio rápidamente en el área verde, por lo que ahora puedo comenzar a afinar. No me atreví a jugar con htaccess durante mucho tiempo, ¡pero vale la pena!
Vaya, gracias, incluso ahora estas pocas líneas de código ayudan a acelerar los sitios de WordPress.
Sólo una cuestión de comprensión.
¿Por qué parece que no utiliza estos consejos en estas páginas? Cuando uso sus páginas a través de Pingdom obtengo D67, y en Google 69 móvil/621 escritorio. Es muy, muy bajo. ¿O hay una razón?
Si, pregunta corregida. :) Estoy usando el complemento de almacenamiento en caché WP-Rocket y eso también crea estas entradas. Lo apagué para solucionar problemas. Por eso los malos valores en Pingdom y Google. Con Pingdom mejora si usa WP-Rocket, pero con Google eventualmente alcanza los límites de lo que es posible cuando, como Sir Apfelot, tiene varios complementos de WordPress en ejecución. Ya he limpiado, pero no se puede dejar todo afuera. :D LG! Jens
Ya probé todo lo imaginable (incluido el código anterior) y, por supuesto, le pregunté a la tía Google varias veces, pero el método no parece funcionar en muchas instalaciones de WordPress. La herramienta Google Pagespeed me sigue diciendo que habilite el almacenamiento en caché del navegador para varios recursos. Los scripts denunciados son, sin excepción, direcciones con parámetros. Por ejemplo, "https://meinedomain.de/…kit/js/components/slideshow.js?ver=4.8.2 (2,5 días)" y mi resultado no mejora. ¿Hay algún remedio a través de .htaccess o se requiere un complemento adicional? (Eso sería estúpido.)
Hola Nils! Sí, lamentablemente ese es el problema. Muchos complementos, como en su caso, probablemente un complemento de presentación de diapositivas, integran sus secuencias de comandos y sus elementos CSS individualmente y luego, en algún momento, tiene 20x Javascript que se cargan individualmente y 20 archivos CSS... Creo que los complementos como WP Rocket ayudan un poco allí , pero solo parcialmente. Lo que aún no he probado es CloudFlare. Este es un servicio que se encarga del almacenamiento en caché de la página y también optimiza el código fuente antes de entregarlo. Lo que me detiene: tienes que cambiar la configuración de DNS del dominio a CloudFlare y, de alguna manera, no me gusta cuando otro servicio se atasca entre mi sitio web y yo. Pero tal vez solo lo pruebe con un dominio menos importante antes de usarlo en Sir Apfelot. :D
En primer lugar, gracias por el artículo, ¡muy útil!
Después de mi prueba de velocidad, que realmente no funciona tan bien a los 38, estoy buscando más opciones de optimización.
Entre otras cosas, la prueba me muestra que debo usar formatos de imagen modernos :-0 .. ¿qué son los formatos de imagen modernos?
Aquí están las 3 áreas marcadas en rojo:
Reducir los tiempos de respuesta del servidor (TTFB)
2,88 s
2
Proporcionar imágenes en formatos modernos.
2,66 s
3
Habilitar la compresión de texto
1,83 s
4
Tamaño de las imágenes correctamente
¿Quizás ya hay sugerencias anteriores para la optimización de usted? Estoy feliz de leer de usted.
gracias sven
¡Hola, Sven!
Sí, buena pregunta qué son los "formatos de imagen modernos". :D Creo que JPG debería ser una buena opción para fotografías.
Sin embargo: tiempo de respuesta del servidor: 2,88 segundos -> eso es mega lento. ¿Dónde aloja su sitio web? Suena casi como Strato. ;-) En 2,88 segundos, la mayoría de los servidores ya han enviado el sitio web completo al visitante y no solo el primer byte... debe hacer algo al respecto.
La segunda cosa: "dimensionar las imágenes correctamente" -> esto sucede cuando carga imágenes en una resolución mucho más alta de la que realmente muestra en el sitio web. Entonces, si solo lo muestra en el sitio web con un ancho de 1000 píxeles, es mejor no cargarlo en el formato de 4000 x 6000 píxeles. También ahorra una gran cantidad de datos. Para comprimir imágenes, puedo recomendar el complemento de WordPress TinyPNG o TinyJPG. También tienen un complemento de Photoshop y un sitio web que puede usar para reducir el tamaño de las imágenes. le sacan mucho partido...
Google escribe sobre "formatos de imagen modernos" en Pagespeed:
"Los formatos de imagen como JPEG 2000, JPEG XR y WebP a menudo ofrecen una mejor compresión que PNG o JPEG, lo que permite descargas más rápidas y un menor uso de datos".
Pero, sinceramente, no conozco a nadie ni he visto que se use JPEG 2000 ni nada más. Incluso Photoshop tiene JPEG y PNG en Guardar para Web. A menos que todos los nuevos modelos de suscripción en línea hayan cambiado algo en esa dirección...
Sí, también creo que "JPEG 2000" y "moderno"??? Bueno, no importa… Creo que se puede vivir bastante bien sin tonterías. "Guardar para Web" en Photoshop crea imágenes razonablemente pequeñas. Pero si trabaja mucho con Photoshop, aún puedo recomendar "TinyJPG". Tienen un complemento para Photoshop que guarda archivos JPG/PNG muy bien comprimidos. puedes hacer un poco al respecto lee mi artículo sobre “Optimage”.N. Pero le daré a TinyJPG su propio artículo...
Gracias por el gran artículo. Es una pena que solo lo encontré hoy a través de un enlace. Implementado de inmediato, se siente mucho mejor que antes. Y en términos de velocidad de página, ambos códigos obtuvieron algunos puntos. Mejor que el complemento W3 Total Cache. Esto había disparado mi blog.
Hola Karsten! Me alegro de que te funcione mejor que W3 Total Cache. Tampoco me calenté con el complemento. Otro consejo para tu sitio web: Si haces clic en “Acerca de mí”, obtienes un error 404… A Google tampoco le gusta eso. Supongo que los visitantes también se sentirán decepcionados. ;-) LG y Felices Fiestas!
El consejo es útil, ¡gracias! Debo admitir que siempre he usado complementos como Autooptimize y CO. porque instalar complementos es muy fácil.
Pero dado que este truco se puede implementar tan rápido, definitivamente vale la pena intentarlo.
Si administra su blog de WordPress en herramientas como Page Speed, Pingdom o comprobaciones similares, luego suelen quejarse en sus informes de los largos tiempos de carga del blog, que pueden optimizarse con el “caché del navegador”, entre otras cosas. He leído los documentos de ayuda vinculados, pero para ser honesto, me faltaban las instrucciones específicas. Después de buscar un poco en Google, encontré complementos como "W3 Total Cache' y similares, que no quería usar, sin embargo, porque hacen más y más cosas en segundo plano y no quería volver a probar la funcionalidad de todo el sitio.
Encontrar el color adecuado para un sitio web no es un problema con estas herramientas
WordPress: almacena el acceso FTP en wp-config.php
Truco de búsqueda web: encuentre resultados de una página específica más rápido
¿Qué es un favicon?
5 maneras diferentes de crear un sitio web
Diseño móvil primero: por qué el teléfono inteligente es tan importante en el diseño web (Patrocinador)
Markup.io – marcar sitios web – elija el KW05
JavaScript: resalte el texto en el área de texto y cópielo en el portapapeles
Pingback: Reduzca el tiempo de carga de WordPress: elimine las cadenas de consulta de los recursos estáticos » Sir Apfelot
deja un gracias
Ahora solo el ícono favorito ha desaparecido de la barra de direcciones del navegador. Solo se muestra una hoja en blanco.
Puedo ver que este es el caso para ti también. El ícono favorito solo se muestra en la pestaña.
¿Tienes una idea de cómo arreglar esto?
¡Hola Mathias! Para ser honesto, parece ser el mismo para todas las páginas del navegador. Acabo de mirar los grandes sitios de periódicos diarios y ya no tienen un favicon en la línea del navegador sino en la pestaña del navegador. Creo que es solo un problema de visualización del navegador. Si lo ve diferente, envíeme una página de muestra que se vea diferente. Tal vez puedas encontrarlo en el código fuente. LG! señor Appleot
Buena cosa, finamente descrita.
También les dejo un gran agradecimiento y un cordial saludo.
Steven
También un gran agradecimiento de mi parte, ¡estaba exactamente buscando esta publicación!
PD: Obtuve 4 puntos por este pequeño truco.
Muchas gracias por este útil consejo.
Los consejos funcionaron muy bien.
Antes: Móvil 57 / Escritorio 71
Después del almacenamiento en caché de imágenes: Móvil 67 / Escritorio 82
Después del almacenamiento en caché de .js: Mobile 70 / Desktop 85
¡Hola David! Bueno, eso es bonito. ¿No quieres romper la marca de los 90? ;)
¡Muchas gracias de mi parte también, la explicación me ayudó!
De 78 a 88 puntos... ;-)
Saludo
Benjamin
Hola, romper la marca de 90 sería genial.
¿Tienes algún otro consejo que pueda ayudarme?
Ya cargo el JS en el pie de página en lugar de en el encabezado y el caché usando Cachify.
W3 Total Cache demostró ser demasiado poderoso para mi sitio de nicho.
Saludos David
¡Hola David!
He echado un vistazo a pingdom, pero no tengo ningún consejo general sobre lo que se puede mejorar de su parte. Son solo muchos gráficos pequeños que consumen tiempo. Solo podían combinarse con los llamados "sprites". Ves eso a veces en sitios como Facebook o algo así. Todos los iconos pequeños se combinan en un gráfico y la pantalla siempre muestra el mismo gráfico con una sección diferente. Pero eso sería mucho jugueteo.
¿Dónde se colocaría eso para los archivos .js, simplemente agréguelo al archivo .htaccess?
Gracias de antemano por la respuesta y una guía que puedo entender: D
@Dominik: ¡Sí, exactamente! Las líneas también van en el archivo htaccess. Ahora lo he agregado a las instrucciones anteriores... :)
Gracias lo intentare si funciona :)
Genial, gracias por el consejo muy útil.
Del 85 al 93% en Pingdom.
Esperemos que el sitio sea lo suficientemente rápido ahora :-)
Saludos
Jochen
Chapeau!
Soy un novato en WordPress.
su guía un
me llevó a 95 en Pingdom
después de todos los otros consejos que he probado en los htacces,
solo me dieron un "acceso denegado".
GRACIAS
Saludo
Hermann
Gracias por los consejos.
Junto con gzip/deflate, esto transmitió mi página del 42 al 81 en la velocidad de página de Google.
Danke
Bueno, eso me hace feliz! Poco trabajo y mucho efecto. Siempre podría ser así. ;-)
Wow,
realmente trajo algo. Gracias por esta guía!!
BAÄÄÄÄM!!! De 68 a 97 puntos en el grado de rendimiento de Pingdom y de 4sek a 768ms de tiempo de carga. ¡Gracias! :)
Sin embargo, lo que no funciona para mí es incluir archivos .js en el almacenamiento en caché del navegador. Si inserto las tres líneas de código mencionadas en el .htaccess, ya nada funciona... pero no quiero quejarme ahora;) ¡Estoy muy emocionado!
Bueno, el archivo htaccess funciona con algunos proveedores y con otros no. Desafortunadamente no puedo dar ninguna garantía por eso. Pero con todo incluido funciona exactamente con el código.
¡Genial, gracias! Eso es exactamente lo que estaba buscando. ¡Werds de mi lado se instala exactamente así!
Nunca he dejado un comentario en mi vida, pero:
GRACIAS !!!
¡De 20/81 a 100/100 en Google Page Speed en 100 segundos!
¡galleta!
Hola Sirapfelot,
También me gusta decir gracias, porque mi página se ha hecho un poco más rápida:
Móvil de 58 a 61 y escritorio de 79 a 83. Experiencia de usuario Tengo 98/100, signifique lo que signifique.
En general, hubiera deseado más rápido, pero aún así una mejora. Si consideras que la verdad es que no tengo ni idea de esas cosas… ;).
Antes de volver a medir, también había reducido todas mis fotos, porque esa también era la razón por la que la gente se quejaba, pero sigo recibiendo el mensaje de que debo optimizar y comprimir las fotos. ¿Todos pesan menos de 60 kb y aún son demasiado grandes? ¿A qué % debo comprimir (tomé 80%)?
¿Puedes decirme también cómo puedo reducir javascript? Ni siquiera sé dónde encontrar algo así. Eso también es denunciado.
Gracias por tu tiempo y atención
LG
Tina
¡Hola Tina! El javascript generalmente se puede subcontratar, de modo que solo se pueda encontrar una referencia al javascript en el código fuente. El complemento Cachify también es útil, ya que también puede reducir Javascript al eliminar comentarios y similares del código...
¡Gracias por el consejo, Sir Apfelot!
¡La sugerencia con un complemento de almacenamiento en caché ayudó! Agregue a eso WP Smuth.it y subió mucho. ¡Gran ayuda!
Del 55 al 67!!!!
Es una locura.
Probé algunas cosas de antemano, que nunca me satisficieron.
Complementos, etc. y siempre había algo de qué quejarse.
Pero eso es tan fácil... y solo tomó 10 segundos. :-)
Gran consejo. Muchas gracias y te lo paso.
Saludos Heiko
Si su proveedor admite la compresión, le recomiendo las siguientes dos líneas:
Establecer filtro de salida DESINFLAR
AddOutputFilterByType DEFLATE texto/texto php/texto html/texto sin formato/texto xml/texto css/aplicación javascript/javascript
Véase también http://httpd.apache.org/docs/2.2/mod/mod_deflate.html
¡Hola Haroldo! ¡Gracias, eso suena bien! :)
Lo acabo de agregar a mi archivo htaccess y se parece a mi hoster Todo tinta apoyar eso. En cualquier caso, no hay ningún mensaje de error.
Para todos los lectores de comentarios que deseen probarlo: desafortunadamente, Easyname no es compatible con este código, mi sitio se cayó de inmediato.
Desafortunadamente, la línea de texto me causó un deterioro mínimo en Google Pagespeed, mi blog está alojado en [eliminado].
Ok, puede o no funcionar. Pero no se necesita mucho tiempo para intentarlo.
Así que tengo que decir GRACIAS aquí una vez más, porque con sus consejos y los de algunos otros profesionales de TI, yo (mujer que tengo CERO (!) una pista sobre programación = principiante total) conseguí que mi sitio subiera a 99/100 en Google Prueba de velocidad. Camino con una sonrisa de 360° todo el tiempo. Solo con MOBIL sigo en 79/100 ... pero desafortunadamente hay algunas razones inmutables. Bueno, mi compañía ciertamente no es buscada con tanta frecuencia.
Así que damas y caballeros, no se den por vencidos, en algún momento también funcionará para ustedes, de lo contrario estaré feliz de ayudarlos ;).
Saludos desde Bonn,
Tina
hallo,
Actualmente estoy reconstruyendo mi blog y estoy en el proceso de optimizar los tiempos de respuesta.
Gracias por tu artículo
Todavía tengo un fragmento. Ganó 3 puntos en información de Pagespeed en Windows
# almacenamiento en caché
Caduca Activo el
ExpiresDefault "acceso más 2 semanas"
Establecer filtro de salida DESINFLAR
mod_gzip_on Sí
mod_gzip_dechunk Sí
mod_gzip_item_incluir archivo \.(html?|txt|css|js|php|pl)$
controlador mod_gzip_item_include ^cgi-script$
mod_gzip_item_include mimo ^texto/.*
mod_gzip_item_include mimo ^aplicación/x-javascript.*
mod_gzip_item_exclude mimo ^imagen/.*
mod_gzip_item_exclude rspheader ^Codificación de contenido:.*gzip.*
# almacenamiento en caché
esto también funciona mucho mobile +3 y desktop +4:
Encabezado agregar Vary User-Agent env=!dont-vary
AddOutputFilterByType DEFLATE text/css text/x-component application/x-javascript application/javascript text/javascript text/x-js text/html text/richtext image/svg+xml text/plain text/xsd text/xsl text/xml image /aplicación x-icon/json
# DEFLATE por extensión
AddOutputFilter DEFLATE js css htm html xml
¡Querido Uwe, queridos lectores!
Incluiré el código aquí sin verificarlo. Una parte de ello ya se tiene en cuenta arriba, pero tal vez ayude a uno u otro a chulo un poco más. :) Pero siempre tenga en cuenta: lo acabo de probar en el código anterior en el artículo. Si copia cosas a ciegas en su archivo .htaccess, ¡primero debe hacer una copia de seguridad!
Gracias por la gran crítica.
Me trajo algo genial. Luego trató de incorporar el código de Uwe. El resultado de la prueba fue fantástico, pero la página ya no era accesible.
Lo implementé así ahora:
AddHandler php53-cgi .php
php_value memory_limit 256M
php_value max_input_vars 10000
## EXPIRA CACHING ##
ExpiresActive On
ExpiresByType image/jpg "acceso 1 año"
ExpiresByType image/jpeg "acceso 1 año"
ExpiresByType image/gif "acceso 1 año"
ExpiresByType image/png "acceso 1 año"
ExpiresByType text/css "acceso 1 mes"
Aplicación ExpiresByType/pdf "acceso 1 mes"
ExpiresByType text/x-javascript "acceso 1 mes"
Aplicación ExpiresByType/x-shockwave-flash "acceso 1 mes"
ExpiresByType image/x-icon "acceso 1 año"
ExpiresDefault "acceso 2 días"
## EXPIRA CACHING ##
Encabezado establecido Cache-Control "max-age=604800, privado"
# Inicio de WordPress
RewriteEngine On
RewriteBase /
RewriteRule ^ index \ .php $ - [L]
RewriteCond% {} REQUEST_FILENAME! -f
RewriteCond% {} REQUEST_FILENAME! -d
RewriteRule. / Index.php [L]
# END WordPress
Todavía recibo este mensaje:
Reparación necesaria:
Elimine los recursos JavaScript y CSS que bloquean la representación en el contenido de la mitad superior de la página
¿De qué otra manera puedo resolver esto?
gracias ursula
¡Hola Úrsula!
El problema con "above the fold" no es tan fácil de resolver, ya que tienes que mover los scripts hacia abajo en el código. Y para hacer eso tienes que intervenir en la programación del tema, lo cual no es una buena idea si no eres bueno en PHP/HTML. Yo no confiaría en mí mismo... :)
Hola señor Apfelot,
Su artículo es un comienzo bueno y fácil.
He escrito una guía un poco más avanzada, que luego también incluye el tema de optimización y almacenamiento en caché de imágenes. Le agradecería si pudiera recomendar mi artículo con un breve párrafo al final.
http://wp-config.tips/2015/03/wordpress-pagespeed-optimierung-all-inkl-com/
Saludos Bernhard
Gracias por el consejo, pude prescindir de un complemento. Cuantos menos complementos, mejor.
Entonces lo dejaré así, con la optimización.
http://tools.pingdom.com/fpt/#!/dQ0MyL/https://fotografen-shopsystem.de
Desde el servidor en Ámsterdam, mi página tiene un tamaño de página de 2.4 MB. Tiempo de carga de 1.04 s.
Solicitudes 39 y Perf.grado 98/100.
Su sitio web es más rápido que el 89% de todos los sitios web probados.
Así de rápido comen. Básicamente dejo la subcontratación de Above CSS y todo eso a los temas. Esto volverá a ser un problema con la próxima actualización. Gracias por el artículo. Lo cual fue muy útil.
Sebastián
Me dio 7 puntos. ¡Muchas gracias! Pero lamentablemente tengo que volver a pegar el código cada 2 días, siempre se elimina automáticamente.
Ah gracias por la descripción.
Tampoco tenía ganas de agregar otro complemento y usé el código. 8 puntos más rápido y ya no es rojo sino naranja.
hallo,
si construyo el código en mi htaccess, tengo un gran resultado, pero destruye mi diseño (sistina de Theme Forest)
También puede agregar el código en pequeños fragmentos (¡elija con sensatez!). Entonces puede ver qué parte está causando problemas y posiblemente puede omitirla.
¿Las nuevas publicaciones afectan la frescura? ¿Se muestran las publicaciones nuevas de todos modos, o solo después de que se haya vaciado el caché (o el almacenamiento en caché solo se aplica a los archivos, que luego se muestran en la posición específica durante el tiempo específico?)
¡Gracias por las instrucciones!
¡Hola Bernd!
Este no es el tipo de almacenamiento en caché realizado por complementos como Supercache o Fastcache. De hecho, guardan la página y luego transmiten la versión guardada. Pero siempre tienen la opción de actualizar el caché cuando se escribe una nueva publicación o se modifica una anterior. Entonces no tienes problemas con nuevas aportaciones. :)
No con el código anterior de todos modos. Solo guarda gráficos y archivos javascript. Es posible que obtenga una versión anterior de un archivo JS durante unas horas si cambia algo en él.
¡Saludos!
Jens
Hola a todos,
También me gustaría decir gracias. Mi clasificación ha mejorado con su ayuda.
Muchas gracias.
saludo cristiano
Hola a todos,
También me gustaría decir gracias. Mi clasificación ha mejorado con su ayuda.
Muchas gracias
¡Hola!
Agregué el código al archivo htaccess como se describe arriba. Sin embargo, nada ha cambiado con Pingdom. Todavía sugiere aprovechar el almacenamiento en caché del navegador (se enumeran todos los archivos de imagen). Cuando pruebo con Network Monitor (F12) en Firefox, es mucho más rápido con y sin el código de almacenamiento en caché por segunda vez (después de borrar el caché del navegador) porque funciona para imágenes y muchos archivos CSS (¿pero no JS?) 2 en lugar de 304 y tiene muy poco tiempo de conexión y espera.
Después de borrar la memoria caché del navegador (es decir, para nuevos usuarios), el tiempo de carga sigue siendo de unos 6 segundos. Según Google, 200ms sería lo ideal.
¿Cómo puedo reducir aún más el tiempo de carga?
¡Hola Tim! Si está dispuesto a instalar un complemento y tal vez poner algo de dinero en sus manos, le recomendaría WP Rocket. El complemento de almacenamiento en caché aprovecha mucho y también se encarga de reducir y combinar archivos CSS y JS. Es difícil para mí decir por qué el código anterior no funciona para el archivo .htaccess. ¿Quizás su proveedor de alojamiento no ha liberado las funciones, por lo que sus entradas no tienen efecto?
Hola y gracias por abordar este tema con tanto detalle.
Disparé mi sitio en pedazos esta tarde en mi adicción a la velocidad y obtuve un error interno del servidor 500 con un complemento que se suponía que instalaría el almacenamiento en caché del navegador, etc.
Gracias a usted y a otro sitio se atrevieron a modificar el .htaccess manualmente.
Desafortunadamente, las entradas que enumeró probablemente no estén permitidas por mi hoster (UDAG), porque todavía recibo el error "Aprovechar el almacenamiento en caché del navegador" en pingdom. Demasiado. Tengo que preguntar qué está pasando realmente.
Después de todo: muchas optimizaciones del fin de semana me han llevado al menos a 53/60 para la velocidad de la página y 85 para pingodm.
El punto conflictivo también parece ser el largo tiempo de respuesta del servidor (2,62 segundos)
Buen domingo y buen inicio de semana
tom
Saludos y gracias por tu gran aporte! Lo instalé en mi sitio web y el rendimiento también ha mejorado. Sin embargo, las herramientas de prueba todavía dicen "Aprovechar el almacenamiento en caché del navegador" cuando pruebo mi sitio. ¿Te pasa lo mismo o desaparece por completo? ¡Gracias por adelantado! LG cristobal
¡¡¡Brillante!!! ¡Muchos gracias!
Hola que locura!!!
Mi sitio pasó de 64 a 76 en dispositivos móviles y de 75 a 84 en computadoras de escritorio, excelente.
¡¡Muchísimas gracias!! LG Susana
¡Hola Susana! ¡Me alegro! A veces puedes lograr algo incluso con cosas pequeñas. :D
¡¡¡Estoy impactado!!! Desktop de 68 a un increíble 91. Eso es lo que yo llamo optimizado. Muchas gracias, señor Apfelot. Solo el móvil se queda en 71 y necesita trabajo. Tendré que echar un vistazo más de cerca a lo que está pasando allí.
¡Hola claudia! Cada vez es más difícil conseguir una buena puntuación en la versión móvil. Creo que Google está poniendo el listón bastante alto aquí. Si mides con otras herramientas, obtienes rápidamente una calificación máxima de velocidad y aún así solo tienes una puntuación entre 70 y 80 en Google. ¡Pero buena suerte con el proxenetismo! Jens
¡Estoy emocionado! Sus consejos también han acelerado mi sitio rápidamente en el área verde, por lo que ahora puedo comenzar a afinar. No me atreví a jugar con htaccess durante mucho tiempo, ¡pero vale la pena!
Gracias y saludos de los MoKoWo's
Vaya, gracias, incluso ahora estas pocas líneas de código ayudan a acelerar los sitios de WordPress.
Sólo una cuestión de comprensión.
¿Por qué parece que no utiliza estos consejos en estas páginas? Cuando uso sus páginas a través de Pingdom obtengo D67, y en Google 69 móvil/621 escritorio. Es muy, muy bajo. ¿O hay una razón?
¡Hola Alex!
Si, pregunta corregida. :) Estoy usando el complemento de almacenamiento en caché WP-Rocket y eso también crea estas entradas. Lo apagué para solucionar problemas. Por eso los malos valores en Pingdom y Google. Con Pingdom mejora si usa WP-Rocket, pero con Google eventualmente alcanza los límites de lo que es posible cuando, como Sir Apfelot, tiene varios complementos de WordPress en ejecución. Ya he limpiado, pero no se puede dejar todo afuera. :D LG! Jens
Ya probé todo lo imaginable (incluido el código anterior) y, por supuesto, le pregunté a la tía Google varias veces, pero el método no parece funcionar en muchas instalaciones de WordPress. La herramienta Google Pagespeed me sigue diciendo que habilite el almacenamiento en caché del navegador para varios recursos. Los scripts denunciados son, sin excepción, direcciones con parámetros. Por ejemplo, "https://meinedomain.de/…kit/js/components/slideshow.js?ver=4.8.2 (2,5 días)" y mi resultado no mejora. ¿Hay algún remedio a través de .htaccess o se requiere un complemento adicional? (Eso sería estúpido.)
Hola Nils! Sí, lamentablemente ese es el problema. Muchos complementos, como en su caso, probablemente un complemento de presentación de diapositivas, integran sus secuencias de comandos y sus elementos CSS individualmente y luego, en algún momento, tiene 20x Javascript que se cargan individualmente y 20 archivos CSS... Creo que los complementos como WP Rocket ayudan un poco allí , pero solo parcialmente. Lo que aún no he probado es CloudFlare. Este es un servicio que se encarga del almacenamiento en caché de la página y también optimiza el código fuente antes de entregarlo. Lo que me detiene: tienes que cambiar la configuración de DNS del dominio a CloudFlare y, de alguna manera, no me gusta cuando otro servicio se atasca entre mi sitio web y yo. Pero tal vez solo lo pruebe con un dominio menos importante antes de usarlo en Sir Apfelot. :D
¡Gracias por el gran aporte! :) ¡En Pingdom pasé de 30 a 83 para el almacenamiento en caché del navegador! Esto mejoró bastante mi tiempo de carga.
hola jens,
En primer lugar, gracias por el artículo, ¡muy útil!
Después de mi prueba de velocidad, que realmente no funciona tan bien a los 38, estoy buscando más opciones de optimización.
Entre otras cosas, la prueba me muestra que debo usar formatos de imagen modernos :-0 .. ¿qué son los formatos de imagen modernos?
Aquí están las 3 áreas marcadas en rojo:
Reducir los tiempos de respuesta del servidor (TTFB)
2,88 s
2
Proporcionar imágenes en formatos modernos.
2,66 s
3
Habilitar la compresión de texto
1,83 s
4
Tamaño de las imágenes correctamente
¿Quizás ya hay sugerencias anteriores para la optimización de usted? Estoy feliz de leer de usted.
gracias sven
¡Hola, Sven!
Sí, buena pregunta qué son los "formatos de imagen modernos". :D Creo que JPG debería ser una buena opción para fotografías.
Sin embargo: tiempo de respuesta del servidor: 2,88 segundos -> eso es mega lento. ¿Dónde aloja su sitio web? Suena casi como Strato. ;-) En 2,88 segundos, la mayoría de los servidores ya han enviado el sitio web completo al visitante y no solo el primer byte... debe hacer algo al respecto.
La segunda cosa: "dimensionar las imágenes correctamente" -> esto sucede cuando carga imágenes en una resolución mucho más alta de la que realmente muestra en el sitio web. Entonces, si solo lo muestra en el sitio web con un ancho de 1000 píxeles, es mejor no cargarlo en el formato de 4000 x 6000 píxeles. También ahorra una gran cantidad de datos. Para comprimir imágenes, puedo recomendar el complemento de WordPress TinyPNG o TinyJPG. También tienen un complemento de Photoshop y un sitio web que puede usar para reducir el tamaño de las imágenes. le sacan mucho partido...
Espero que esto te ayude... ¡LG! Jens
Google escribe sobre "formatos de imagen modernos" en Pagespeed:
"Los formatos de imagen como JPEG 2000, JPEG XR y WebP a menudo ofrecen una mejor compresión que PNG o JPEG, lo que permite descargas más rápidas y un menor uso de datos".
Pero, sinceramente, no conozco a nadie ni he visto que se use JPEG 2000 ni nada más. Incluso Photoshop tiene JPEG y PNG en Guardar para Web. A menos que todos los nuevos modelos de suscripción en línea hayan cambiado algo en esa dirección...
Sí, también creo que "JPEG 2000" y "moderno"??? Bueno, no importa… Creo que se puede vivir bastante bien sin tonterías. "Guardar para Web" en Photoshop crea imágenes razonablemente pequeñas. Pero si trabaja mucho con Photoshop, aún puedo recomendar "TinyJPG". Tienen un complemento para Photoshop que guarda archivos JPG/PNG muy bien comprimidos. puedes hacer un poco al respecto lee mi artículo sobre “Optimage”.N. Pero le daré a TinyJPG su propio artículo...
Gracias por el gran artículo. Es una pena que solo lo encontré hoy a través de un enlace. Implementado de inmediato, se siente mucho mejor que antes. Y en términos de velocidad de página, ambos códigos obtuvieron algunos puntos. Mejor que el complemento W3 Total Cache. Esto había disparado mi blog.
Hola Karsten! Me alegro de que te funcione mejor que W3 Total Cache. Tampoco me calenté con el complemento. Otro consejo para tu sitio web: Si haces clic en “Acerca de mí”, obtienes un error 404… A Google tampoco le gusta eso. Supongo que los visitantes también se sentirán decepcionados. ;-) LG y Felices Fiestas!
El consejo es útil, ¡gracias! Debo admitir que siempre he usado complementos como Autooptimize y CO. porque instalar complementos es muy fácil.
Pero dado que este truco se puede implementar tan rápido, definitivamente vale la pena intentarlo.