As regras em Alta Performance em Sites Web explicam como você pode otimizar a performance de Ajax, CSS, JavaScript, Flash e imagens que você usa em suas páginas. O grande problema em minha opinião, é encontrar uma solução que realmente facilite a vida do implementador no momento de codificar, e que tente seguir pelo menos algumas técnicas das melhores práticas de otimização.
Durante as minhas “googleadas” pela procura de uma solução, me deparei com várias soluções, porem nenhuma que atendesse ao que eu estava procurando. Resolvi então estudar e codificar a minha própria solução baseada em diversas soluções disponíveis e integrá-la ao Zend Framework.
Solução
Não vou entrar em detalhes de como criar ou configurar uma aplicação Zend Framework, mas vou detalhar os pontos importantes que deverão ser implementados e ou alterados.
Depois de criada a aplicação, alterei alguns arquivos e habilitei o layout da aplicação, para poder demonstrar o funcionamento da solução de Minify. O primeiro passo após essas configurações foi incorporar a biblioteca Paiva no meu projeto.
PROJETO ZF1-PAIVA
Arquivo ZIP ou Arquivo TAR.GZ
Após realizar o download, descompacte a pasta “Paiva” dentro da pasta “library” do seu projeto.
Implementando a solução
Etapa 1
Alterar o arquivo application.ini, realizar o autoload da biblioteca Paiva (linha 22) e incluir o Helper (linha 38), conforme pode ser visto abaixo:
/application/configs/application.ini
;-------------------------------------------------------------------------------
; erros e demais configurações do php
;-------------------------------------------------------------------------------
phpSettings.display_startup_errors = FALSE
phpSettings.display_errors = FALSE
phpSettings.date.timezone = "America/Sao_Paulo"
phpSettings.short_open_tag = TRUE
;-------------------------------------------------------------------------------
; configuração e caminho do bootstrap
;-------------------------------------------------------------------------------
includePaths.library = APPLICATION_LIB
bootstrap.path = APPLICATION_PATH "" DS "Bootstrap.php"
bootstrap.class = "Bootstrap"
appnamespace = "Application"
;-------------------------------------------------------------------------------
; autoload dos pacotes da pasta library
;-------------------------------------------------------------------------------
autoloaderNamespaces[] = "Paiva"
;-------------------------------------------------------------------------------
; configuração do frontcontroller e modulos
;-------------------------------------------------------------------------------
resources.frontController.controllerDirectory = APPLICATION_PATH "" DS "controllers"
resources.frontController.params.displayExceptions = FALSE
resources.frontController.params.env = APPLICATION_ENV
;-------------------------------------------------------------------------------
; configuração de view e layout
;-------------------------------------------------------------------------------
resources.layout.layoutPath = APPLICATION_PATH "" DS "layouts"
resources.view[] =
resources.view.doctype = "HTML5"
resources.view.encoding = "UTF-8"
resources.view.helperPath.Paiva_Helper = APPLICATION_LIB "" DS "Paiva" DS "Helper"
[staging : production]
[testing : production]
phpSettings.display_startup_errors = TRUE
phpSettings.display_errors = TRUE
[development : production]
phpSettings.display_startup_errors = TRUE
phpSettings.display_errors = TRUE
resources.frontController.params.displayExceptions = TRUE
Etapa 2
Alterar o .htaccess para que os navegadores aceitem o encode de arquivos gzip, conforme pode ser visto a partir da linha 12 do exemplo abaixo:
/public/.htaccess
# CONFIGURAÇÃO PADRÃO DO ZEND FRAMEWORK
# ------------------------------------------------
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} -s [OR]
RewriteCond %{REQUEST_FILENAME} -l [OR]
RewriteCond %{REQUEST_FILENAME} -d
RewriteRule ^.*$ - [NC,L]
RewriteRule ^.*$ index.php [NC,L]
# ------------------------------------------------
# CONFIGURAÇÃO PARA O GZIP DE JS E CSS
# ------------------------------------------------
AddType "text/javascript" .gz
AddEncoding gzip .gz
AddType "text/css" .gz
AddEncoding gzip .gz
RewriteCond %{HTTP:accept-encoding} gzip
RewriteCond %{HTTP_USER_AGENT} !Safari
RewriteCond %{REQUEST_FILENAME} !^.+\.gz$
RewriteCond %{REQUEST_FILENAME}.gz -f
RewriteRule ^(.+) $1.gz [QSA,L]
Etapa 3
Incluir os arquivos JS e CSS no layout utilizando o Helper, conforme pode ser visto abaixo:
/application/configs/application.ini
<!--[if lt IE 7]> <html class="no-js ie6 oldie" lang="pt-br"> <![endif]-->
<!--[if IE 7]> <html class="no-js ie7 oldie" lang="pt-br"> <![endif]-->
<!--[if IE 8]> <html class="no-js ie8 oldie" lang="pt-br"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="pt-br"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>ZF1-SKELL</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<?php $this->headLink()->offsetSetStylesheet(0, $this->baseUrl('css/style.css')); ?>
<?php $this->headLink()->offsetSetStylesheet(1, $this->baseUrl('css/ui-lightness/jquery-ui-1.8.16.custom.css')); ?>
<?php echo $this->compressStyle() ?>
<?php $this->headScript()->offsetSetFile(0, $this->baseUrl('js/libs/modernizr-2.0.6.min.js')); ?>
<?php $this->headScript()->offsetSetFile(1, $this->baseUrl('js/libs/jquery-1.6.2.min.js')); ?>
<?php $this->headScript()->offsetSetFile(2, $this->baseUrl('js/plugins.js')); ?>
<?php $this->headScript()->offsetSetFile(3, $this->baseUrl('js/libs/jquery-ui-1.8.16.custom.min.js')); ?>
<?php $this->headScript()->offsetSetFile(4, $this->baseUrl('js/script.js')); ?>
<?php echo $this->compressScript() ?>
</head>
<body>
<div id="container">
<header class="ui-widget-header">
<h1 style="margin: 10px">Zend Framework Skell<h1/>
</header>
<div id="main" role="main" style="margin: 10px">
<?php echo $this->layout()->content; ?>
</div>
<footer>
</footer>
</div>
</body>
<!--[if lt IE 7 ]>
<script src="//ajax.googleapis.com/ajax/libs/chrome-frame/1.0.3/CFInstall.min.js"></script>
<script>window.attachEvent('onload',function(){CFInstall.check({mode:'overlay'})})</script>
<![endif]-->
</html>
Atenção
O Helper vai tentar criar dentro da pasta “public” uma pasta chamada “cached”.
Em ambiente linux geralmente esse processo não pode ser concluído, então crie manualmente e de permissão 0775 para a pasta.
PROJETO ZF1-SKELL
Arquivo ZIP ou Arquivo TAR.GZ