Optimizando El DataLife Engine (DLE) Para Pagespeed

Visto: 167 Categorias: AJAX / CSS3 / DataLife Engine / Html / html5 / Internet / javascript / jQuery / Noticias / Optimizacion / SoftNews Media Group / Tutorial / WebSite / webmasters

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=/templates/TutorialesEnLinea_es/js/uppod_api.js,/templates/TutorialesEnLinea_es/js/jquery.wysibb.min.js,/templates/TutorialesEnLinea_es/js/fullstory.js&30" type="text/javascript"></script>
	[/aviable]
UTF-8
[aviable=showfull]
	<script src="/engine/classes/min/index.php?charset=UTF-8&amp;f=/templates/TutorialesEnLinea_es/js/uppod_api.js,/templates/TutorialesEnLinea_es/js/jquery.wysibb.min.js,/templates/TutorialesEnLinea_es/js/fullstory.js&30" type="text/javascript"></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 javascript, CSS minificado y empaquetado y eliminado de la parte superior de las páginas de código javascript, CSS y el bloqueo de pantalla. Eventualmente el archivo main.tpl quedaría similar al siguiente archivo:
<!DOCTYPE html>
<html>
    <head>
        {headers}
        <link href="/templates/TutorialesEnLinea_es/images/favicon.ico" rel="icon" type="image/x-icon"/>
        <link href="/templates/TutorialesEnLinea_es/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:
En la ventana que aparece, describir el problema y enviar el reporte a la administración.
Información
Usuarios que están en este grupo no pueden dejar comentarios en la página

Acerca De

Tutoriales En Linea es un sistemas instructivos de autoaprendizaje que pretenden simular al maestro y muestran al usuario el desarrollo de algun procedimiento o los pasos para realizar una determinada actividad...[]...normalmente consiste en una serie de pasos que van aumentando el nivel de dificultad y entendimiento...Leer Mas...

Copyrighted.com Registered & Protected 
CRU2-LFZH-BPSX-EGVT