Mes: febrero 2014

SharePoint 2013 nos ofrece múltiples características orientadas a la implementación de Portales web públicos tales como Cross-Site Publishing, Managed Navigation, Catalogs, Content by Search WebParts, entre otros, que nos permiten implementar soluciones de Web Content Management para Internet, con menos esfuerzo. Todos estos beneficios de la nueva versión de esta plataforma también deben complementarse con las mejores prácticas asociadas a soluciones web en Internet, principalmente considerando los aspectos de optimización de los tiempos de respuesta de nuestros portales.

 Una de las recomendaciones para optimización de los tiempos de respuesta, es emplear descargas paralelas de contenido como imágenes, hojas de estilo o scripts (JavaScript, jquery). Para mayor información puede consultar a http://yuiblog.com/blog/2007/04/11/performance-research-part-4/.

Los navegadores por defecto tienen una cantidad de posibles componentes que pueden ser descargados a la vez por hostname, esto quiere decir que si al descargar una página web, disponemos de hostnames independientes empleados para descargar imágenes, hojas de estilos o scripts, esto permitirá que se puedan hacer descargas en paralelo reduciendo de esta manera los tiempos de respuesta de la página.

 Para lograr las descargas paralelas desde SharePoint, la mejor alternativa es crear un Site Collection independiente para los recursos de imágenes, además de archivos css y js. A continuación describo los pasos:

1. Creamos un host name site Collection nuevo para nuestros assets.

 2. Una vez creado el Site Collection, verificamos que este tenga habilitada las características de publicación y en el Site Collection Images library cargamos nuestras imágenes. Asegurarnos que tengamos habilitada las características de Image Renditions que ya fueron explicadas en un post anterior.

3. Validar que este configurada Image Renditions para nuestras imágenes.

 

 4. Ahora dirigirnos a nuestro Site Collection empleado para nuestro Portal (El SC de cara al cliente). Y vamos hacia Site Settings. 

5. En Site Collection Features, ubicamos el link Suggested Content Browser Locations, que nos permitirá enlazar a la biblioteca de Assets ubicada en nuestro Site Collection previamente creado.

6 . Se mostrará la biblioteca desde donde podremos agregar enlaces hacia otras ubicaciones.

 7. Agregamos la URL hacia el Asset Library.

8. Se muestra la URL recientemente agregada. 

 9. Si queremos insertar una de las imágenes en una página de nuestro Portal, damos clic en INSERT -> Picture y From SharePoint. 

10. En la ventana de Select an Asset damos clic sobre Suggested locations y podremos acceder al repositorio de imágenes de nuestro Site Collection para Assets.

 

11. Aquí podemos seleccionar la imagen que deseamos insertar a nuestra página.

 12. Debido a que estamos consultando imágenes de un Site collection remoto, no tendremos la posibilidad de emplear la característica de Image rendition seleccionando las plantillas de visualización directamente, por lo que tendremos que especificar el parámetro RenditionID seguido del ID asociado a la plantilla que deseemos utilizar.

13. Y listo, se habrá insertado nuestra imagen desde el Asset Site Collection.

14. Ahora, si  comparamos el tiempo en que se demoran en descargar las imágenes de una página estando publicadas en la misma página a aquellas que son consultadas desde un Site collection con URL independiente, el resultado es notable:

CON IMÁGENES CONSULTADAS DESDE LA MISMA URL.

 CON IMÁGENES CONSULTADAS DESDE OTRA URL.

Cuando implementamos un Portal web público, es importante tener en consideración muchos aspectos principalmente relacionados a los tiempos de respuesta del mismo. El tiempo que demore en carga las páginas de nuestro Portal será un punto crítico que podrá influenciar fuertemente en el crecimiento o decrecimiento de usuarios sobre este.

 Existen múltiples consideraciones que pueden ser tomadas en cuenta para lograr que nuestro portal tenga los mejores tiempos de respuesta, desde consideraciones sobre nuestra infraestructura, el desarrollo, el diseño gráfico, entre otros.

SharePoint 2013 ha traído múltiples características que contribuyen en la optimización de nuestros Portal web de Internet. Una de estas características es el Image Rendition, esta característica permite cargar una imagen sobre la biblioteca de imágenes del Site Collection y generar múltiples plantillas de visualización de la misma imagen con distintas dimensiones en pixeles reduciendo a su vez el tamaño de dicha imagen al recortarla automáticamente, lo que reduce la cantidad de KBs descargados, a diferencia de hacer un resize sobre una imagen grande, donde es necesario descargar la imagen completa indistintamente del tamaño en el que sea presentado a través de una página del Portal.

 A continuación mostraré los pasos necesarios para configurar y emplear la funcionalidad de Image Renditions:

1. Primero debemos dirigirnos hacia Site Settings de nuestro site collection.

2. En la página de Site Settings debajo de la categoría Look and Feel dar clic en Image Renditions.

 

3. En la página de Image Renditions se presenta un mensaje de color rojo indicando que la funcionalidad de blob cache no se encuentra habilitado para nuestro Site collection. 

 4. Blob cache, permite almacenar en cache cierto tipos de archivos tales como las imágenes, de tal manera que cada vez que un usuario consulte una página no se tengan que realizar requests innecesarios sobre los mismos archivos. Para habilitar Blob cache ingresamos al IIS y ubicamos nuestro IIS Web Site. Una vez localizado damos clic derecho sobre este y clic en Explore.

5.  A continuación ubicamos nuestro web.config y lo editamos (Este paso se debe repetir en todos los servidores Web de nuestra granja de servidores de SharePoint).

 6. Ubicamos la sección de BlobCache y es la opción de enabled que por defecto esta en false, la cambiamos por true. 

 7. Para aplicar los cambios hacemos un iisreset.

 8. Y cuando actualizamos la página de Image Renditions, veremos que ya no se muestra el mensaje anterior. Aquí podremos observar que disponemos 4 plantillas de visualización de imágenes por defecto. Si deseamos crear nuevas plantillas debemos dar clic en Add new item.

 9. En el formulario de New Image Rendition debemos especificar el nombre de la plantilla y el ancho así como también el alto para nuestras imágenes.

 10. Se podrá observar la nueva plantilla creada.

 11. Es importante recalcar que la opción de renditions no funcionará en cualquier biblioteca de imágenes. Esto lo podemos observar en la siguiente pantalla.

 12. La funcionalidad de Image renditions la podremos emplear sobre la biblioteca de Site Collection Images. Si queremos ver las plantillas, podemos dar clic sobre Edit Renditions.

 13. En la página Edit Renditions podemos ver que automáticamente se generaron versiones de una misma imagen con dimensiones distintas de acuerdo a las plantillas existentes. Si queremos modificar una de ellas podemos dar clic en Click to change. 

14. Aquí podemos elegir la sección especifica de la imagen que queremos que sea recortada y empleada según las dimensiones definidas en la plantilla. 

 15. Y los cambios se aplican.

 16. Al insertar nuestra imagen podremos seleccionar la plantilla que deseemos.

 17. Y se muestra la imagen en las dimensiones de la plantilla seleccionada, además la foto esta recortada lo que permite que la imagen pese menos optimizando el tiempo de carga de las páginas de nuestro Portal.