Fórum OpenCart Brasil

Por um e-commerce livre, confiável e profissional

Avatar do usuário
Por maxno
Mensagens
#1031
bom, vou fala um pouco sobre a questão da velocidade e como proceder para que o site fica mais leve

1. Intro
a Google utiliza a velocidade de carregamento das páginas para rankeamento, ou seja, site com tema mais pesado, perde o rank
2. intro
o tempo de carregamento do site pode tbm causar rejeição entre os clientes, pode ser um template bem maneiro e tal, mais o que conta sempre para o comercio eletronico são: velocidade, sites praticos e facil de mexer e localizar o conteudo e ate mesmo uma compra rapida,
veja bem, os maiores sites de vendas do brasil são americana e shoptime, com desing simples e facil, porem, rapidos



Optmizando :

1 css:
o css em si, já é uma forma de reduzir o tamanho do site, mais, pode reduzir mais o que já vem com o opencart

primeiro, sempre junta todos os css em uma só folha

copie todo css do catalog/view/javascript/jquery/thickbox/thickbox.css
e cole no final do catalog/view/theme/default/stylesheet/stylesheet.css

isso irá reduzir 2 forma, o tamanho somado dos 2 arquivo e a requisição do HTTP (quanto menos requisição HTTP o site tiver, será mais rapido a leitura dos navegadores, indepedendo do tamanho)

após isso, vamos reduzir mais um pouco o css

utilize o site http://www.cleancss.com a opção de compreção: highest, (isso reduzirá os caracteres desescessario, como as quebras de linha(enter) e comentarios)


2. Utilize CSS sprites

sprites são varias img numa só, reduzindo o tamanho tbm das img e da requisição HTTP
nao entendeu ?

um exemplo:

Imagem

utilize o site http://csssprites.com/ para geras suas sprites



3. Utilize o Gzip
gzip é como se fosse um zip ou rar, o site fica em gzip no sevidor, e quando chama, o navegador deszipa e imprime o conteudo

veja:
Imagem
Imagem

para utilizar vai em admin > sistema > configuração > sevidor e marce a opção 9

para testa e ver o quanto o site ta comprimido, utilize o site http://www.gidnetwork.com/tools/gzip-test.php



4. Utilize a livraria da google para ajax

uma solução que a google teve que ta tendo cada vez mais usuario utilizando isto

o jquery é um unico codigo em javascript, mais pq carregalo toda vez diferente pra cada site? pq cada vez que as info entra no seu navegador, as info fica gravada no cache, para abrir mais rapido a cada visita

então, a gogle disponibiliza os codigo para nos usalo,

na head.tpl
encontre:
Código: Selecionar todos
<script type="text/javascript" src="catalog/view/javascript/jquery/jquery-1.3.2.min.js"></script>
e substitua para
Código: Selecionar todos
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>



5. crie um subdomino apenas para as img

quando cria um subdomino apanas para as img, as config do site avisa o navegador, e o navegador vai ler aquele HTTP de modo diferente
vcs ja deve ter visto quando um site ta carregando e aparece carregando "img.dominio.com" e "dominio.com" ao mesmo tempo

para fazer isto, crie um subdomino no painel do seu host,

vai no arquivo do opencart, config.php e mude o link do HTTP da img

dpois copie a pasta inteira "image" do opencart para o subdomino que criou



essas são algumas dicas pra otimizar seu site, da pra fazer mais coisas pra diminuir o tamanho total do site, só da uma procurada na google
Avatar do usuário
Por rochester
Mensagens
#1286
Só uma observação, cuidado com o GZip. Na versão 1.4.7 ao menos eu tinha problemas do site "subir" quando utilizava ele em 9

[]'s
Por tenshimsm
#1488
Opa!
Quem utiliza o Google Chrome pode utilizar as Ferramentas do desenvolvedor. Na aba Audits é so pedir para dar um Reload na página e ela será analizada. O Chrome mostra uma bolinha vermelha antes dos itens críticos e as sugestões com uma amarela. Para quem utiliza o Firefox instale o complemento PageSpeed do Google ou o YSlow do Yahoo! eles tem o Firebug como pré requisito.

