» » Optimizando El DataLife Engine (DLE) Para Pagespeed

Optimizando El DataLife Engine (DLE) Para Pagespeed

En este Tutoriales En Linea les traigo una manera de optimizar el DLE para moviles según Google Developer para Pagespeed... la forma de optimizar la calidad de su página web con el fin de lograr el mejor rendimiento posible para PageSpeed.

¿Hay Algo Malo En El CSS?


Todos los archivos de CSS y JS se tendrá que minificar y empaquetar en DLE. Estos recursos en DataLife Engine quedara algo como esto:

Dependiendo de la codificaron de tu sitio windows-1251 o UTF-8, el charset = codificación de tu sitio, f = todos los scripts/estilos, separados por comas, y 30 el número de días que permanecerá en la memoria caché del navegador del usuario.
 
En la carpeta de la raiz de tu sitio (public_html de tu servidor...) buscar el archivo .htaccess de tu pagina web en el busca RewriteEngine y después de eso pega lo siguiente:

windows-1251
RewriteRule ^all.css$ /engine/classes/min/index.php?charset=windows-1251&f=/templates/Tema de la plantilla/css/allsite.css,/templates/Tema de la plantilla/css/font-awesome.css,/templates/Tema de la plantilla/css/bbcodes.css&30 [QSA]
UTF-8
RewriteRule ^all.css$ /engine/classes/min/index.php?charset=UTF-8&f=/templates/Tema de la plantilla/css/allsite.css,/templates/Tema de la plantilla/css/font-awesome.css,/templates/Tema de la plantilla/css/bbcodes.css&30 [QSA]
En tu plantilla de tu pagina web puedes agregar todos tus estilos de CSS....en el archivo de main.tpl... si ese es el archivo de configuración por que también puede ser custom.tpl....Depende de tu configuración en la opciones de sistema del panel de administracion...
<link href="/all.css" rel="stylesheet" />
Pero si usted tiene algunos estilos que sólo usas en algunas ocaciones, por ejemplo, en la noticia completa o una página estática de noticias, lo mejor es separarlas. Quedaria algo como esto:
[aviable=addnews]
    <link href="/add.css" rel="stylesheet" />
[/aviable]
[aviable=showfull]
    <link href="/full.css" rel="stylesheet" />
[/aviable]
 
Con los archivos Js hacemos algo idéntico:
 
windows-1251
[aviable=showfull]
	<script src="/engine/classes/min/index.php?charset=windows-1251&amp;f={THEME}/js/uppod_api.js,{THEME}/js/jquery.wysibb.min.js,{THEME}/js/fullstory.js&30" type="text/jаvascript"></script>
	[/aviable]
UTF-8
[aviable=showfull]
	<script src="/engine/classes/min/index.php?charset=UTF-8&amp;f={THEME}/js/uppod_api.js,{THEME}/js/jquery.wysibb.min.js,{THEME}/js/fullstory.js&30" type="text/jаvascript"></script>
	[/aviable]
O poner en .htaccess con estilos similares de comprobar la validez de intercambio {THEME} con la ruta a su tema. Por cierto, usted puede poner los requeridos JS en las bibliotecas de la matriz principal groupsConfig.php (más sobre esto más adelante).

En cuanto a JS...


Como es sabido para la que la optimizacion sea optima todos los scripts deberán que moverse a la parte inferior del código antes de la etiqueta de cierre. ¿Pero qué hacer con esas secuencias de comandos que requieren el DLE y las salidas de estos a través de la etiqueta <head>?...
En las versiónes anteriores, DLE 10.6 se introduce una nueva clase {jsfiles}, que muestra tres archivo adicionales (la librería de jQuery, jQuery-UI y dle_js)...

Antes de la versión 10.6 hay que hacer lo siguiente:

Buscar los archivos:
/index.php o /engine/modules/main.php
(dependiendo de la versión) y en ellos buscar:
$tpl->set ( '{headers}', $metatags."\n".$js_array );
Y se divide en dos etiqueta de plantilla:
$tpl->set ( '{headers}', $metatags );
$tpl->set ( '{jsfiles}', $js_array );
Es decir, dejamos en el archivo main.tpl {Header}(cabeceras), y añadimos:
{AJAX}
{jsfiles}

Como se puede ver, el {AJAX} y los {jsfiles}. Aquí es necesario hacer una observación. Solía haber la libreria de jQuery para cargar el CDN, tales como:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
{AJAX}
{jsfiles}
 
