WordPress lento: cómo arreglarlo sin tocar código — Transcript

Full transcript

1. 0:00Y aquí lo tenemos. Ya habéis visto que
2. 0:01es sersencillo de un 74%, que es verdad
3. 0:04que partíamos de una buena base, pero
4. 0:05oye, le hemos dejado a 99 y ya te digo
5. 0:08que tú vas a notar mucho más la
6. 0:09diferencia porque seguramente no tengas
7. 0:11una base tan buena. Ya habéis visto que
8. 0:12es sersencillo. Muy buenas familia. Hoy
9. 0:14me disponía a hacer algo en mi página
10. 0:16web de mi agencia y he dicho, voy a
11. 0:18hacer un vídeo porque esto seguro que le
12. 0:20interesa a muchísima gente porque
13. 0:23imagínate que yo hablo así en este vídeo
14. 0:27y no verías nada, ¿no? Porque, ¿qué hace
15. 0:29este tío hablando tan lento? Lo mismo
16. 0:31pasa con las páginas web. Nadie quiere
17. 0:33navegar en una web lenta. Vivimos en la
18. 0:36sociedad de la prisa. Entonces, la gente
19. 0:38quiere que tu web cargue al instante. Si
20. 0:41tu web carga lenta, la experiencia de
21. 0:42usuario se va al traste, nadie va a
22. 0:44querer navegar con ella. Y ya no eso,
23. 0:47sino que encima a nivel de SEO no te va
24. 0:49a funcionar. Es decir, Google va a
25. 0:50decir, "Esta web es lenta, no te
26. 0:51posiciono." Aunque hayas hecho todo lo
27. 0:53demás bien. Así que en este vídeo te va
28. 0:55a explicar qué hacer bien para
29. 0:56posicionarte, es decir, el SEO mínimo
30. 0:58viable y qué hacer para que tu web
31. 1:00cargue rápida. Porque ya te digo,
32. 1:02acabamos de renovar la página web de
33. 1:04Palo Seco y y evidentemente en Casa de
34. 1:07Herrero, cuchara de Palo, así que he
35. 1:09visto, digo, "Hostia, vale, sí, el SEO
36. 1:10está muy bien porque lo ha hecho lo ha
37. 1:12hecho mi equipo, pero el tiempo de carga
38. 1:14mm ahí hay." Entonces, os voy a explicar
39. 1:17cuatro simples cosas. Lo primero, medir
40. 1:20una página web, es decir, cómo saber si
41. 1:22tu web carga lenta, carga rápida. Lo
42. 1:24segundo, cómo revisar el SEO de tu
43. 1:26página web y cómo mejorarlo. Lo tercero,
44. 1:29optimizar tu WordPress para que fluya
45. 1:31superrápido. Utilizaremos el plugin VP
46. 1:33Rocket, que seguro que la mayoría
47. 1:34conocéis, pero estoy seguro que hay
48. 1:37algunas funciones avanzadas que muy poca
49. 1:39gente conoce y que eso es la clave para
50. 1:41que tu web cargue más rápida. Y ya por
51. 1:43último haremos una comparativa, es
52. 1:44decir, pondremos cómo estaba antes, como
53. 1:46está ahora y ahí te demostraré que mi
54. 1:48web carga más rápida con estos ajustes
55. 1:50que vamos a tocar, porque aquí la clave
56. 1:52está en que tu web cargue rápida, que
57. 1:54Google la entienda y que el usuario no
58. 1:56se tome las uvas esperando a que cargue
59. 1:58tu web. Así que vamos con lo primero de
60. 2:00todo. Vamos a analizar y vamos a medir
61. 2:02qué tal está nuestra página web, porque
62. 2:04aquí hay varios factores que pueden
63. 2:06estar afectando a la web. Puede ser el
64. 2:08servidor, pueden ser las imágenes, puede
65. 2:09ser JavaScript, puede ser el CSS o puede
66. 2:13ser la plantilla que esté utilizando
67. 2:15vuestro WordPress. Entonces, hay
68. 2:17muchísimos elementos. Evidentemente, si
69. 2:19utilizamos el código nativo va a
70. 2:21funcionar todo más fluido, pero como la
71. 2:24mayoría de páginas web a día de hoy son
72. 2:26WordPress y tú muy posiblemente tengas
73. 2:28un WordPress, yo te voy a explicarlo
74. 2:29cómo hacerlo en WordPress. Y bien, para
75. 2:31medir la velocidad de una página web,
76. 2:33tenemos el Page Speed de Google, que
77. 2:35sería como la página oficial de Google,
78. 2:37pero luego tenemos una que es GT Matrix,
79. 2:40que a mí me gusta mucho también porque
80. 2:41aquí te va a mirar también el
81. 2:43performance del sitio y demás datos.
82. 2:45Entonces, yo lo que hago normalmente es
83. 2:47tirar siempre estas dos. Así que vamos a
84. 2:49tirar el test de análisis. Tengo que
85. 2:52decir aquí ojo porque hay mucha gente
86. 2:53que dice, "Ah, vale, sí, meto la página
87. 2:55principal y ya está." No, es como todo
88. 2:57mi sitio web. No, no, no, no, amigo,
89. 2:59amiga, la web se mide por landing.
90. 3:01Entonces, tú puede ser que en esta
91. 3:02página tengas imágenes que pesen mucho y
92. 3:05en la página web principal, ¿no?
93. 3:06Entonces, claro, aquí yo he tirado la
94. 3:07página principal, pero mira, de hecho,
95. 3:09bueno, me me he pasado de listo, pero
96. 3:10vamos a hacerlo con con esta landing,
97. 3:12¿vale? Porque esta landing es la de
98. 3:13agencia SEO Barcelona, que es una que
99. 3:15queremos posicionar. Así que voy a
100. 3:17volver a lanzar el testeo, disculpad. Y
101. 3:19luego en GT Matrix, pues ponemos también
102. 3:20la URL. Vamos a hacer que el test sea en
103. 3:23Londres. Y aquí también le damos a
104. 3:24analizar. Y aquí pues nada, esto va a ir
105. 3:26cargando, va a tardar un poquito. Y
106. 3:28vale, en la de Google como veis pues
107. 3:29oye, dice que la evaluación de métricas
108. 3:31web principales no está superada, o sea,
109. 3:33que ojo, sí que a nivel deseo lo tenemos
110. 3:35bastante bien, así que bueno, ya veremos
111. 3:37si se puede mejorar, pero bueno, si no
112. 3:39os explicaré qué debéis hacerlo para
113. 3:41tenerlo como lo tenemos nosotros. Y hoy
114. 3:43en rendimiento tenemos un 72, o sea, que
115. 3:46que no está mal, pero a ver, esto está
116. 3:48muy bien, pero yo donde me voy a ir
117. 3:50siempre es a móvil, siempre hay que
118. 3:52revisar la versión móvil, ¿vale? es lo
119. 3:53más importante. Luego, si bajamos aquí
120. 3:55abajo, vamos a ver un poco todos los
121. 3:57factores. Entonces, como veis, hay
122. 3:58bastantes. Entonces, podría profundizar
123. 4:01en cada uno de ellos, pero los que
124. 4:02quiero que conozcáis, que para mí son
125. 4:04los más vitales. Para mí el LCP es de lo
126. 4:07más importante. Básicamente el LCP es lo
127. 4:10primero que va a cargar tu página web,
128. 4:11es decir, cuánto tarda en aparecer lo
129. 4:14importante de la web, que en este caso
130. 4:15pues sería, oye, pues los títulos, la
131. 4:17imagen de fondo y demás. De hecho, si
132. 4:19nos vamos aquí arriba en el rendimiento,
133. 4:20si pasáis el cursor por encima, os va a
134. 4:22salir un desglose de todo, ¿vale? El
135. 4:23siguiente sería el CLS, que básicamente
136. 4:26quiere decir que es si la web se está
137. 4:28moviendo mientras carga. No sé si os ha
138. 4:29pasado alguna vez que vas navegando y
139. 4:31toc tac tac va cargando todo, vas a
140. 4:32clicar un botón y ves que se te ha
141. 4:34descolocado porque está cargando la
142. 4:35página, ¿no? Entonces, para mí eso
143. 4:36también entorpece mucho la experiencia
144. 4:38de usuario, así que es superimportante.
145. 4:40Luego el TVT, este de aquí también es
146. 4:42super importante. Esto te indica cuánto
147. 4:44tarda la web en reaccionar cuando se
148. 4:46hace clic. Es decir, si yo, por ejemplo,
149. 4:48clico aquí, ¿qué sucede? ¿Tarda en
150. 4:49cargar? ¿Sí no? ¿Vale? Por eso digo que
151. 4:51es importante toda la página web y no
152. 4:53solo la página principal, que es el
153. 4:54error que comete muchísima gente. Luego
154. 4:56también algo que quiero que miréis es en
155. 4:58el desglose de LCP. Si vais aquí al time
156. 5:00to f byte, que si pone 0 milisegundos es
157. 5:03perfecto. Esto quiere decir el tiempo de
158. 5:05carga del servidor. Lo digo porque hay
159. 5:07veces que si ves que tienes un tiempo de
160. 5:09carga, bueno, o tienes unos parámetros
161. 5:10muy malos, fíjate en este valor de aquí
162. 5:12porque si esto lo tienes elevado es por
163. 5:14culpa de tu servidor. Y ahora esto es lo
164. 5:16que te proporciona Google, que está muy
165. 5:18bien, pero luego vamos a GT Matrix, que
166. 5:21a mí me gusta porque es un poco más
167. 5:22técnica, ¿veis? Entonces, por ejemplo,
168. 5:24aquí ya te dice el LCP, que es el que te
169. 5:26he dicho al inicio, largest confirm
170. 5:28paint, que entonces aquí ya te dice el
171. 5:302,2 segundos, ¿vale? Eso es lo que tarda
172. 5:32en aparecer lo importante de la página.
173. 5:34Luego te sale el TVT, que también te lo
174. 5:36he comentado, pero ves, te lo dice como
175. 5:37en milisegundos, o sea, es un poco más
176. 5:39técnico, por eso me gusta más, porque
177. 5:40rápidamente ya lo identificas. Así que
178. 5:42aquí luego te da una nota en global.
179. 5:44Entonces, bueno, tengo que decir que es
180. 5:46una buena nota en concreto. Aquí si
181. 5:47pones el cursor por encima, te sale un
182. 5:49poco los mismos datos que hemos visto
183. 5:50anteriormente. Entonces, el margen de
184. 5:52mejora, pues bueno, es es mejorable y lo
185. 5:54vamos a mejorar, os lo vamos a
186. 5:56demostrar, pero estoy seguro que tú a la
187. 5:58que hagas las cuatro cosas que te voy a
188. 6:00decir lo vas a notar muchísimo porque
189. 6:01dudo que tengas una puntuación así de
190. 6:03entrada. Aquí también puedes ver una
191. 6:05previsualización de cómo ha cargado tu
192. 6:07página, ¿sabes? Eso te va a ayudar mucho
193. 6:08también a ver todos los segundos. O sea,
194. 6:10en total nosotros hemos tardado 3,6
195. 6:11segundos, ¿vale? Esto es lo que
196. 6:13tendríamos que reducir, ¿vale? Como veis
197. 6:14aquí pues va cargando todo y te va
198. 6:16diciendo un poco pues paso por paso,
199. 6:18¿okay? Y luego aquí también en los
200. 6:20factores que ha detectado podríamos
201. 6:22también segarlo, ¿vale? Por LCP, por TBT
202. 6:24y demás, ¿okay? A mí me gusta más, es
203. 6:26más visible, te ataca más, incluso te
204. 6:28dice también un poco el peso. Por
205. 6:30ejemplo, aquí vemos que hay alguna
206. 6:31imagen que pesa algo. Aquí tenemos
207. 6:32también el JavaScript. Aquí te dice,
208. 6:34bueno, un poco también el CSS y te dice
209. 6:36un poco lo que está pesando más de tu
210. 6:37página. Y luego, además, podrías incluso
211. 6:39hasta navegar por las pestañas y podrías
212. 6:41profundizar mucho más. ¿Okay? A mí
213. 6:43también, pues el tema de la cascada me
214. 6:45gusta mucho porque aquí vas a ver todo
215. 6:46como archivo por archivo de lo que está
216. 6:48tardando en cargar. Para mí también es
217. 6:49superútil, pero bueno, no quiero
218. 6:51marearte con tantos datos. Vamos a lo
219. 6:53práctico, a lo que realmente queremos
220. 6:55que eso llegue a nuestra web cargue más
221. 6:56rápida. Pero antes de nada, quiero que
222. 6:58tengáis el SEO mínimo viable bien de
223. 7:01vuestra web. Entonces, lo primero que
224. 7:03debéis hacer es ir a la descripción del
225. 7:05vídeo donde encontrarás el enlace para
226. 7:06descargar Ragmat. es para hacer el SEO
227. 7:09mínimo viable y te va a ayudar muchísimo
228. 7:10en el posicionamiento. Puedes
229. 7:12descargarlo gratuitamente. Para nosotros
230. 7:14es el mejor plugin de SEO. Ya ves que
231. 7:16hay más de 4 millones de personas que
232. 7:18que lo utilizan. Ha superado a todo lo
233. 7:20que había, así que es el que os
234. 7:21recomendamos. Y nada, luego pues esto te
235. 7:23lo descargas gratuitamente. Luego dentro
236. 7:25del WordPress Plugins lo añadimos y lo
237. 7:27instalamos. Cuando lo instaléis os
238. 7:29saldrá el asistente. Podéis seguir los
239. 7:31pasos que os indica sin problema. Y en
240. 7:33este caso vamos a volver al escritorio
241. 7:34porque aquí ya vamos a empezar a
242. 7:36monitorizar todo lo que nosotros
243. 7:38queramos. ¿Veis? Entonces, desde aquí ya
244. 7:39tenemos un montón de opciones. No os
245. 7:42mareéis con tantas opciones. Si queréis
246. 7:44que haga un vídeo profundizando en
247. 7:45Ragmath, podemos hacerlo. Yo lo que
248. 7:47quiero que hagáis 100% es en todas
249. 7:50vuestras páginas, que para mí eso es por
250. 7:52lo que es vital el Rangmat y por lo que
251. 7:54deberíais empezar a utilizarlo. Es en
252. 7:56cualquiera de las URLs. Por ejemplo, en
253. 7:59esta mismo, lo que os sale aquí arriba,
254. 8:01veis esta opción de aquí de Rangmat que
255. 8:02pone 76 sobre 100. A ver, no juguéis a
256. 8:05hacer un videojuego con esto, marcarlo.
257. 8:07O sea, como veis, este, yo marcado, he
258. 8:08puesto go aquí, ahora se me ha bajado a
259. 8:1018 y si pongo go, pues ya se me sube a
260. 8:1276. Este es el error que comete la
261. 8:14mayoría de gente y es que como que
262. 8:16persigue esto como tal. Oye, que os
263. 8:18sirva de guía, porque aquí yo he puesto
264. 8:20Geo, pero realmente a mí el error que
265. 8:22comete mucha gente es que dice, "Yo
266. 8:24quiero agencia Geo, ¿no?" Y como veis ya
267. 8:25tengo un 70, ya me ha bajado un poco la
268. 8:27puntuación, ¿no? Entonces utilizarlo que
269. 8:30os sirva de guía, ¿vale? Pero que no os
270. 8:32centréis en esto. Lo que quiero que os
271. 8:34centréis es sobre todo en los factores
272. 8:36más importantes, ¿vale?, que
273. 8:37comentábamos un poco como meter los
274. 8:39metas, el Slack, la descripción y luego
275. 8:41también por aquí dentro podríamos
276. 8:42indicar también, oye, el Metarobots,
277. 8:44¿queremos que esta web se indexe, sí,
278. 8:46que se indexe, oye, que no, que no se
279. 8:48indexe, ¿vale? Porque hay veces que no
280. 8:50interesa que se indexe. Si quisiéramos
281. 8:51crear una redirección, podríamos darle
282. 8:53también desde aquí, ¿vale? Y que se,
283. 8:54bueno, y crear una redirección a la web
284. 8:56que quisiéramos. ¿Qué más tenemos dentro
285. 8:58del plugin? Aquí si nos vamos al
286. 9:00escritorio tenemos que tener el mapa de
287. 9:02sitio bien configurado. Si le damos aquí
288. 9:03a settings, aseguraros de que se os haya
289. 9:05creado esta página de aquí, ¿vale? Esto
290. 9:07es el semap. Esto es super importante
291. 9:09para que Google empiece a indexar
292. 9:11vuestra página. ¿Okay? Entonces, aquí
293. 9:13dentro del simap nosotros podemos
294. 9:14escoger qué se va a meter. Entonces,
295. 9:16aquí podemos escoger, pues, por ejemplo,
296. 9:18oye, que las entradas si tenemos blog
297. 9:19pues que se incluyan. Si no tenemos blog
298. 9:21pues se se quitan, ¿vale? El tema de las
299. 9:23páginas también, evidentemente. Luego,
300. 9:25archivos adjuntos, si, por ejemplo,
301. 9:26tenemos muchos PDFs, pues oye, que se
302. 9:29incluyan los archivos adjuntos o nuestro
303. 9:31caso, pues los diferentes servicios, los
304. 9:33casos de éxito, las localidades y demás,
305. 9:35¿vale? Todo esto tenéis que tenerlo
306. 9:36dentro del sitem map. Luego, si nos
307. 9:38vamos a ajustes generales, también
308. 9:39podremos editar diferentes cosas. Por
309. 9:41ejemplo, el robots txt, que por lo que
310. 9:43veo aquí nosotros no tenemos nada
311. 9:45puesto. Deberíamos empezar a meter
312. 9:47diferentes URL. Supongo que porque es la
313. 9:49página nueva, entonces aún no tenemos
314. 9:50nada. Si no conoces que es el robots XT,
315. 9:53desde aquí nosotros le mandamos señales
316. 9:55a Google de las páginas que no queremos
317. 9:57que indexe en el buscador o no queremos
318. 10:00que las arrastre, ¿vale? Super
319. 10:01importante. Por ejemplo, si ponemos
320. 10:03disalow VP admin, le decimos a Google,
321. 10:05"Oye, todo lo que tenga que ver con el
322. 10:06VP admin que no se indexe dentro del
323. 10:08buscador o o no pierdas tiempo en
324. 10:11rastrear estas páginas, ¿vale?"
325. 10:12Entonces, lo digo por si tenemos páginas
326. 10:14que no queremos que se indexen en el
327. 10:15buscador, pues las vamos poniendo
328. 10:16disalow barra la la URL que queramos,
329. 10:19¿vale? importante tener este archivo
330. 10:20también lo más sano posible. Luego
331. 10:22tendríamos el archivo LLMS TXT. Este es
332. 10:25importante porque este sirve para
333. 10:27posicionarse en los diferentes LLMs. Sí
334. 10:29que es verdad que Google ya ha dicho que
335. 10:31él no lo utiliza. Okay, Google no lo
336. 10:33utiliza, pero Perplexity sí que ha
337. 10:36comunicado que lo utiliza. Entonces sí
338. 10:38que es verdad que es una fuente pequeña,
339. 10:39pero bueno, todo suma. Chat GPT no ha
340. 10:41hecho declaraciones, entonces no cuesta
341. 10:43nada. Lo activamos, simplemente marcamos
342. 10:45las entradas o los elementos o las
343. 10:47páginas. En este caso voy a meter
344. 10:48servicios, voy a meterlo todo. Yo sí que
345. 10:50es verdad que este lo hicimos lo hicimos
346. 10:51manualmente, que es este archivo de
347. 10:53aquí, ¿veis? Entonces yo aquí le digo,
348. 10:54pues, oye, que acceda a al GPT, por
349. 10:56ejemplo, al Cloud, al Gemini Pro y demás
350. 10:58o a o a cualquiera en este caso, ¿vale?
351. 11:00Pero bueno, simplemente pues eso, que le
352. 11:02damos acceso al LMS TXT, ¿vale? Para que
353. 11:05se indexe en los diferentes LLMs. Y
354. 11:07luego podríamos también gestionar alguna
355. 11:09función avanzada, como por ejemplo el
356. 11:10HTCES. Pero bueno, yo lo que quiero que
357. 11:12os quedéis es que, bueno, con este
358. 11:14plugin podemos hacer de todo. También
359. 11:15algo que utilizamos mucho son las
360. 11:16redirecciones. Entonces, nosotros aquí
361. 11:18siempre gestionamos todas las
362. 11:19redirecciones para no dejar URLs
363. 11:21huérfanas, 404 y demás. Algo que he
364. 11:23visto que no estaba puesto, que esto sí
365. 11:25que hay que meterlo 100%, es el tema de
366. 11:28los datos estructurados, ¿vale? Esta de
367. 11:30aquí siempre para mí tiene que estar
368. 11:31activada porque esto cada vez es más
369. 11:33clave para que Chat GPT, Gemini, Google
370. 11:36y demás te empiecen a recomendar los
371. 11:38datos estructurados, ¿vale? Y luego si
372. 11:40tenéis una tienda online también tenéis
373. 11:42wcommerce que es super importante lo que
374. 11:43hemos hecho antes de las páginas
375. 11:45tendréis que hacerlo con todos los
376. 11:46productos, ¿vale? Si tenemos e-commerce,
377. 11:48pues lo activamos también y esto no te
378. 11:50va a posicionar mágicamente, pero al
379. 11:52menos vas a ir muy por encima de toda tu
380. 11:55competencia y además ayuda a WordPress a
381. 11:57tener una estructura clara que Google la
382. 11:59entienda y que se te posicione mejor.
383. 12:01Para mí esto es clave. Y ahora vamos a
384. 12:03pasar a la siguiente fase. Vamos a
385. 12:05instalar VP Rocket para mejorar el
386. 12:07tiempo de carga de nuestra página, que
387. 12:09también te dejaré el enlace en la
388. 12:11descripción del vídeo para que puedas
389. 12:12acceder, que estoy seguro que ya lo
390. 12:13conoces. Al igual que Ragmat, es un
391. 12:16obligado, es decir, tú cuando instalas
392. 12:17el WordPress tienes que instalar
393. 12:18diferentes plugins. Uno es Ragmat para
394. 12:20trabajar el SEO y el otro es VP Rocket
395. 12:22para mejorar el tiempo de carga de la
396. 12:24web. Y este sí que tiene un coste que,
397. 12:26pero nada, es que son 60 € al año,
398. 12:28entonces son 50 céntimos al mes por un
399. 12:31sitio web. Así que si no puedes pagar 50
400. 12:33céntimos al mes para que tu web cargue
401. 12:35rápida, prepárate porque tu negocio me
402. 12:37sabe mal, pero no creo que te funcione
403. 12:39muy bien. Entonces, nada, eh, le damos a
404. 12:41comprar VP Rocket, completamos todos los
405. 12:43datos y una vez comprado, nada, pues lo
406. 12:44subimos por aquí, lo instalamos, lo
407. 12:47activamos, ¿vale? Y ahora aquí arriba ya
408. 12:49nos saldrá VP Rocket. Entonces por aquí
409. 12:50ya podríamos ir configurando un poco
410. 12:52todo. Mucha gente se equivoca con esto
411. 12:54porque no se trata de borrar la caché y
412. 12:57rezar adiós. Se trata de entender que
413. 12:59está frenando la web y aplicar las
414. 13:01optimizaciones recomendadas, ¿vale?
415. 13:03Mucho cuidado porque según lo que toques
416. 13:05te puedes cargar la página web. Entonces
417. 13:07con calma. Lo bueno de esto es que
418. 13:09solamente instalando Web Rocket ya
419. 13:11tienes una primera capa de optimización
420. 13:13orientada a mejorar el tiempo de carga
421. 13:15de la web. Pero evidentemente no nos
422. 13:17vamos a quedar solamente aquí. Vamos a
423. 13:18revisar los diferentes ajustes que tiene
424. 13:20VP Rocket para mejorar el rendimiento de
425. 13:22nuestra web. Así que entramos en ajustes
426. 13:24y mira, como veis lo que os había dicho.
427. 13:26Para garantizarte una web rápida, Web
428. 13:27Rocket aplica automáticamente el 80% de
429. 13:30las prácticas recomendadas para mejorar
430. 13:31el rendimiento, ¿vale? Pero nosotros
431. 13:33aquí venimos a por más. Queremos que la
432. 13:34web cargue superrápido. Entonces, lo
433. 13:36primero sería minificar los archivos de
434. 13:38CSS y también los de JavaScript. De esa
435. 13:40manera lo que va a hacer es que elimina
436. 13:42todos los espacios en blanco, los saltos
437. 13:44de línea y demás. Entonces, te pone todo
438. 13:46el código en una misma línea, todo
439. 13:48recto, y así minificamos el tamaño del
440. 13:50archivo. Luego podríamos optimizar la
441. 13:52entrega de CSS, ya que muchas webs
442. 13:54cargan CSS que no necesitan. Esta opción
443. 13:56ayuda a reducir esa carga innecesaria.
444. 13:58Mismo con el JavaScript. Podemos activar
445. 14:01esta opción de aquí de cargar archivos
446. 14:02de JavaScript de manera diferida. De esa
447. 14:04manera, eh, carga el JavaScript de
448. 14:06manera diferida y elimina el JavaScript
449. 14:07que booquea la visualización del sitio.
450. 14:09Si la activamos ya, pues oye, esto es
451. 14:11perfecto. Y luego ya el delay JavaScript
452. 14:13Execution, que sería bueno, retrasar la
453. 14:15ejecución del JavaScript. A todo esto,
454. 14:17yo lo que os recomiendo hacer es ir
455. 14:19opción por opción. Entonces, no hagamos
456. 14:21así a lo burro, tenemos que ir opción
457. 14:23por opción e ir recargando la página
458. 14:24web. Entonces, recargamos la página web,
459. 14:27vemos que todo, de hecho, yo estoy
460. 14:29notando ya que carga más rápida. Vemos
461. 14:31todo esto, luego haremos el test, vemos
462. 14:33que todo carga bien, que todos los
463. 14:34botones funcionan, sobre todo el tema
464. 14:36del JavaScript, por ejemplo, esto, esto
465. 14:37es JavaScript, ¿veis esto? Estas estos
466. 14:39efectos animados son JavaScript. Esto es
467. 14:41JavaScript, ¿veis? Entonces está
468. 14:42cargando todo okay. Diferentes botones,
469. 14:44validamos, testeamos, sobre todo, ¿vale?
470. 14:46Que que todo esté esto también veis que
471. 14:47va apareciendo, ¿ves que hace ese
472. 14:49difuminado? Todo esto es JavaScript,
473. 14:51¿vale? Entonces, bueno, vemos que todas
474. 14:52las funciones de la web cargan
475. 14:54correctamente porque y vamos activando
476. 14:56esa opción por acción, guardamos,
477. 14:57testeamos. Vale, yo lo he hecho un poco
478. 14:58a lo burro porque soy un camicace, pero
479. 15:00también porque controlo bastante de todo
480. 15:02esto. Okay. Y la siguiente opción que
481. 15:04quiero que toquemos es el tema de
482. 15:05medios, ¿vale? Aquí vamos a tocar todo
483. 15:07el tema del Load. Para mí lo primero es
484. 15:09habilitar eh las imágenes, el AC load y
485. 15:12los vídeos. En mi caso también iframe si
486. 15:14es que metemos vídeos de YouTube. ¿Ves?
487. 15:15De hecho, aquí te dice, "Replaza la
488. 15:17iframe de YouTube con una imagen de eh
489. 15:19previa". Vale, es también es muy útil. O
490. 15:21si por ejemplo metemos las imágenes
491. 15:23dentro, o sea, metemos las imágenes en
492. 15:24CSS, que yo creo que alguna está metida,
493. 15:27lo activamos también. Esto quiere decir
494. 15:28que si en el CSS estamos cargando alguna
495. 15:30imagen, pues oye, que también lo tenga
496. 15:31en cuenta dentro del Lazy Load. Y ya
497. 15:33luego, por último, el que me gusta mucho
498. 15:35también es en tema de fuentes, es el
499. 15:36precargar fuentes, este de aquí. Esto lo
500. 15:38que hace es que ayuda a las fuentes
501. 15:40principales, por ejemplo, esta de aquí,
502. 15:42que es un poco más personalizada, a que
503. 15:44realmente aparezcan antes de desplazarse
504. 15:47para mejorar la estabilidad del diseño,
505. 15:49¿vale? para que no te cargue una
506. 15:50tipografía extraña. Y bueno, como veis,
507. 15:52es super extenso VP Rocket, o sea, da
508. 15:54para hacer una formación completa, pero
509. 15:56al menos teniendo esto que os he
510. 15:57recomendado, vuestra web ya va a cargar
511. 15:59más rápida en el 100% de los casos. Pero
512. 16:02no me quiero despedir sin antes
513. 16:03explicaros el Rocket Inside, porque esta
514. 16:05opción de aquí para mí es fundamental y
515. 16:07es superútil. lo que hace es agilizar
516. 16:10muchísimo el proceso porque tal y como
517. 16:12lo hemos hecho ahora, tal y como os lo
518. 16:14he explicado, lo que hacíamos era que
519. 16:15cogíamos la URL, nos íbamos a las
520. 16:17diferentes páginas y empezábamos a
521. 16:19analizarlo, ¿no? Pues ahora desde Rocket
522. 16:21Inside lo que podemos hacer aquí es
523. 16:23añadir una página y ya desde dentro de
524. 16:25VP Rocket podemos empezar a medir el
525. 16:27rendimiento de páginas concretas,
526. 16:29revisar las métricas de LCP, CLS, TVT y
527. 16:33recibir recomendaciones directas, que
528. 16:35básicamente el resumen este lo que hace
529. 16:38es chupar de de GT Matrix y te lo pinta
530. 16:41aquí directamente. Entonces, lo que
531. 16:42haces básicamente es ahorrarte irte a GT
532. 16:44Matrix, sino que lo tienes todo en una
533. 16:45misma página. Y lo bueno es esto, que tú
534. 16:47puedes ir lanzando test limitados e
535. 16:49incluso puedes activar la opción de
536. 16:51supervisión del rendimiento, que sea de
537. 16:53manera diaria, semanal o o mensual, si
538. 16:55es que vas haciendo muchos cambios en la
539. 16:56página. Entonces, tú la activas y pues,
540. 16:58oye, cada día va a hacer el test de
541. 16:59velocidad. Yo te recomiendo que no hace
542. 17:01falta volvernos locos si es que no es
543. 17:03una web que recibe cambios constantes,
544. 17:05sino que puedes hacerlo, oye, semanal o
545. 17:06mensual para que te avise o para que te
546. 17:08vaya recogiendo los diferentes datos. Y
547. 17:11aunque puedes borrar la caché
548. 17:12manualmente, VP Rocket hace limpiezas
549. 17:14automáticas de caché y dependiendo del
550. 17:15escenario hace limpieza parcial o total
551. 17:17del caché. Y si tienes e-commerce, VP
552. 17:19Rocket ya está preparando para trabajar
553. 17:21con plugins como WoCommerce y excluye
554. 17:23por defecto páginas sensibles como el
555. 17:25carrito, Checkout o Mi cuenta, porque
556. 17:28ahí hay datos específicos del usuario.
557. 17:30Aún así, revisa el flujo de compra para
558. 17:32asegurarte de que todo está funcionando
559. 17:34correctamente. Y ahora, ¿queréis flipar
560. 17:36con lo rápido que carga mi página web
561. 17:38con estos pequeños ajustes? Aquí la
562. 17:41tenemos. ¿Cómo está cargando?
563. 17:43Actualmente me ha dado un 99%. Sí que es
564. 17:46verdad que yo ya partía de una buena
565. 17:47base de un 75, pero bueno, como ya
566. 17:49habéis visto, tocando simplemente cuatro
567. 17:51opciones, ya hemos mejorado muchísimo el
568. 17:53rendimiento de carga de nuestra página
569. 17:55web. Y como os he comentado antes, como
570. 17:57veis, no solamente es el tema del
571. 17:59número, que sí que es un indicador. Yo
572. 18:01lo que quiero que os quedéis es en todo
573. 18:03lo que hemos ido viendo en este vídeo,
574. 18:05¿no? A nivel de tiempo de cargas creo
575. 18:06que ha quedado todo s supercaro y que,
576. 18:09oye, si tenéis algún problema con VP
577. 18:11Rocket, que sepáis también que ellos
578. 18:12cuentan con un soporte desde aquí, pues
579. 18:14oye, decís un poco lo que se está
580. 18:16fallando y os ayudarán en todo lo que
581. 18:18necesitéis. Así que bien, agárrate la
582. 18:20silla porque tu web va a empezar a volar
583. 18:22a partir de ahora. Y lo dicho, nos vemos
584. 18:24en próximos vídeos. Un fuerte abrazo.