Dicas do Google: Let's make the web faster
http://code.google.com/intl/pt-BR/speed/articles/

Ferramenta online para compressao de javascript
http://closure-compiler.appspot.com/home

Script PHP para compressa de CSS
http://code.google.com/p/cssmin/

Dicas do Yahoo!: Best Practices for Speeding Up Your Web Site
http://developer.yahoo.com/performance/rules.html
Avatar do usuário
Por Manoel Vidal
Mensagens
#1533
tenshimsm escreveu:Opa!
Quem utiliza o Google Chrome pode utilizar as Ferramentas do desenvolvedor. Na aba Audits é so pedir para dar um Reload na página e ela será analizada. O Chrome mostra uma bolinha vermelha antes dos itens críticos e as sugestões com uma amarela. Para quem utiliza o Firefox instale o complemento PageSpeed do Google ou o YSlow do Yahoo! eles tem o Firebug como pré requisito.

Dicas do Google: Let's make the web faster
http://code.google.com/intl/pt-BR/speed/articles/

Ferramenta online para compressao de javascript
http://closure-compiler.appspot.com/home

Script PHP para compressa de CSS
http://code.google.com/p/cssmin/

Dicas do Yahoo!: Best Practices for Speeding Up Your Web Site
http://developer.yahoo.com/performance/rules.html
Ótima dica :D
Avatar do usuário
Por acesbrasil
Mensagens
#4699
maxno escreveu:bom, vou fala um pouco sobre a questão da velocidade e como proceder para que o site fica mais leve

1. Intro
a Google utiliza a velocidade de carregamento das páginas para rankeamento, ou seja, site com tema mais pesado, perde o rank
2. intro
o tempo de carregamento do site pode tbm causar rejeição entre os clientes, pode ser um template bem maneiro e tal, mais o que conta sempre para o comercio eletronico são: velocidade, sites praticos e facil de mexer e localizar o conteudo e ate mesmo uma compra rapida,
veja bem, os maiores sites de vendas do brasil são americana e shoptime, com desing simples e facil, porem, rapidos



Optmizando :

1 css:
o css em si, já é uma forma de reduzir o tamanho do site, mais, pode reduzir mais o que já vem com o opencart

primeiro, sempre junta todos os css em uma só folha

copie todo css do catalog/view/javascript/jquery/thickbox/thickbox.css
e cole no final do catalog/view/theme/default/stylesheet/stylesheet.css

isso irá reduzir 2 forma, o tamanho somado dos 2 arquivo e a requisição do HTTP (quanto menos requisição HTTP o site tiver, será mais rapido a leitura dos navegadores, indepedendo do tamanho)

após isso, vamos reduzir mais um pouco o css

utilize o site http://www.cleancss.com a opção de compreção: highest, (isso reduzirá os caracteres desescessario, como as quebras de linha(enter) e comentarios)


2. Utilize CSS sprites

sprites são varias img numa só, reduzindo o tamanho tbm das img e da requisição HTTP
nao entendeu ?

um exemplo:

Imagem

utilize o site http://csssprites.com/ para geras suas sprites



3. Utilize o Gzip
gzip é como se fosse um zip ou rar, o site fica em gzip no sevidor, e quando chama, o navegador deszipa e imprime o conteudo

veja:
Imagem
Imagem

para utilizar vai em admin > sistema > configuração > sevidor e marce a opção 9

para testa e ver o quanto o site ta comprimido, utilize o site http://www.gidnetwork.com/tools/gzip-test.php



4. Utilize a livraria da google para ajax

uma solução que a google teve que ta tendo cada vez mais usuario utilizando isto

o jquery é um unico codigo em javascript, mais pq carregalo toda vez diferente pra cada site? pq cada vez que as info entra no seu navegador, as info fica gravada no cache, para abrir mais rapido a cada visita

então, a gogle disponibiliza os codigo para nos usalo,

