Inicia sesión


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:
 


  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2018-10-03
  • Categorias: DataLife Engine SoftNews Media Group AJAX CSS3 html5 Html javascript jQuery WebSite webmasters Optimizacion Internet Noticias Tutorial




Información
Usuarios que no esten registrados no pueden dejar comentarios, te invitamos a que te registre!






Efectos jQuery - Ocultar y mostrar

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2019-11-17
  • Categorias: Diseño Web Lenguajes De Programacion html5 jQuery WebSite webmasters Noticias Tutorial

Como abrir un enlace con jQuery

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2019-11-17
  • Categorias: Diseño Web Lenguajes De Programacion html5 jQuery WebSite webmasters Noticias Tutorial

Cómo rastrear a los usuarios de Adblock usando Google Analytics

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2019-11-15
  • Categorias: Google WebSite Trucos y tips Noticias Tutorial

Curso de iniciación de JavaScript

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2019-10-21
  • Categorias: Lenguajes De Programacion javascript Cursos Noticias Tutorial

Cómo insertar código JavaScript

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2019-10-21
  • Categorias: Lenguajes De Programacion javascript Cursos Noticias Tutorial

Expresiones JavaScript para especificar valores de atributos en HTML

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2019-10-21
  • Categorias: Lenguajes De Programacion javascript Cursos Noticias Tutorial