HammerGarita
Gamma
Marketing
Verificación en dos pasos activada
Verificado por Whatsapp
Todos sabemos que Wordpress es la plataforma blogging por excelencia, la cual utilizan usuarios con conocimientos básicos, experimentados y emprendedores. Debido a su popularidad encontramos miles de plantillas gratuitas y de pago en la red, pero no siempre estás se encuentran optimizadas de manera adecuada, causando retrasos en la carga de nuestro sitio web perjudicándonos de cara al posicionamiento web. Hoy os quiero enseñar cómo pueden optimizar sus plantillas ustedes mismos exprimiéndole todo el jugo a su plantilla ofreciendo una mejor experiencia a todos los visitantes de su sitio web.
Nota: Para este tutorial utilizare la plantilla/theme Twenty Fifteen que es una de las plantillas más populares de Wordpress, aunque estos tips te servirán en casi cualquier plantilla.
1.- Optimizar código (eliminar llamadas php innecesarias)
Header
Vamos a ir por partes y comenzaremos por optimizar el header. Las plantillas de Wordpress muestran muchas cosas en tu cabecera y muchas de estas hacen llamadas php que se pueden quitar fácilmente. Vale, para optimizar el Header y cualquier otro archivo de nuestra plantilla nos dirigimos a la pestaña de Apariencia -> Editor.
Etiqueta de idioma
Identificamos las etiquetas <html> y <head> ya que aquí comenzara nuestra optimización.
En la primer línea podemos darnos cuenta de que mediante php obtiene el idioma de la página (Las etiquetas de idioma se utilizan para indicar el idioma en el que está escrito el texto u otros elementos en documentos HTML y XML. )
Creó que podemos ahorrarnos esta llamada escribiendo manualmente en que idioma esta nuestra página de la siguiente manera:
En este caso yo utilice el “es-MX” sólo como ejemplo, puedes obtener más referencias de los lenguage codes en la web de w3schools.
Etiqueta de Formato de Códificación
En esta etiqueta se define el formato de codificación, el cual nosotros también podemos escribir de manera manual, yo recomiendo que utilicen el formato de codificación UTF-8
Etiqueta optimizada quitando la llamada php:
Etiqueta de Pingback
La siguiente etiqueta es del pingback, para los que no sepan Pingback es un método para que los autores de la web soliciten una notificación cuando alguien enlaza uno de sus documentos.
Esa línea la podemos optimizar de la siguiente forma (remplazar tuweb.com por el dominio de ustedes):
Etiqueta TITLE
Esta etiqueta de igual manera se obtiene mediante php, por ejemplo muchas plantillas invocan el título de la siguiente forma:
Muchos lo que hacen es remplazar esta etiqueta por algo así:
Pero esto yo no lo recomiendo, porque esta etiqueta se verá en todas sus páginas inclusive en tus post, entonces si tu pones un titulo como por ejemplo “Tu web | Tutorial para optimizar plantilla wordress” este título no se vería, se vería el primero porque lo definimos de manera estática.
Si ustedes utilizan plugins como “Yoast wordpress seo” no se debería preocupar mucho de esta etiqueta.
Eliminar Elementos desde la cabecera
WordPress muestra en la cabecera información como la etiqueta de versión de WordPress, RSDlink y el wlwmanifest que no suele ser útil para muchos usuarios (Fuente: wpdirecto.com):
Muchos bloggers creen que es mucho mejor no mostrar la versión que tenemos instalada de Wordpresss, minimizando posibles ataques por bugs en la versión o por versiones no actualizadas.
Elimina todos estos elementos añadiendo a tu archivo Functions.php el siguiente código:
Index.php
Nos dirigimos al archivo Index.php y analizamos lo que se puede optimizar.
En este caso esta plantilla ya se encuentra optimizada, no hay más que moverle.
Nota: Esto va a variar dependiendo cada plantilla, porque no todos muestran su página principal de la misma forma, algunos tienen una página estática, otros muestran sus últimos post publicados y otros utilizan elementos como Sliders, así que la optimización de este archivo va a depender más de ustedes y el diseño de su plantilla.
Single.php
Para los que no lo sepan, el archivo single.php lo que hace es mostrar el articulo o post individualmente. La plantilla Twenty Fifteen al ser una plantilla muy liviana, no tiene mucho que optimizar en esta parte, pero yo les daré unos tips que les ayudaran a optimizar, ya muchas plantillas muestran estos elementos en sus post.
Autor
Varias páginas web muestran el autor que ha escrito algún artículo, wordpress obtiene estos autores con alguna de las siguientes referencias:
Ejemplo:
Si en tu sitio web tienes varios colaboradores, te recomiendo que dejes esa etiqueta tal cual, pero si tú eres el único creador de contenido te puedes ahorrar esta etiqueta escribiéndolo de manera manual:
Descripción de Autor
De igual manera sucede con la descripción de los autores, seguramente te has encontrado con sitios web que muestran una descripción de la persona que escribió el artículo.
Como con el nombre del autor, wordpress obtiene esta descripción mediante alguna de las siguientes referencias:
Ejemplo:
Las cuales podemos remplazar en nuestra plantilla quedando del siguiente forma:
Botones Sociales
Vamos, yo sé que muchas plantillas Premium ya traen integrados los botones sociales para compartir nuestro contenido, pero no todos tenemos la posibilidad de pagar una plantilla Premium y recurrimos a una gratuita, y seamos sinceros, muy pocas implementan esta funcionalidad.
A falta tal vez de conocimiento, nos vamos por el camino fácil e instalamos plugins que nos hacen toda la tarea, pero OJO, todos sabemos que los plugins son un arma de doble filo, porque aunque nos ayudan a realizar tareas de manera más fácil, el rendimiento en nuestro sitio web se ve disminuido. Lo que yo siempre he dicho es que a menor cantidad de plugins instalados, mucho mejor!
Ahora te enseñare a cómo poner los botones sociales de Facebook y Twitter sin tener que instalar absolutamente nada, todo lo haremos manualmente.
Para que los botones se añadan automáticamente al final del contenido tan solo debemos incluir en nuestro functions.php el siguiente código (Fuente: masquewordpress.com):
Quedando de la siguiente forma (Ustedes pueden darle el diseño y apariencia que gusten mediante CSS):
Footer.php
Vale, lo más seguro es que ustedes se estén preguntando ¿Qué es lo que se puede optimizar en el footer? Bueno, la mayoría de las plantillas al final de la página muestran lo que son los créditos o los derechos de autor, esta información la obtienen mediante llamadas PHP que yo pienso que son innecesarias, ya que nosotros lo podemos escribir de manera manual, ahora os enseño como.
Código de la plantilla:
Lo podemos optimizar de la siguiente forma:
¿Queda mucho mejor no lo creen?
Comprimir CSS
Comprimir el CSS nos beneficia bastante al reducir el peso de nuestras páginas de estilos y acelerando la carga de nuestro Sitio Web. La compresión lo que hace es eliminar comentarios y espacios en blanco de nuestros archivos CSS, por ello recomiendo crear antes un respaldo de tus CSS por si quieres hacer futuras modificaciones, ya que una vez compresos va a ser muy difícil realizar alguna modificación a nuestra hoja de estilos.
Existen muchos sitios online para realizar esta tarea, para este ejemplo ocupare el compresor de CSS Compressor
Nos dirigimos a nuestra hojas de estilos (Style.css) y copiamos todo lo que se encuentre dentro de este archivo y lo pegamos en el campo que dice “CSS Source Code Input:”
Ahora seleccionamos el nivel de compresión (Yo recomiendo ponerlo en Highest) y pulsamos el botón de Compress.
Ya que hayamos realizados todos los pasos anteriores, esperaremos un momento a que se comprima nuestro CSS y ahora nuestro código se verá así:
Lo copiamos y lo remplazamos por el que tengamos en nuestra hoja de estilos (style.css).
Mover tus Scripts al final de la página
Una de las técnicas más utilizadas por los webmasters para reducir el tiempo de carga de un sitio web es la de mover los JavaScript al final de nuestro fichero html, justamente antes de la etiqueta de cierre </body>.
¿Esto en que nos beneficia? Esto hace que la página cargue primero todos sus elementos (como CSS, imágenes, etc) antes que el javascript, evitando que se quede en satand-by.
2.- Reducir tamaño/peso de Imágenes
Aunque no lo crean, el peso de las imágenes es muy importe para la carga de nuestro sitio web, lo que haremos será reducir el peso de las imágenes, esto es para aquellos que utilizan banners, backgrounds de imagen, o simplemente para reducir el peso de las imágenes de sus post.
Primera Opción (Riot):
Riot es un software gratuito que nos ayudara a reducir considerablemente el peso de nuestras imágenes sin perder mucha calidad, este software lo pueden encontrar en forma instalable o portable (No pondré ningún link de descarga)
Ya que tenga en el software, lo abren y encontraran una interfaz como la siguiente, ustedes solo dan click en Open y buscan la imagen a la que le quieran reducir el peso.
En la parte izquierda “Initial Image” observamos la imagen origina, y en la parte derecha tenemos la previa de la imagen optimizada. Con la barra inferior que dice “Quality” podemos controlar que tanto le queremos disminuir el peso, entre más porcentaje le bajemos, la calidad se verá disminuida. Ya que encontremos un equilibrio entre peso y calidad simplemente pulsamos al botón “Save” y nuestra imagen se verá notablemente menos pesada.
Segunda Opción (Photoshop):
Vale, Photoshop es uno de los software de edición de imagen más utilizados, si tú eres un usuario de Photoshop, esta opción te va a agradar para optimizar tus imágenes.
Muchas veces cometemos el error de que simplemente damos en Archivo -> Guardar como. Pero apuesto a que varios de ustedes no utilizan la opción de guardar para web, ahora explico como funciona.
Seleccionamos el formato en el que deseamos guardar nuestra imagen, se darán cuenta de que hay dos PNG, el PNG–8 y el PNG-24. Ustedes seguramente se preguntaran cual es la diferencia entre estos, bueno la respuesta es sencilla, el PNG-8 guarda tu imagen con un peso más reducido pero está limitado en cuento al número de colores, este formato lo recomiendo para guardar imágenes planas, sin degradados ni sombras; ya si quieres guardar sombras y degradados utiliza el formato PNG-24.
Formato JPG, en este formato tienes la posibilidad de elegir con cuanta calidad deseas guardar tu imagen, a menor calidad menor es el peso de la imagen, yo recomiendo guardarla en Alta.
CONCLUSIONES
Con todas las anteriores recomendaciones y tips, conseguiran un aumento considerable en la velocidad de carga de su página y ya sabemos como le gusta a Google que una Web sea rápida, puedes comprobar tus resultados usando la herramienta de Pingdom para medir la velocidad de carga de tu sitio web.
Nota: Para este tutorial utilizare la plantilla/theme Twenty Fifteen que es una de las plantillas más populares de Wordpress, aunque estos tips te servirán en casi cualquier plantilla.
1.- Optimizar código (eliminar llamadas php innecesarias)
Header
Vamos a ir por partes y comenzaremos por optimizar el header. Las plantillas de Wordpress muestran muchas cosas en tu cabecera y muchas de estas hacen llamadas php que se pueden quitar fácilmente. Vale, para optimizar el Header y cualquier otro archivo de nuestra plantilla nos dirigimos a la pestaña de Apariencia -> Editor.
Etiqueta de idioma
Identificamos las etiquetas <html> y <head> ya que aquí comenzara nuestra optimización.
En la primer línea podemos darnos cuenta de que mediante php obtiene el idioma de la página (Las etiquetas de idioma se utilizan para indicar el idioma en el que está escrito el texto u otros elementos en documentos HTML y XML. )
PHP:
<html <?php language_attributes(); ?> class="no-js">Creó que podemos ahorrarnos esta llamada escribiendo manualmente en que idioma esta nuestra página de la siguiente manera:
HTML:
<html lang="es-MX" class="no-js">En este caso yo utilice el “es-MX” sólo como ejemplo, puedes obtener más referencias de los lenguage codes en la web de w3schools.
Etiqueta de Formato de Códificación
En esta etiqueta se define el formato de codificación, el cual nosotros también podemos escribir de manera manual, yo recomiendo que utilicen el formato de codificación UTF-8
PHP:
<meta charset="<?php bloginfo( 'charset' ); ?>">Etiqueta optimizada quitando la llamada php:
HTML:
<meta charset="UTF-8">Etiqueta de Pingback
La siguiente etiqueta es del pingback, para los que no sepan Pingback es un método para que los autores de la web soliciten una notificación cuando alguien enlaza uno de sus documentos.
PHP:
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">Esa línea la podemos optimizar de la siguiente forma (remplazar tuweb.com por el dominio de ustedes):
HTML:
<link rel="pingback" href="http://tuweb.com/xmlrpc.php">Etiqueta TITLE
Esta etiqueta de igual manera se obtiene mediante php, por ejemplo muchas plantillas invocan el título de la siguiente forma:
PHP:
<title><?php wp_title( '|', true, 'right' ); ?></title>
HTML:
<title>Tu Web | Otro sitio realizado con WordPress</title>Si ustedes utilizan plugins como “Yoast wordpress seo” no se debería preocupar mucho de esta etiqueta.
Eliminar Elementos desde la cabecera
WordPress muestra en la cabecera información como la etiqueta de versión de WordPress, RSDlink y el wlwmanifest que no suele ser útil para muchos usuarios (Fuente: wpdirecto.com):
HTML:
<meta name="generator" content="WordPress 3.4">
<link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://wpdirecto.com/xmlrpc.php?rsd">
<link rel="wlwmanifest" type="application/wlwmanifest+xml" href="http://wpdirecto.com/wp-includes/wlwmanifest.xml">Muchos bloggers creen que es mucho mejor no mostrar la versión que tenemos instalada de Wordpresss, minimizando posibles ataques por bugs en la versión o por versiones no actualizadas.
Elimina todos estos elementos añadiendo a tu archivo Functions.php el siguiente código:
PHP:
add_filter('the_generator', create_function('', 'return "";'));
remove_action('wp_head', 'rsd_link');
remove_action('wp_head', 'wlwmanifest_link');Index.php
Nos dirigimos al archivo Index.php y analizamos lo que se puede optimizar.
En este caso esta plantilla ya se encuentra optimizada, no hay más que moverle.
Nota: Esto va a variar dependiendo cada plantilla, porque no todos muestran su página principal de la misma forma, algunos tienen una página estática, otros muestran sus últimos post publicados y otros utilizan elementos como Sliders, así que la optimización de este archivo va a depender más de ustedes y el diseño de su plantilla.
Single.php
Para los que no lo sepan, el archivo single.php lo que hace es mostrar el articulo o post individualmente. La plantilla Twenty Fifteen al ser una plantilla muy liviana, no tiene mucho que optimizar en esta parte, pero yo les daré unos tips que les ayudaran a optimizar, ya muchas plantillas muestran estos elementos en sus post.
Autor
Varias páginas web muestran el autor que ha escrito algún artículo, wordpress obtiene estos autores con alguna de las siguientes referencias:
PHP:
<?php the_author(); ?>
<?php the_author_link(); ?>
<?php get_the_author_link(); ?>Ejemplo:
PHP:
<p>This post was written by <?php the_author(); ?></p>Si en tu sitio web tienes varios colaboradores, te recomiendo que dejes esa etiqueta tal cual, pero si tú eres el único creador de contenido te puedes ahorrar esta etiqueta escribiéndolo de manera manual:
HTML:
<p>This post was written by Hammer</p>Descripción de Autor
De igual manera sucede con la descripción de los autores, seguramente te has encontrado con sitios web que muestran una descripción de la persona que escribió el artículo.
Como con el nombre del autor, wordpress obtiene esta descripción mediante alguna de las siguientes referencias:
PHP:
<?php get_the_author_meta( $field, $userID ); ?>
<?php the_author_meta( $field, $userID ); ?>Ejemplo:
PHP:
<p>This author's Twitter name is <?php the_author_meta('twitter'); ?></p>Las cuales podemos remplazar en nuestra plantilla quedando del siguiente forma:
HTML:
<p>This author's Twitter name is <a href="https://twitter.com/forobeta">Forobeta</a></p>Botones Sociales
Vamos, yo sé que muchas plantillas Premium ya traen integrados los botones sociales para compartir nuestro contenido, pero no todos tenemos la posibilidad de pagar una plantilla Premium y recurrimos a una gratuita, y seamos sinceros, muy pocas implementan esta funcionalidad.
A falta tal vez de conocimiento, nos vamos por el camino fácil e instalamos plugins que nos hacen toda la tarea, pero OJO, todos sabemos que los plugins son un arma de doble filo, porque aunque nos ayudan a realizar tareas de manera más fácil, el rendimiento en nuestro sitio web se ve disminuido. Lo que yo siempre he dicho es que a menor cantidad de plugins instalados, mucho mejor!
Ahora te enseñare a cómo poner los botones sociales de Facebook y Twitter sin tener que instalar absolutamente nada, todo lo haremos manualmente.
Para que los botones se añadan automáticamente al final del contenido tan solo debemos incluir en nuestro functions.php el siguiente código (Fuente: masquewordpress.com):
PHP:
function compartir_post($content){
if(!is_feed() && !is_home()) {
$content .= '<div class="share-this">
<a href="http://twitter.com/share"
class="twitter-share-button"
data-count="horizontal">Tweet</a>
<script type="text/javascript"
src="http://platform.twitter.com/widgets.js"></script>
<div class="facebook-share-button">
<iframe
src="http://www.facebook.com/plugins/like.php?href='.
urlencode(get_permalink($post->ID))
.'&layout=button_count&show_faces=false&width=200&action=like&colorscheme=light&height=21"
scrolling="no" frameborder="0" style="border:none;
overflow:hidden; width:200px; height:21px;"
allowTransparency="true"></iframe>
</div>
</div>';
}
return $content;
}
add_action('the_content', 'compartir_post');Quedando de la siguiente forma (Ustedes pueden darle el diseño y apariencia que gusten mediante CSS):
Footer.php
Vale, lo más seguro es que ustedes se estén preguntando ¿Qué es lo que se puede optimizar en el footer? Bueno, la mayoría de las plantillas al final de la página muestran lo que son los créditos o los derechos de autor, esta información la obtienen mediante llamadas PHP que yo pienso que son innecesarias, ya que nosotros lo podemos escribir de manera manual, ahora os enseño como.
Código de la plantilla:
PHP:
<div id="copyright">
<p><?php bloginfo(); ?> © <?php echo date( 'Y' ); ?>. <?php _e( 'All Rights Reserved.', 'hueman' ); ?></p>
</div><!--/#copyright-->
<div id="credit">
<p><?php _e('Powered by','hueman'); ?> <a href="http://wordpress.org" rel="nofollow">WordPress</a>. <?php _e('Theme by','hueman'); ?> <a href="http://alxmedia.se" rel="nofollow">Alx</a>.</p>
</div><!--/#credit-->Lo podemos optimizar de la siguiente forma:
HTML:
<div id="copyright">
<p>Sitio de Prueba © 2015. All Rights Reserved.</p>
</div><!--/#copyright-->
<div id="credit">
<p>Powered by <a href="http://wordpress.org" rel="nofollow">WordPress</a>. Theme by <a href="http://alxmedia.se" rel="nofollow">Alx</a>.</p>
</div><!--/#credit-->¿Queda mucho mejor no lo creen?
Comprimir CSS
Comprimir el CSS nos beneficia bastante al reducir el peso de nuestras páginas de estilos y acelerando la carga de nuestro Sitio Web. La compresión lo que hace es eliminar comentarios y espacios en blanco de nuestros archivos CSS, por ello recomiendo crear antes un respaldo de tus CSS por si quieres hacer futuras modificaciones, ya que una vez compresos va a ser muy difícil realizar alguna modificación a nuestra hoja de estilos.
Existen muchos sitios online para realizar esta tarea, para este ejemplo ocupare el compresor de CSS Compressor
Nos dirigimos a nuestra hojas de estilos (Style.css) y copiamos todo lo que se encuentre dentro de este archivo y lo pegamos en el campo que dice “CSS Source Code Input:”
Ahora seleccionamos el nivel de compresión (Yo recomiendo ponerlo en Highest) y pulsamos el botón de Compress.
Ya que hayamos realizados todos los pasos anteriores, esperaremos un momento a que se comprima nuestro CSS y ahora nuestro código se verá así:
Lo copiamos y lo remplazamos por el que tengamos en nuestra hoja de estilos (style.css).
Mover tus Scripts al final de la página
Una de las técnicas más utilizadas por los webmasters para reducir el tiempo de carga de un sitio web es la de mover los JavaScript al final de nuestro fichero html, justamente antes de la etiqueta de cierre </body>.
¿Esto en que nos beneficia? Esto hace que la página cargue primero todos sus elementos (como CSS, imágenes, etc) antes que el javascript, evitando que se quede en satand-by.
2.- Reducir tamaño/peso de Imágenes
Aunque no lo crean, el peso de las imágenes es muy importe para la carga de nuestro sitio web, lo que haremos será reducir el peso de las imágenes, esto es para aquellos que utilizan banners, backgrounds de imagen, o simplemente para reducir el peso de las imágenes de sus post.
Primera Opción (Riot):
Riot es un software gratuito que nos ayudara a reducir considerablemente el peso de nuestras imágenes sin perder mucha calidad, este software lo pueden encontrar en forma instalable o portable (No pondré ningún link de descarga)
Ya que tenga en el software, lo abren y encontraran una interfaz como la siguiente, ustedes solo dan click en Open y buscan la imagen a la que le quieran reducir el peso.
En la parte izquierda “Initial Image” observamos la imagen origina, y en la parte derecha tenemos la previa de la imagen optimizada. Con la barra inferior que dice “Quality” podemos controlar que tanto le queremos disminuir el peso, entre más porcentaje le bajemos, la calidad se verá disminuida. Ya que encontremos un equilibrio entre peso y calidad simplemente pulsamos al botón “Save” y nuestra imagen se verá notablemente menos pesada.
Segunda Opción (Photoshop):
Vale, Photoshop es uno de los software de edición de imagen más utilizados, si tú eres un usuario de Photoshop, esta opción te va a agradar para optimizar tus imágenes.
Muchas veces cometemos el error de que simplemente damos en Archivo -> Guardar como. Pero apuesto a que varios de ustedes no utilizan la opción de guardar para web, ahora explico como funciona.
Seleccionamos el formato en el que deseamos guardar nuestra imagen, se darán cuenta de que hay dos PNG, el PNG–8 y el PNG-24. Ustedes seguramente se preguntaran cual es la diferencia entre estos, bueno la respuesta es sencilla, el PNG-8 guarda tu imagen con un peso más reducido pero está limitado en cuento al número de colores, este formato lo recomiendo para guardar imágenes planas, sin degradados ni sombras; ya si quieres guardar sombras y degradados utiliza el formato PNG-24.
Formato JPG, en este formato tienes la posibilidad de elegir con cuanta calidad deseas guardar tu imagen, a menor calidad menor es el peso de la imagen, yo recomiendo guardarla en Alta.
CONCLUSIONES
Con todas las anteriores recomendaciones y tips, conseguiran un aumento considerable en la velocidad de carga de su página y ya sabemos como le gusta a Google que una Web sea rápida, puedes comprobar tus resultados usando la herramienta de Pingdom para medir la velocidad de carga de tu sitio web.
Última edición:
