Pergunta

Eu sou um novato que está criando um site de fotos vitrine leve escrito no quadro php bolo com plano RoR.i para efeitos do uso da biblioteca scriptalicious, bem como jquery para efeitos de visualização e de transição de fotos.

Como o site vai ser muito rico em fotos, que medidas de programação pode i tomar para garantir que todas as fotos e outras páginas carregam rapidamente?

Foi útil?

Solução

eu acho que você está misturando as coisas um pouco. ror mistura com php / bolo?

então, sobre o desempenho. a maioria depende de quantos usuários você acha que vai ter, que os usuários estão eo que fazem. 10 por hora ou 100 por segundo? fazer eles olham para uma imagem por muito tempo ou são rapidamente pular de uma página para outra?

aqui estão algumas dicas que não são muito técnico. nenhuma otimização de configuração do servidor, não memcached e assim por diante. começar a pensar sobre o desempenho com o senso comum - não é o santo graal

  • é o seu site / aplicação demasiado lenta? na maioria das vezes, isso não é o caso. nunca é demais a acelerar, mas muitas vezes, as pessoas se preocupam com o desempenho muito . lembre-se sempre: não é sobre ser rápido, é sobre ser rápido o suficiente . ninguém percebe alguns milissegundos extras. um aumento de velocidade de 50% é perceptível se a sua página precisa de um segundo à carga, mas em grande parte irrelevante se ele leva apenas 100ms.

  • para descobrir se o seu site é lento, referência isso. há uma série de métodos para fazer isso, um é automatizado, como ab (apache benchmark). ele simula lotes de usuários que se conectam ao seu site e lhe dá um bom resumo quanto tempo demorou para responder. o outro é: usá-lo. e não na rede local! Se você sente que é a desacelerar, em seguida, fazer alguma coisa.

  • uma vitrine foto depende fortemente das imagens. imagens são grandes. verifique se o seu servidor tem o suficiente largura de banda para entregá-los rapidamente.

  • Se você dimensionar as imagens (que é muito provável), não redimensionar a imagem em cada solicitação de página, Cache a imagem dimensionada! armazenar em cache as miniaturas também. tudo cache. processamento e entrega de um arquivo estático é muito mais barato do que constantemente fazendo todo o processamento.

  • pensar sobre a qualidade da imagem. é a entrega rápida mais importante do que alta qualidade de imagem? brincar com o tamanho imagem - melhores meios de compressão diminuir o tamanho do arquivo, menor qualidade e entrega mais rápida.

  • pensar em usabilidade . se não houver uma página de miniaturas, as pessoas têm que sequencialmente navegar através de sua biblioteca, olhando para um monte de fotos que não quer ver. se eles já ver a imagem, eles podem pular direto para aqueles que a matéria (diminuindo o uso de largura de banda e os pedidos por segundo). pensar sobre flickr: o tamanho das imagens mostradas ... eles são como selos - 500 pixels de largura, e as pessoas ainda estão felizes. se eles precisam de uma versão maior, clicar no link "todos os tamanhos" de qualquer maneira.

  • truques, truques, truques : mais cedo, quando os usuários surfou com os modos, por vezes, de baixa resolução imagens / alta compressão foram transferidos, de modo que o usuário tinha alguma coisa depois de um curto período de tempo. somente após a primeira imagem foi carregado, a versão maior startet. não é comum mais, porque hoje a maioria dos usuários têm banda larga, de modo a enviar uma imagem adicional é apenas a carga de trabalho adicional.

  • pensar em o público . é que eles vão visitar o seu site com 14.4K modem ou banda larga? eles são usados ??para sites de carregamento lento (fotógrafos provavelmente são)? verificar as suas estatísticas para saber mais sobre eles.

  • o linguagem backend script é provavelmente não o seu problema. php não é muito rápido, rubi não é muito rápido - em comparação com, digamos, C ou Java ou ocaml. estruturas são mais lentos do que, o código optimizado trabalhada à mão. depurar seu código para ver onde as peças são lentos. meu palpite? redimensionamento da imagem e acesso de banco de dados. que não vai mudar quando mudar para outro idioma ou otimizar seu código.

sobre a velocidade de websites

, há uma série de fatores envolvidos. alguns deles são:

  1. processamento de Serverside:? É a sua aplicação rápida, é o seu hardware rápido

  2. entrega: o quão rápido são os pedidos e arquivos transferidos a partir do cliente to do versa servidor e vice? (Dependendo da largura de banda)

  3. lado do cliente de renderização: o quão rápido é o seu navegador, quanto trabalho tem que ser feito

  4. haibts usuário: faça o cliente ainda precisa de velocidade? às vezes, páginas lentas não são problema, por exemplo, se eles gastam muito tempo lá sem clicando em torno. pensar sobre sites de jogos em flash:. Se você passar uma hora jogando um jogo flash, você provavelmente não vai mesmo aviso, se a página é carregada em 3 ou 5 segundos

a velocidade percebida - uma mistura de todos os quatro - é a métrica importante

.

Se você confirmou que você está realmente muito lento, certifique-se de otimizar a parte direita. otimizar os scripts do lado do servidor é inútil se o servidor é rápido o suficiente, mas a página demora muito tempo para renderizar no navegador. não há necessidade de otimizar o tempo de renderização se a sua largura de banda está entupido.

sobre otimização

desempenho é parte integrante na construção de uma aplicação. se você realmente precisa de algo rápido, você tem que planejar para a velocidade desde o início. se não for projetado para a velocidade, otimização eficaz muitas vezes não é possível.