En este sentido, es necesario eliminar la biblioteca incorporada de {jsfiles}.Vamos a /engine/modules/functions.php y quitar/comentario:
'engine/classes/js/jquery.js',
'engine/classes/js/jqueryui.js',
 
A continuación, vamos al archivo /engine/classes/min/groupsConfig.php y quitar/comentario:
$min_documentRoot . '/engine/classes/js/jquery.js',
$min_documentRoot . '/engine/classes/js/jqueryui.js',
 
Y si quiere que sus "contenidos web estén adaptados a la tecnología móvil", quedaría como lo siguiente:
'general' => array(
    #$min_documentRoot . '/engine/classes/js/jquery.js',
    #$min_documentRoot . '/engine/classes/js/jqueryui.js',
    $min_documentRoot . '/engine/classes/js/dle_js.js',
    $min_documentRoot . '/templates/Default/js/jquery.cookie.js',
    $min_documentRoot . '/templates/Default/js/ajaxform.js',
    $min_documentRoot . '/templates/Default/js/main.js',
),
 
Y luego, en sus {jsfiles} estarán todos los scripts necesarios. Por supuesto, a condición de la memoria de caché.
 

 
Limpiamos el caché y vemos los resultado! Por lo tanto, hemos realizado 3 reglas: Reducir jаvascript, CSS minificado y empaquetado y eliminado de la parte superior de las páginas de código jаvascript, CSS y el bloqueo de pantalla. Eventualmente el archivo main.tpl quedaría similar al siguiente archivo:
<!DOCTYPE html>
<html>
    <head>
        {headers}
        <link href="{THEME}/images/favicon.ico" rel="icon" type="image/x-icon"/>
        <link href="{THEME}/images/favicon.ico" rel="shortcut icon" type="image/x-icon"/>
        <link href="/all.css" rel="stylesheet"/>
        [aviable=showfull]
            <link href="/full.css" rel="stylesheet"/>
        [/aviable]
        [aviable=addnews]
            <link href="/add.css" rel="stylesheet"/>
        [/aviable]
    </head>
    <body>
        {content}
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
        <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
        {AJAX}
        {jsfiles}
        [aviable=showfull]
            <script src="/full.js"></script>
        [/aviable]
        [aviable=addnews]
            <script src="/add.js"></script>
        [/aviable]
    </body>
</html>
 
Tal vez los siguientes artículos serán de tu interes:
 

Deja un comentario

Información
Atención! Usuarios que están en este grupo no pueden dejar comentarios en la página...Primero debes Registrarse!

Redes Sociales

Recupera Tus Mensajes O Chats De WhatsApp Borrados

Recupera Tus Mensajes O Chats De WhatsApp Borrados

  Recuperar mensajes y chats borrados de tu aplicación WhatsApp para Android es una tarea que puede resultar  necesaria alguna vez. A menudo, estamos tratando de liberar espacio físico de nuestro dispositivo Android y llegamos incluso a borrar...
Integrar El Boton de Whatsapp En Tu Web

Integrar El Boton de Whatsapp En Tu Web

  De todos es conocido que WhatsApp se ha convertido en una herramienta para compartir fotos y vídeos con tus amigos, familiares y compañeros de trabajo. También cada vez más usado, para compartir enlaces de contenidos de la web y otras aplicaciones móviles. Para ayudar a compartir los contenidos...
Crees que las redes sociales te están haciendo bien o mal

Crees que las redes sociales te están haciendo bien o mal

Las redes sociales te ofrecen una forma única de observar a la gente. Por ejemplo, el lenguaje utilizado en Twitter puede usarse para predecir si alguien está en riesgo de morir de una enfermedad cardíaca. El análisis de las actualizaciones de Facebook muestra que las mujeres son generalmente más...
Crea una imagen para las redes sociales

Crea una imagen para las redes sociales

Aprenda a combinar una foto, texto y material gráfico en Photoshop para su Facebook, Twitter y otras publicaciones en redes sociales. Utilice estas habilidades para crear sus propias imágenes de redes sociales o cualquier diseño que cree en Photoshop. Adobe Photoshop es un editor de gráficos...
Comparte instantáneamente tus fotos y diseños

Comparte instantáneamente tus fotos y diseños

Muestre rápidamente su trabajo a clientes y compañeros de trabajo, o comparta una idea al instante por correo electrónico, texto, redes sociales y más, todo dentro de Adobe Photoshop CC. Nota: Necesitará la última versión de Photoshop CC para usar esta función. Comparte tu trabajo ahoraHaz clic en...