na head.tpl
encontre:
Código: Selecionar todos
<script type="text/javascript" src="catalog/view/javascript/jquery/jquery-1.3.2.min.js"></script>
e substitua para
Código: Selecionar todos
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>



5. crie um subdomino apenas para as img

quando cria um subdomino apanas para as img, as config do site avisa o navegador, e o navegador vai ler aquele HTTP de modo diferente
vcs ja deve ter visto quando um site ta carregando e aparece carregando "img.dominio.com" e "dominio.com" ao mesmo tempo

para fazer isto, crie um subdomino no painel do seu host,

vai no arquivo do opencart, config.php e mude o link do HTTP da img

dpois copie a pasta inteira "image" do opencart para o subdomino que criou



essas são algumas dicas pra otimizar seu site, da pra fazer mais coisas pra diminuir o tamanho total do site, só da uma procurada na google

Só para lembrar que quando for alterar o config.php, são dois arquivos, um na home do OC e outro dentro da pasta Admin, este último tem duas linhas que precisam conter a mesma alteração que for realizada no config.php que está na home.

O Config.php da home é responsável pela exibição das imagens do catálogo, e o config.php que está no admin é responsável pelas imagens que serão cadastras, se as alterações não forem realizadas em ambos você estará colocando imagens em um lugar e o OC exibindo de outro.
Por cesario678
Mensagens
#9989
Amigos me ajudem estou com um problema quando vou no site http://www.cleancss.com/
e faço tudo certinho aparece a mensagem Messages

96Invalid property in CSS2.1: #banner0cyclebefore