que não é realmente verdadeiro para aplicações web o tempo todo, porque eles facilmente escalar horizontalmente, o que significa: hardware jogar nele
. todas as coisas custam dinheiro, e se o dinheiro é importante para você (ou seu chefe), não se esqueça sobre isso. Quanto duas semanas de otimizar um custo de aplicação? por exemplo, otimizar os custos de você (ou seu chefe) X € (estou europeu) em salário. agora, pensar em comprar outro servidor: que custa Y € (incluindo a configuração). se Y

aleatória buzzwords

Por último, mas não menos importante, eu vou jogar alguns chavões aleatórios (não ordenados) para você, talvez haja algo que possa ajudar. apenas o Google, que deve ajudar ...

redes de entrega de conteúdo, (Intel) SSDs, sprites (combinando imagens para guardar os pedidos), a compactação de página (gzip, deflate), memcached, a APC (cache bytecode para PHP), minifying e fusão de CSS múltiplo e arquivos JS, consciente manipulação de HTTP códigos de status (não alterado), separação de estático e conteúdo dinâmico (diferentes servidores e domínios), passo-a-passo de carregamento via AJAX (conteúdo importante em primeiro lugar), ...

Agora eu estou fora de ideias.

Editar / update

coisas / técnicas que eu esqueci:

  • implementar uma barra de progresso ou algo comparável, assim os usuários, pelo menos sentir alguma coisa está acontecendo. você não pode usar barras de progresso se trabalhar apenas com javascript, mas pelo menos mostrar algum tipo de ampulheta ou relógio animado. se você usar o flash, você pode mostrar uma barra de progresso real.

  • Você pode pular recarrega a página completa, trabalhando com AJAX ou Flash - basta carregar os dados que você precisa. muitas vezes você vê este implementado em galerias de imagens Flash. basta carregar a imagem e descrição.

  • pré-carregamento:. Se os usuários olhar para uma imagem para um período prolongado de tempo, você já pode começar a carregar a próxima imagem, por isso do navegador em cache se o usuário continua

aviso

desempenho eu nunca implementado aplicativos críticos (com 2 excepções), de modo a maioria do que eu escrevi acima é especulação e a experiência dos outros. hoje você ler histórias sobre startups bem sucedido e como lidaram (performance-wise) com indo de 100 para um usuário bazillion um dia, e como eles usaram truques bacanas para resolver todos esses problemas o tempo todo.
mas é isso que vai acontecer com você? provavelmente não. Todo mundo fala sobre isso, quase ninguém realmente precisa (mas eu admito, ainda é bom saber) .

minha experiência no mundo real (sim, eu gosto de escrever respostas longas):

Uma vez eu fiz partes de um website com vários milhares de visitantes únicos por dia, alimentado por uma cms (TYPO3) e execução em um único samp-servidor dedicado (pense utilizado, década servidores Solaris velhos, não ghz !). você poderia procurar por apartamentos, eo formulário lhe disse quantos resultados você vai ter (por exemplo 20-40m²: 400 hits, 30-60m²: 600 hits) por reloading um iframe ON-CLICK . que era muito, muito lento (mas os usuários ainda usei). constantemente 100% de carga. era o meu trabalho para resolver esse problema.
o que eu fiz? primeiro, descobrir por que era tão lento. meu primeiro palpite estava certo, o pedido on-click também typo3 utilizado (w / o caching, é claro). substituindo esta ação única com um script personalizado que apenas consultado o banco de dados diretamente, ignorando typo3, o problema foi resolvido. carga desceu para quase nada. me levou cerca de 2 horas.

O outro projeto tinha cerca de 1500 visitantes únicos por dia, exibindo serverd dados por um banco de dados oracle com milhões de linhas e complicado junta que tomou para sempre (= vários segundos) para ser executado. Eu não tinha muita experiência em otimização de oráculo, mas eu sabia: o banco de dados foi atualizado apenas uma vez ou duas vezes por semana. minha solução: i apenas em cache o conteúdo por escrever o html para o sistema de arquivos. após a atualização (no meio da noite) i limpou o cache e começou a reconstruí-lo. por isso, em vez de consultas caras eu tinha apenas barato sistema de arquivos lê. problema resolvido.

ambos os exemplos me ensinou que o desempenho em developement web é não ciência do foguete. na maioria das vezes a solução é simples. e: há outras partes que são muito mais importante 99% do tempo:. custo desenvolvedor e segurança

Outras dicas

A questão é muito vago. A maior parte do tempo gasto recebendo uma página é geralmente recebendo conteúdo estático. Aqui estão algumas regras de ouro para acelerar os tempos de carga independentes da linguagem ou framework:

  1. Instale o YSlow plug-in para firefox
  2. usar o CSS Sprites
  3. Tenha um servidor peso http luz para conteúdo estático, nginx ou lighttpd
  4. fornecer conteúdo estático em um domínio de domínio ou sub diferente, isso permite mais simultânea http solicitações
  5. Minify JavaScript e CSS
  6. páginas de cache, tanto quanto você pode
  7. Mantenha o número de solicitações HTTP baixo
  8. pngcrush ou jpegtran em suas imagens

Naturalmente, esta é apenas a ponta do iceberg. Estes são bons primeiros passos.

Reduzir número de bibliotecas, você tem certeza que deseja usar jquery + scriptalicious. Vara para coisas simples, não olhe para animações complexas.

carregamento rápido => Cache, páginas com fotos são bons candidatos para cache.

Se o que você está preocupado é sobre o sentimento de velocidade do usuário, você pode querer para pré-carregar imagens no fundo, em antecipação às ações do usuário, mas acho que isso pode aumentar a sua carga do servidor. Faça isso apenas se tiver boa largura de banda contratada.

Se você é capaz de produzir um polegar primeira página que é bastante estática, digamos muda duas vezes por dia, você pode usar a técnica de sprite para reduzir a latência de carregamento muitos polegares, consulte:

http://websitetips.com/articles/css/sprites/

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top