0
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 .
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 de istracion...
<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&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&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}<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}
'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:
Comentarios