e o codigo a seguir

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="pt-br" xml:lang="pt-br">
<head>
<title>Compre produtos com o menor preço e auto padrao de qualidad</title>
<base href="http://www.brasilsales.com/" />
<meta name="description" content="My Store" />
<link href="http://www.brasilsales.com/image/data/cart.png" rel="icon" />
<link rel="stylesheet" type="text/css" href="catalog/view/theme/bleen/stylesheet/stylesheet.css" />
<script type="text/javascript" src="catalog/view/javascript/jquery/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="catalog/view/javascript/jquery/ui/jquery-ui-1.8.9.custom.min.js"></script>
<link rel="stylesheet" type="text/css" href="catalog/view/javascript/jquery/ui/themes/ui-lightness/jquery-ui-1.8.9.custom.css" />
<script type="text/javascript" src="catalog/view/javascript/jquery/ui/external/jquery.cookie.js"></script>
<script type="text/javascript" src="catalog/view/javascript/jquery/fancybox/jquery.fancybox-1.3.4.pack.js"></script>
<link rel="stylesheet" type="text/css" href="catalog/view/javascript/jquery/fancybox/jquery.fancybox-1.3.4.css" media="screen" />
<script type="text/javascript" src="catalog/view/javascript/jquery/tabs.js"></script>
<script type="text/javascript" src="catalog/view/javascript/common.js"></script>
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="catalog/view/theme/bleen/stylesheet/ie7.css" />
<![endif]-->
<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="catalog/view/theme/default/stylesheet/ie6.css" />
<script type="text/javascript" src="catalog/view/javascript/DD_belatedPNG_0.0.8a-min.js"></script>
<script type="text/javascript">
DD_belatedPNG.fix('#logo img');
</script>
<![endif]-->
</head>
<body>
<div id="container">
<div id="firstnav">
<div class="navlinks"><a href="http://www.brasilsales.com/common/home. ... icio</a><a href="http://www.brasilsales.com/account/wishlist.htm" id="wishlist_total">Lista de Desejos (0)</a><a href="http://www.brasilsales.com/account/account.htm">Minha conta</a><a href="http://www.brasilsales.com/checkout/car ... inho</a><a href="http://www.brasilsales.com/checkout/che ... r</a></div>
<div id="welcome">
Bem-vindo visitante Voce pode <a href="http://www.brasilsales.com/account/login.htm">Logar</a> ou <a href="http://www.brasilsales.com/account/register.htm">criar uma conta</a>. </div>
</div>
<div id="header">
<div id="logo"><a href="http://www.brasilsales.com/common/home.htm"><img src="http://www.brasilsales.com/image/data/caminhao1.png" title="Brasil Sales" alt="Brasil Sales" /></a></div>
<div id="cart">
<div class="heading">
<h4>Carrinho</h4>
<a><span id="cart_total">0 item(s) - R$ 0,00</span></a></div>
<div class="content"></div>
</div>
<div id="search">
<div class="button-search"></div>
<input type="text" name="filter_name" value="Ache oque voce esta procurando Aqui" onclick="this.value = '';" onkeydown="this.style.color = '#000000';" />
</div>
<div class="subsrc">
<form action="http://www.brasilsales.com/common/home.htm" method="post" enctype="multipart/form-data">
<div id="language">Linguagem &nbsp;<img src="image/flags/br.png" alt="Português (BR)" title="Português (BR)" onclick="$('input[name=\'language_code\']').attr('value', 'pt-br').submit(); $(this).parent().parent().submit();" />
<input type="hidden" name="language_code" value="" />
<input type="hidden" name="redirect" value="http://www.brasilsales.com/common/home.htm" />
</div>
</form>
</div>
</div>
<div id="menu">
<ul>
<li><a href="http://www.brasilsales.com/video-games.htm">Video Games</a>
</li>
</ul>
</div>
<div id="notification"></div>
<div id="column-left">
<div class="box">
<div class="box-heading">Categorias</div>
<div class="box-content">
<div class="box-category">
<ul>
<li>
<a href="http://www.brasilsales.com/video-games.htm">Video Games (1)</a>
</li>
</ul>
</div>
</div>
</div>
<div class="box">
<div class="box-heading"><img src="catalog/view/theme/default/image/userconect.png" alt="" />Siga o Brasil Sales</div>
<div class="box-content" style="text-align: center;">
<a href="http://www.facebook.com/sdfsd" target="_blank"> <img src="catalog/view/theme/default/image/logo_facebook.jpg" alt="" /> </a>
<a href="http://www.twitter.com/dsfsd" target="_blank"> <img src="catalog/view/theme/default/image/logo_twitter.jpg" alt="" /> </a>
</div>
</div>
</div>
<div id="column-right">
<div id="banner0" class="banner">
<div><a href="http://www.brasilsales.com/affiliate/login.htm"><img src="http://www.brasilsales.com/image/cache/ ... 70x300.jpg" alt="Afiliado" title="Afiliado" /></a></div>
</div>
<script type="text/javascript" src="catalog/view/javascript/jquery/jquery.cycle.js"></script>
<script type="text/javascript"><!--
var banner = function() {
#banner0cyclebefore:function(current, next) { $(next).parent().height($(next).outerHeight());e nao estou conseguindo melhorar a velocidade do meu site porfavor me ajudem meu site é o http://www.brasilsales.com e nao tem produtos mais logo de cara da para ver uma demora no carregamento.

e outra coisa eu posso usar esse css spriter para colocar fotos do meu produto no opencart ?

to no aguardo
Avatar do usuário
Por Manoel Vidal
Mensagens
#10108
- Neste caso é algum problema com o arquivo css de seu tema, mas não consegui identificar bem qual seria, fiz um teste na loja demo da comunidade e tive o seguinte resultado.
36
Invalid property in CSS2.1: varga
Invalid property in CSS2.1: gatype
Invalid property in CSS2.1: gaasync
37
Optimised number: Changed "+" to "0"
Invalid property in CSS2.1: gasrc
38
Invalid property in CSS2.1: vars
- Você não pode utilizar css spriter para colocar imagens de produtos em sua loja, pois o OpenCart não tem suporte a isso fora o fato que se tratando de imagens para produtos o recurso não ajudaria pois ficaria muito pesado várias fotos juntas.

Espero ter ajudado :D

Ola @felipesujf Se você extrai os arquiv[…]

extensção -> Módulos

Voltou ao normal sozinho

Olá Uso o OpenCart 2 e tenho algumas d&uac[…]

Night games. One night, no worries Real Women P[…]