Arquivos Externos em Sites: Imagens, CSS e JavaScript - Análise Detalhada

Muitos sites usam arquivos externos, como; arquivos de imagem, CSS e JavaScript. Estes tendem a estar localizados em domínios de terceiros. Isso pode ser útil, pois fornecem soluções prontas que se encaixam no seu site.

CSS significa Cascading Style Sheets. CSS é usado para estilizar páginas HTML. Ele fornece apelo visual à página web.

Com CSS, você pode:

Determinar a localização dos elementos na página;
Indicar a distância entre elementos;
Definir o tipo, cor e tamanho da fonte;
Definir cores de fundo e adicionar imagens de fundo.

A maneira mais comum de implementar CSS é usando uma folha de estilo .css externa. O link para o arquivo é colocado na seção <head> da página.

Além disso, arquivos CSS separados são frequentemente usados para diferentes tipos de páginas.

Um exemplo de arquivos CSS externos no código HTML da página:

Exemplo de arquivos CSS externos no código HTML da página

JavaScript ajuda a tornar a página interativa e funcional. Usar JavaScript permite ao webmaster tornar a página dinâmica para o usuário, significando que os elementos podem ser atualizados quando um usuário completa uma ação. JavaScript pode ser usado para criar:

Formulários de feedback pop-up,
Efeitos de animação,
Mapas interativos,
Cestas em lojas online,
Sites com conteúdo frequentemente atualizado (relatórios meteorológicos, taxas de câmbio),
E também carregar conteúdo quando a página é rolada indefinidamente, etc.

Um exemplo de um arquivo JavaScript externo no HTML da página:

Exemplo de arquivo JavaScript externo no HTML da página

Problemas associados a arquivos externos

Problemas no carregamento de imagens ou arquivos CSS podem estragar o componente visual dos recursos web, pois seus elementos podem ser exibidos incorretamente ou ausentes completamente.
Se os arquivos JavaScript falharem no carregamento, isso resultará em parte do conteúdo da página não sendo exibido adequadamente após o processamento JavaScript. O desempenho de várias funções pode ser interrompido. Por exemplo; fazer pedidos, carregar a cesta, funções de menu, etc.
Baixar fontes ou contadores JavaScript de recursos web respeitáveis é totalmente seguro. No entanto, há riscos sérios associados ao uso de arquivos externos com imagens, CSS e JS hospedados em sites menos conhecidos.
Quando um recurso de terceiros exclui um arquivo sendo usado no seu site, ele deixará de funcionar ou exibir corretamente. Um exemplo que vimos anteriormente é uma empresa que postou todas as imagens através de um recurso web externo que acelerava a velocidade de carregamento de suas imagens. Um ano depois, este recurso deixou de existir, e todas as imagens em sua loja online, blog, etc., desapareceram. Como resultado, as posições do site caíram drasticamente, e levou muito tempo para encontrar novas imagens e restaurar a posição do site no SERP.
Definir arquivos CSS ou JS externos pela fonte para redirecionar deles para outros arquivos também pode afetar negativamente a exibição e operação do seu site.
Se você não tiver acesso ao servidor hospedando os arquivos CSS e JS, você não poderá configurar sua compressão e cache e depurar erros 5XX (erros internos do servidor).
Se o site (a fonte dos arquivos externos) for hackeado, código malicioso pode aparecer neles, o que comprometerá seu site e causará uma diminuição em seus fatores de confiança. Por exemplo, se seu site aceitar dados de cartão do usuário (sem redirecioná-los para sistemas de pagamento), hackers podem injetar JavaScript que substituirá o formulário de pagamento e roubará esses dados.

Conteúdo do relatório "Arquivos externos"

O relatório mostra arquivos de imagem externos, CSS e JavaScript que estão sendo usados no seu site.

Relatório de arquivos externos mostrando arquivos de imagem externos, CSS e JavaScript

Ao destacar a caixa de seleção, você pode selecionar os tipos de arquivo a serem exibidos no relatório.
O URL do arquivo externo.
O domínio onde o arquivo sendo usado está localizado.
Tipo de arquivo externo (imagem, CSS ou JavaScript).
Páginas do seu site contendo este arquivo. A lista de páginas abre quando você clica no botão "Mostrar".

Captura de tela do relatório de arquivos externos com explicações numeradas

Recomendações

Você pode usar portais maiores para hospedar seus arquivos externos. Arquivos de fontes questionáveis devem ser transferidos e salvos no seu site.

Se você não puder optar por não usar imagens, CSS ou arquivos JS de terceiros, use os dados do relatório Labrika para rastrear seu status.

Por exemplo, se o arquivo foi redirecionado para um URL diferente, você precisa atualizar o link correspondente no código do site.

É importante monitorar imagens quebradas, JavaScript e arquivos CSS que retornam um código de resposta 404. Tal resposta indica que o arquivo solicitado não existe, então você precisa substituí-lo.

Também é vital verificar arquivos externos por código malicioso que pode roubar dados do usuário, etc.

Como corrigir o problema?

Isso lista todos os arquivos externos, como imagens, CSS e JS que estão sendo usados no seu site, de domínios externos. Isso pode dar a você uma compreensão mais clara do que arquivos de terceiros estão sendo usados no seu site.

Este relatório pode ser usado para verificar o status desses diferentes arquivos e verificar se eles ainda estão funcionando adequadamente. Se houver erros como 404 - página não encontrada, você pode então corrigir o URL, ou se código malicioso estiver sendo usado, você pode removê-lo do seu site.