사이트의 가장 중요한 측면 중 하나는 로딩 속도입니다. 사용자는 브레이크 없이 즉시 사진을 받고 싶어하며, 이를 제공할 수 없으면 다른 곳에서 정보를 찾기 위해 오랫동안 주저하지 않을 것입니다. 이 기사에서는 웹사이트 로딩 시간을 단축할 수 있는 5가지 방법에 대해 설명합니다.
1. YSlow를 사용하여 페이지 로드 시간 추적
페이지를 로드하는 데 걸리는 시간을 알면 문제 영역을 식별할 수 있습니다. 또한 기능을 사용하여 상황을 수정하려는 또 다른 인센티브를 제공합니다.
시작하기 전에 YSlow를 아직 설치하지 않았다면 설치해야 합니다. YSlow는 모질라 파이어 폭스이 페이지에서 찾을 수 있습니다:
이제 사이트를 열어보자. 거의 동일한 데이터가 있다고 가정해 보겠습니다(브라우저의 새 탭에서 이 사이트를 열면 됨).
브라우저의 오른쪽 하단에는 아이콘이 있는 특수 패널이 있습니다(그림 1 참조). 이 패널에서 조금 더 멀리 페이지가 로드된 후 'YSlow' 옆에 숫자가 표시됩니다. 이 숫자는 이 페이지가 브라우저에 로드되는 시간(초)입니다. 우리는 이 숫자를 가능한 작게 하기를 원합니다.
가장 일반적인 "브레이크"는 다음 개체 또는 작업입니다.
- 너무 많은 HTTP 요청
- 압축되지 않은 JavaScript 파일
- 그래픽 파일에 대한 헤더 만료 시간 없음
몇 분 안에 이에 대해 자세히 살펴보겠습니다.
이 시스템에 익숙해지려면 여러 사이트를 방문하여 로딩 시간을 확인하십시오. Google, Facebook 및 가장 자주 방문하는 몇 가지 즐겨찾는 블로그/웹사이트를 테스트할 수 있습니다. JavaScript 파일과 이미지는 속도에 가장 큰 영향을 미치는 파일입니다.
우리는 YSlow를 최대한 사용합니다.
페이지 로드 시간을 계산하는 YSlow 외에도 주어진 확장또한 구멍을 패치할 수 있도록 사이트 로딩을 최적화하기 위해 수정해야 할 사항에 대한 광범위한 정보를 제공합니다.
이러한 정보를 보려면 성능 탭을 클릭하십시오. 사이트를 크롤링한 후 YSlow는 페이지 성능을 특징짓는 전체 점수를 제공합니다.
CDN(콘텐츠 전달 네트워크)을 사용하여 정보에 대한 액세스를 가속화할 수 있습니다. CDN은 대규모 사이트에 가장 적합합니다. 여러 서버에 정보를 배포하는 데 사용됩니다. 다른 부분들평화. 이렇게 하면 개인 라우터를 거치지 않도록 적절한 서버(사용자와 가장 가까운 서버)에서 정보가 다운로드됩니다. YSlow는 CDN 요청도 추적합니다.
그러나 사람들은 일반적으로 CDN을 사용하지 않습니다(매우 비쌉니다).
오류 유형 분류
이제 위에서 언급한 확장에 있는 각 항목을 살펴보겠습니다. 아래에서 귀하의 페이지를 평가하는 방법과 최대 성능을 달성하기 위해 문제를 처리하는 방법에 대한 요약을 찾을 수 있습니다.
가능한 한 적은 수의 HTTP 요청 만들기: 브라우저가 서버에 요청을 보낼 때 HTTP 요청이 발생합니다. 클라이언트 측과 서버 측(Ajax 및 기타 유사한 기술)에서 스크립트, CSS 파일, 이미지 및 비동기 요청을 연결할 때도 동일한 일이 발생할 수 있습니다. 그러나 시스템 성능과 관련하여 유사한 요청페이지에서 발생합니다. 한 가지 솔루션은 캐싱을 사용하여 클라이언트 시스템이 스크립트, CSS 및 이미지를 더 빠르게 로드할 수 있도록 하는 것입니다.
Expires 헤더 추가: 페이지 로드의 80%가 스크립트, 사진 및 CSS 파일 다운로드에 집중됩니다. 대부분의 경우 이러한 사항은 사용자 컴퓨터에서 변경되지 않습니다. .htaccess 파일에 코드를 추가하면 사용자의 로컬 컴퓨터에 중복 파일을 캐시할 수 있습니다(이 작업을 수행하는 방법은 나중에 설명하겠습니다).
Gzip 구성 요소: Gzip을 적용하거나 JS 파일, 이미지, HTML 문서, CSS 파일 등 사용자가 축소된 크기로 정보를 다운로드할 수 있으므로 페이지 로딩 속도가 크게 빨라집니다. 또한 이렇게 하면 서버의 공간이 절약되지만 데이터 압축을 풀면 응답 속도가 느려질 수 있으며 사용자의 브라우저에 직접적으로 의존합니다.
페이지 상단에 CSS 배치: CSS 연결을 페이지 상단에 배치하면 먼저 로드되고 이미지와 스크립트는 나중에 로드됨을 의미합니다.
페이지 하단에 JS 배치: 이제 CSS 파일이 상단에서 로드되므로 닫는 태그 바로 앞에 JS 스크립트를 배치할 차례입니다. 이렇게 하면 페이지를 렌더링한 다음 필요한 스크립트를 포함할 수 있습니다.
CSS 표현 피하기: 개인적으로 CSS 표현(동적 속성이라고도 함)을 사용한 적이 없습니다. 이러한 표현식은 CSS의 기본 IE 프로그래밍 개념(예: 조건부 표현식)입니다. IE8 및 다른 모든 버전에서 사용되는 기술은 더 이상 지원되지 않으므로 어떤 경우에도 이 CSS 표현식 작성과 연결해야 합니다. PHP는 예를 들어 임의의 숫자, 시간 또는 사용자의 브라우저와 같은 일부 조건에 따라 다른 CSS 스타일을 로드하는 등의 목적에 더 적합합니다.
JS와 CSS를 별도의 파일에 작성: 스크립트를 JS에 넣고 CSS 스타일브라우저는 별도의 파일에 파일을 쉽게 캐시할 수 있으므로 향후 페이지를 더 빠르게 로드할 수 있습니다.
DNS 조회 시간 단축: 사용자가 브라우저 표시줄에 사이트 이름을 입력하면 사이트가 위치한 IP 주소의 DNS 조회가 즉시 시작됩니다. 사이트에 포함된 외부 소스가 많을수록 DNS 조회에 더 많은 시간이 소요됩니다. 일반적으로 이러한 검색 중 하나는 60-100밀리초 동안 지속됩니다.
JS 축소: gzip으로 압축하는 것 외에도 JavaScript 파일을 축소하면 불필요한 공백, 탭 및 큰 파일 크기를 추가하는 기타 특수 문자를 제거하여 스크립트를 가볍게 할 수 있습니다. 파일이 작을수록 페이지 로드 속도가 빨라집니다. JSMIN 도구를 사용하여 JavaScript 파일을 축소할 수 있습니다.
리디렉션 방지: JS, HTML 또는 PHP에서 리디렉션을 수행하는 위치는 중요하지 않습니다. 어느 쪽이든 브라우저는 로드하는 데 시간이 걸리는 빈 페이지 헤더를 수신합니다. 따라서 피할 수 있는 리디렉션을 사용하지 마십시오.
중복 스크립트 로드 방지: 브라우저가 스크립트를 두 번 이상 로드하면 페이지 로드에 상당한 영향을 미칩니다. 여기서 수학은 어렵지 않습니다. 같은 파일을 많이 다운로드할수록 더 긴 로딩페이지. 스크립트를 검토하고 jQuery를 2~3번 호출하지 않는지 확인하십시오. JS 스크립트에도 동일하게 적용됩니다.
글쎄요... 충분하다고 생각합니다. 이제 페이지 로딩 속도를 높이는 다른 기술을 살펴보기 전에 YSlow의 다음 탭으로 이동해 보겠습니다.
구성 요소 탭에서는 다운로드 속도를 향상시키기 위해 얼마나 많은 노력을 기울여야 하는지 결정할 수 있습니다. 여기에서 각 파일의 무게와 다운로드하는 데 걸리는 시간에 대한 정보를 찾을 수 있습니다. 또한 어떤 파일이 gzip으로 압축되고 있는지, 응답 시간, 파일이 사용자 컴퓨터에 캐시되었는지 여부, 캐시 자체가 종료되는 시간을 확인할 수 있습니다. 이 정보는 사이트의 문제를 평가할 때 유용할 수 있으며, 무엇이 문제인지, 최적화해야 하는 부분을 알게 됩니다.
그리고 마지막으로 다음으로 넘어가겠습니다. 마지막 탭통계 탭. 여기에서 일반 파일과 캐시된 파일에 대한 모든 HTTP 요청에 대한 정보를 찾을 수 있습니다. 빈 캐시 값은 페이지를 렌더링하기 위해 이러한 파일을 로드해야 함을 나타냅니다. 차례로 Primed Cache는 사용자의 브라우저에서 이미 캐시된 파일입니다. 즉, 다운로드할 필요가 없습니다.
2. CSS 스프라이트를 사용하여 HTTP 요청 줄이기
CSS 스프라이트는 아마도 Tesla가 전기를 발명한 이후로 인류가 생각해 낸 가장 중요한 것입니다. 실제로 그렇게 말했습니다.
글쎄, 아마도 가장 멋진 것은 아니지만 여전히.
CSS 스프라이트는 이미지 다운로드에 대한 HTTP 요청 수를 줄여 페이지 로딩 속도를 크게 향상시키는 데 도움이 될 수 있습니다.
CSS 스프라이트가 일반적으로 사용자 인터페이스에서 사용하는 방법에 대해 설명하는 많은 자습서를 찾을 수 있습니다.
이제 YouTube에서 CSS 스프라이트를 사용하는 방법을 간단히 살펴보겠습니다. 그들이 사용하는 스프라이트는 다음과 같습니다.
YouTube는 이 파일을 다소 독창적인 방식으로 사용합니다. 스프라이트 클래스의 배경으로 로드합니다. 요소를 선택해야 할 때 초기 위치가 선택됩니다. CSS 도움말 background-position 속성을 선택한 다음 높이와 너비를 적용합니다.
비슷한 것을 시도해 봅시다. YouTube에서 동일한 이미지를 실험해 보겠습니다.
아래 예에서는 화면에 YouTube 로고를 표시하고 있습니다. 동일한 스프라이트 클래스와 동일한 이미지를 사용하여 마우스 오버 시 변경되는 이미지를 만들 수 있습니다.
따라서 이 이미지를 사용하여 단일 HTTP 요청에 대한 모든 연결을 줄일 수 있습니다. 글쎄, 효과는 무엇입니까?
또 다른 장점 CSS 스프라이트:hover 의사 클래스를 적용할 때 이미지가 잠시 동안 사라지지 않을 것입니다. CSS 사용스프라이트.
3. 처음에는 CSS 파일을 로드하고 끝에는 JavaScript를 로드합니다.
일부 사이트의 경우 HTTP 요청 수를 줄이면 기능이 중단될 수 있습니다. 페이지 로딩 속도를 높이는 또 다른 방법은 모든 JavaScript 파일 연결을 문서 끝에 넣는 것입니다.
또한 주목할 가치가 있습니다.
- body 태그 시작 직전 섹션에 CSS 파일을 로드합니다.
- 닫는 본문 태그 바로 앞에 JavaScript를 포함하십시오.
우리의 조언을 따르면 JavaScript가 백그라운드에서 로드되는 동안 사용자가 사이트를 감상할 수 있습니다.
참고: 이동을 원하지 않는 경우 자바스크립트 태그, 기능이 떨어질까 두렵기 때문에 defer 속성을 사용하는 것이 좋습니다. 다음과 같이 적용하십시오.
4. Используйте поддомены для параллельного скачивания
Параллельная загрузка означает увеличение параллельных загрузок одних и тех же файлов. Пройдясь по множеству сайтов, вы можете заметить, что на многих из них запросы посылаются на static.domain.com и c1.domain.com. Это можно увидеть в нижней панели браузера.
Это отличный способ увеличить производительность сайта. При использовании поддоменов, по сути, информация будет находиться на одном и том же сервере, однако для браузера они будут разными.
Настройка процесса:
- Создайте 3 поддомена на вашем сервере
- Расположите ваши изображения в папках на разных поддоменах
- Замените пути в ваших файлах
5. Добавление заголовков Expires
Некоторые сайты остаются нагруженными даже после применения всех методов, описанных выше. Но есть ещё пару методов.
Пользователь может зайти на ваш сайт и совершить все необходимые HTTP запросы для отображения страницы, изображений, скриптов и т.д.
Когда вы используете заголовки Expires, вы можете закэшировать все эти элементы на пользовательской машине, тем самым не только увеличив скорость загрузки страницы, а ещё и сократив трафик. Заголовки Expires могут быть применены ко всем вашим скриптам, CSS и изображениям.
Данного эффекта можно добиться посредством нескольких строк, которые вам нужно добавить в файл.htaccess, который находится в корневом каталоге вашего сайта.
Следующий пример.htaccess файла устанавливает заголовки expires на какое-то число в 2010 году для таких типов файлов как.ico, .pfd, .flv (файлы Flash), .jpg, .png, etc.
Будьте бдительны: если вы произведёте какое-либо изменение в данных файлах (в случае, если срок ещё не прошёл), то вам необходимо переименовать их (или добавить в название версию), иначе в кэше они не обновятся.
К примеру, если у вас есть файл JavaScript, в котором вы что-то изменили, просто добавьте в название номер версии (что-то типа javascriptfile-1.0.js, javascriptfile-1.1.js и т.д.)
Вывод
Сегодня мы прошлись по многим способам. Надеюсь, вы отметили для себя несколько методов, которые будете активно применять в ваших проектах! Удачи!
Иногда при работе с Почтой перестают работать кнопки, не прикрепляется вложение или браузер сообщает об ошибке.
Выберите проблему:
Иероглифы или непонятные символы появляются из-за неправильной кодировки страницы. Кодировку могут изменить вирусы или вредоносные программы.
CureIt! от Dr.Web и Virus Removal Tool
Если страница не загружается или загружается очень долго, вы видите сообщения:
«Произошла ошибка» .
«Попробуйте обновить вкладку браузера или повторите попытку через несколько минут» .
«Подождите, пожалуйста...» .
«Попробуйте обновить страницу или воспользуйтесь лёгкой версией Почты» .
Почему страница не загружается и как это исправить:
Расширения блокируют Яндекс.Почту Вы используете устаревший браузер
Устаревший браузер может не поддерживать технологии, которые используются для быстрой и удобной загрузки страниц. Установите последнюю версию вашего браузера .
Закройте в браузере все вкладки, кроме Почты. Отключите приложения, использующие\\n интернет, и перезагрузите страницу.
\\n \\n \\n \\n Возникла проблема с сетевым подключением \\n \\n
Чтобы это проверить, зайдите в Почту через мобильный интернет. Если ошибки не\\n возникают, обратитесь в службу поддержки вашего провайдера. Если вы пользуетесь\\n рабочей почтой, сообщите о проблеме своему системному администратору.
\\n \\n \\n \\n В Internet Explorer 8 и выше выбран не тот режим совместимости \\n \\n
Если в браузере Internet Explorer 8 и выше вы используете режим совместимости с\\n более старой версией, это может приводить к ошибкам.
Режим\\n документов
\\n \\n \\n \\n \\n\\n "}]}}\">
Снизилась скорость интернета
Закройте в браузере все вкладки, кроме Почты. Отключите приложения, использующие интернет, и перезагрузите страницу.
Возникла проблема с сетевым подключением
Чтобы это проверить, зайдите в Почту через мобильный интернет. Если ошибки не возникают, обратитесь в службу поддержки вашего провайдера. Если вы пользуетесь рабочей почтой, сообщите о проблеме своему системному администратору.
В Internet Explorer 8 и выше выбран не тот режим совместимости
Если в браузере Internet Explorer 8 и выше вы используете режим совместимости с более старой версией, это может приводить к ошибкам.
Установите параметры Режим браузера и Режим документов в соответствии с версией вашего браузера.
Сообщение об ошибке сертификата безопасности начинается с фразы:
«Ваше подключение не защищено» .
«Сайт угрожает безопасности вашего компьютера» .
«Ошибочный сертификат» .
«Ошибка в сертификате безопасности» .
«Это соединение является недоверенным» .
Почему появляются ошибки сертификата безопасности и как их исправить:
Ошибки ненадежного соединения или некорректного сертификата безопасности могут возникнуть из-за конфликта между настройками браузера и компьютера. Также ошибки может вызвать работа антивируса. Чтобы понять причину ошибки сертификата, найдите ее код в конце сообщения.
Код ошибки | Решение |
---|---|
| / |
| дата и время . Если они настроены неправильно, система ошибочно определяет, что срок сертификата еще не наступил или уже закончился. |
| Убедитесь, что в настройках вашего антивируса отключена проверка HTTPS-соединений. О том, как это сделать в Kaspersky Internet Security и в ESET NOD32 Smart Security, см. под таблицей. Если на вашем компьютере нет антивирусной программы, злоумышленники могли подменить сертификат безопасности при помощи вредоносного кода или атаки MITM . Проверьте ваш компьютер на вирусы с помощью бесплатных антивирусных программ: CureIt! от Dr.Web и Virus Removal Tool от «Лаборатории Касперского». |
Код ошибки | Решение |
---|---|
| Проверьте, что в адресную строку браузера введен правильный адрес - mail.yandex.ua или passport.yandex.ua , а после ua стоит символ / , а не точка или другой символ. |
| Убедитесь, что на компьютере корректно установлены |
При создании клиентоориентированного сайта вам необходимо учесть и продумать множество вещей, начиная от творческих (дизайн, наполнение) и заканчивая техническими (верстка, размещение в сети Интернет). Для клиентов важна каждая мелочь, поэтому важно смотреть не только на внешнюю сторону вашего проекта - то, что увидит пользователь - но и на внутреннюю, а именно, как быстро пользователь это увидит. Исследования показывают, что примерно половина пользователей ожидает, что сайт загрузиться менее чем за две секунды, а 40% пользователей закроют сайт, если на его загрузку уйдет более трех секунд. Поэтому крайне важно, чтобы ваш сайт загружался быстро, иначе вы рискуете потерять значительную часть своих клиентов. Что же вы можете сделать, чтобы уменьшить время загрузки вашего сайта?
1. Сократите код
Чем объемнее код вашего проекта, тем больше он весит, а значит, тем большее время требуется для его загрузки. Поэтому в первую очередь вам нужно убедиться, что код оптимизирован. Особенно это касается первой, посадочной страницы, на которую попадает пользователь - будет лучше отказаться от тяжелых скриптов JavaScript и Ajax либо убрать их в нижнюю часть страницы. Придерживайтесь известного принципа KISS - Keep it short and simple - пусть код будет коротким и простым.
Сервис PageSpeed Insights от Google советует убрать внешний файл JavaScript из верхней части страницы, так как цикл операций, который требуется выполнить для его загрузки, значительно тормозит загрузку страницы. В этом случае рекомендуется либо сделать код JavaScript встроенным, либо загружать этот код после загрузки верхней части страницы.
Если вы хотите узнать, все ли в порядке с JavaScript на странице вашего сайта, воспользуйтесь этим сервисом: https://varvy.com/tools/js/
Этот совет также касается HTML и CSS-кода. Как и в случае с JavaScript, особое внимание уделите внешним файлам - к примеру, внешним таблицам стилей, которые по возможности лучше вставить в HTML.
2. Используйте компрессию сайта
Существует несколько технологий, при помощи которых вы можете сжать данные, благодаря чему можно уменьшить размер текстовых ресурсов, а значит, и время загрузки страниц вашего ресурса. К примеру, воспользуйтесь gzip: эта утилита минимизирует запросы к серверу со стороны браузера. Воспользоваться ею можно в протоколе HTTP.
Проверить, используется ли на вашем сайте gzip для сжатия данных, можно на этом ресурсе: http://www.gidnetwork.com/tools/gzip-test.php
А пройдя по следующей ссылке, вы сможете выяснить, применяется ли в целом какая-либо технология сжатия на вашем сайте: http://www.whatsmyip.org/http-compression-test/
3. Сократите количество переадресаций
Переадресация 301 часто используется для того, чтобы провести перенаправление с одного адреса на другой. Однако это чревато тем, что будут задействованы дополнительные сетевые циклы, из-за которых время загрузки сайта может увеличиваться, особенно если речь идет о мобильных устройствах. Поэтому лучше уменьшить количество переадресаций или вообще отказаться от них.
Проверить свой сайт на наличие переадресаций вы можете при помощи этой программы (есть бесплатная версия): https://www.screamingfrog.co.uk/seo-spider/
4. Уменьшите число плагинов
Данный пункт касается тех, кто пользуется CMS: Wordpress, Joomla или какой-либо другой. Регулярно проверяйте список плагинов, которые вы используете, на предмет ненужных или уже неиспользуемых. Уменьшение количества плагинов положительно скажется на загрузке вашего сайта и его работе в целом. Если вы используете Wordpress в качестве системы управления контентом, то оптимизировать число плагинов вы также можете при помощи специального плагина P3 (Plugin Performance Profiler): https://wordpress.org/plugins/p3-profiler/ Этот плагин покажет вам данные, касающиеся производительности других плагинов, и того, как каждый из них влияет на работу сайта. Это поможет вам определить, от каких плагинов следует отказаться в первую очередь.
5. Оптимизируйте изображения
Размер картинок на сайте напрямую влияет на время загрузки ресурса. Все изображения обязательно нужно оптимизировать: ставить правильный размер, формат и сжимать. Также будет полезно избавиться от так называемого цифрового мусора: различных данных, которые попадают в изображение при его обработке.
6. Пользуйтесь кэшем браузера
Используя кэширование, вы можете значительно выиграть в скорости загрузки вашего сайта: когда пользователь первый раз заходит на ваш сайт, в кэше его браузера сохранятся некоторые JavaScript и CSS-файлы, которые затем будут автоматически показываться при его следующих визитах, а браузеру не придется тратить время на их загрузку. Для кэширования необходимо правильно настроить HTTP-заголовок Expires. Вы можете сделать это, прописав в файле.htaccess, который находится в корневой папке, следующие строки:
В данном случае у всех типов установлен срок в 1 месяц, но вы можете изменить время на то, которое вам нужно: кэш может храниться определенное количество лет (years), месяцев (months), недель (weeks) или дней (days).
Если вы пользуетесь какой-то определенной CMS, то можете установить для этого специальный плагин. В случае с Wordpress подойдет W3 Total Cache: кэширование включается в настройках (выберите Settings у данного плагина в списке всех установленных плагинов, затем General - поставьте галочку у “Toggle all caching types on or off (at once)”).
7. Следите за производительностью сайта
Очень важно постоянно мониторить производительность вашего сайта - даже тогда, когда, как вам кажется, вы оптимизировали все, что было можно. Для этого существуют специальные бесплатные ресурсы, самые известные из которых будут перечислены ниже:
- уже упомянутый выше Page Speed Insights:
https://developers.google.com/speed/pagespeed/insights/?hl=ru
Этот инструмент от Google замеряет скорость загрузки вашего веб-ресурса (от 0 до 100 баллов; чем выше балл, тем лучше). Сервис даст вам рекомендации по улучшению производительности, а также покажет, какие пункты оптимизации вы выполнили. Имейте в виду, что так как в Page Speed Insights вносятся правки и корректировки, то количество баллов, которые получил ваш сайт, также может меняться. - Pingdom Website Speed Test:
http://tools.pingdom.com/fpt/
Хороший англоязычный сервис для проверки скорости загрузки вашего ресурса. Будет особенно полезен тем, кто администрирует международные ресурсы, так как позволяет выбрать место, из которого будет производиться тестирование: США, Австралия или Швеция (результат будет отличаться). Выводит множество разных данных и дает рекомендации. - Loadimpact:
https://loadimpact.com/
Этот сервис позволяет сгенерировать несколько запросов на ваш сайт, путем чего можно выяснить, во-первых, среднюю скорость загрузки вашего сайта, во-вторых, понять, как ваш сайт поведет себя при определенном количестве запросов (выдержит ли он нагрузку). - LoadStorm:
http://loadstorm.com/
При помощи этого сервиса вы можете запустить достаточно серьезное тестирование своего сайта. Бесплатная версия сервиса позволит вам протестировать свой ресурс при помощи 10 пользователей, а вот платная версия дает больше возможностей, в частности вы сможете самостоятельно прописать сценарий, который будут выполнять пользователи (к примеру, нажать на определенную кнопку или перейти в нужный раздел). При этом вы обязаны верифицировать то, что являетесь владельцем сайта.
Заключение
Если вы выполните каждый из предложенных в этой статье пунктов, вы сможете значительно уменьшить время загрузки вашего сайта. Но при этом не забывайте, что оптимизация должна происходит не во вред пользователям: картинки должны оставаться привлекательными, навигация удобной, а информация понятной и доступной.
Делитесь в комментариях своими идеями, как можно ускорить загрузку веб-ресурса.
В Google Chrome, аналогично с иными браузерами ОС Windows, существует проблема, которая связана с тем, что после загрузки страницы на компьютере сохраняются некоторые скачанные файлы.
Со временем они начинают занимать слишком много места на жестком диске.
Производить отчистку куки нужно регулярно, несмотря на то, что все может быть в порядке. Сама процедура не занимает много времени, ведь в Гугл Хроме её осуществить очень просто.
Что это такое
Перед тем, как почистить кэш в Google Chrome на ОС Windows стоит разобрать, что он вообще собой представляют. Сам термин, кеш был взят из английского слова cashe. Оно обозначает тайник или место хранения. Также его часто называют «куки» из-за того, что это текстовые данные сайта, хранящийся на компьютере пользователя. Если отбросить технические детали, можно сказать, что такие своеобразные хранилища информации позволяют обеспечить быстрое открытие и отображение тех сайтов, на которых пользователь ранее уже заходил через хром.
По большому счету, такие хранилища являются прекрасным вариантом, позволяющим экономить ваш интернет-трафик. Так, например, после того, как вы посмотрели какой-либо ролик на определенном сайте, при повторном его просмотре не будет нужды еще раз его полностью загружать из сети. Дело в том, что алгоритмы браузера автоматически создают копию того видео и размещают его в память компьютера, создавая тем самым куки и кэш. Это также обеспечивает более оперативную загрузку.
Однако в этом случае есть и свои негативные стороны. К примеру:
- Если в сайт были внесены изменения, после того, как его посещали с браузера и информация о нем сохранилась в куки, далеко не всего он будет отображаться в новом виде. Причиной является то, что в памяти уже находится образ старой версии вебсайта, который загрузили алгоритмы браузера и он может быть отображен пользователю. Чтобы этого избежать, нужно своевременно почистить хранилища информации;
- Еще одной негативной стороной является то, что такая информация, если её долгое время не чистить, будет занимать очень большое количество места на жестком диске, уменьшая его свободное пространство.
Как проводить очистку
Сама процедура является максимально простой. Прежде всего нужно запустить сам браузер через систему Windows. Теперь необходимо нажать сочетание клавиш Shift + Ctrl + Delete. Это является наиболее быстрым способом открыть куки браузера. Это можно сделать и иным путем. Для этого нужно найти в хроме кнопку входа в меню (она в последних версиях обозначается тремя точками, расположенные в столбик), она называется «Настройка и управление» и нажать.
В появившемся контекстном меню необходимо выбрать пункт «Настройки», после чего откроется вкладка со всеми доступными к изменениям параметрами. Опускаемся в самый низ страницы, где находится кнопка «Показать дополнительные настройки» и нажимаем её. Находим там раздел «личные данные», где будет нужно нажать на кнопку «Очистить историю».
Далее появиться окно, где можно будет почистить кроме необходимых хранилищ файлов, сохраненные данные истории загрузок, какие сайты посещались, а также информацию о паролях. Чтобы выбрать, что именно будет удалено нужно поставить рядом с конкретным пунктом галочку. После этого можно будет просто нажать кнопку «Очистить историю» и подождать, пока процедура завершится.
На этом процедура очистки файловых хранилищ информации браузера гугл хром через Windows заканчивается. Однако, стоит также сказать о том, что находясь в разделе настроек «Личные данные» можно указать периодичность удаления определенного типа сохраняемых данных в гугл хром. Это позволит сделать так, чтобы удалялись не все файлы, а только устаревшие и уже не актуальные. Также, стоит сказать, что куки и кеш имеют значительные отличия:
- Первые являются своеобразными следами, остающимися после посещения сайта в виде информации, которой обмениваются вебсайты и сам хром;
- Вторые представляют собой хранилищем загруженных с разных вебсайтов видео, музыки и фотографий.
Также произвести удаление всех сохраненных файлов можно даже не заходя в хром. Для этого нужно будет открыть в Windows саму папку, где они храниться. Обычно, это можно сделать перейдя по адресу C:\Documents and Settings\Admin\Local Settings\Application Data\Google\Chrome\User Data\Default\Cache\ где «Admin» — это имя пользователя Windows.
После того, как вы соберете некоторую статистику по времени загрузки страницы и эффективной ширине канала для реальных пользователей, вы можете поэкспериментировать с изменениями, которые могут улучшить эти показатели. В случае значительных достижений в улучшении этого показателя стоит закрепить внесенные изменения.
Нижеприведенные советы частично уже фигурировали в других статьях: советы от Yahoo , объединение CSS-файлов , оптимизация времени загрузки страницы и многих других . Однако, повторение — учения, к тому же, в следующих советах есть несколько свежих моментов.
Можно попробовать следующие вещи:
Если пользователи регулярно загружают десяток или больше некеширующихся или некешируемых объектов, стоит распределить их загрузку по 4 хостам. В этом случае обычно пользователь сможет установить в 4 раза больше соединений. Без HTTP-конвейера это выльется в уменьшение потерь на пересылку запроса примерно в 4 раза.
При генерации страницы перед вами встанет задача распределения картинок по 4 разным хостам. Это легче всего сделать с помощью любой хеш-функции, например, MD5. Вместо того чтобы загружать все с одного http://static.example.com/ , создайте 4 хоста (например, static0.example.com , static1.example.com , static2.example.com , static3.example.com) и используйте 2 бита из MD5-суммы для каждой картинки, чтобы выбрать, на какой именно хост ставить ссылку на ее загрузку. Убедитесь, что все страницы используют один и тот же алгоритм соответствия (указывают на один и тот же хост для каждой картинки), иначе вы будете безрезультатно бороться против кеширования .
Стоит, однако, заметить, что добавление еще одного хоста увеличивает расходы на дополнительные DNS-поиск и установку HTTP-соединения. Если у пользователей включена конвейерная обработка запросов или страница подгружает менее десяти объектов (лично я бы рекомендовал ориентироваться на 5-6 на хост, т.е. при 10 объектах можно вводить второй хост, при 16 — третий, а при 25 - четвертый ), то пользователи не ощутят выигрыша от увеличения числа параллельных запросов и вместо ускорения загрузки сайта заметят ее замедление. Преимущества данного подхода появятся только для страниц с большим числом внешних объектов. Стоит каким-либо образом измерить разницу во времени загрузки для ваших пользователей прежде, чем полностью внедрять данную методику.
Возможно, лучшим выходом для ускорения загрузки ваших страниц для вернувшихся посетителей будет безусловное кеширование браузером статических картинок, файлов стилей и скриптов. Это никак не поможет при загрузке страницы для нового посетителя, но существенно уменьшит время загрузки страницы при повторных посещениях.
Рассмотрите возможность расположить небольшие объекты (или зеркало, или их кеш) максимально близко от пользователей в терминах сетевых задержек. Для больших сайтов с международной аудиторией можно использовать как платные сети доставки содержания (Content Delivery Network ), так и отдельные виртуальные машины в пределах 50мс для 80% ваших пользователей вместе с множеством доступных методов для распределения запросов пользователей на ближайшую к ним виртуальную машину (к слову сказать, как раз так работают сайты многих международных компаний, в том числе, и Acronis , распределяющие пользователей по локальным версиям в зависимости от географического признака ).
Регулярно проверяйте ваш сайт, заходя с помощью «рядовых» соединений. В моем случае использование «медленного прокси-сервера», который эмулировал плохое DSL-соединение из Новой Зеландии (768Кбит входящий, 128Кбит исходящий, 250мс задержка, 1% потери пакетов) вместо гигабайтного канала с несколькими миллисекундами от серверов в штатах, оказалось весьма полезным. Мы очень оперативно обнаружили и устранили ряд функциональных ошибок и проблем удобства использования.
Для моделирования такого медленного соединения, я использовал модули ядра Linux netem и HTB , которые доступны с версии 2.6. Оба этих модуля устанавливаются с командой . Это позволяет добиться наиболее точной эмуляции, которую мне удалось найти, но я бы не назвал ее идеальной. Лично я не пользовался, но, по общему мнению, по скрытой возможности в их браузере, которая позволяет получить также некоторую дополнительную информацию по поводу загрузки.
Если же вы хорошо знакомы с HTTP-протоколом и TCP/IP на пакетном уровне, то можно попробовать посмотреть, что происходит, используя tcpdump , или . Эти инструменты являются просто обязательными для сетевых отладок любого рода.
Попробуйте протестировать часто загружаемые страницы вашего сайта на производительность из локальной сети, используя , который поставляется вместе с веб-сервером Apache . Если сервер отвечает дольше, чем 5-10 миллисекунд при генерации страницы, значит, стоит хорошо разобраться, на что же уходит серверное время.
Если в результате таких тестов задержки оказались весьма высокими, и процесс веб-сервера (или CGI, если вы используете его) «отъедал» слишком много CPU, то причиной этого зачастую может оказаться необходимость в компиляции скриптов в процессе выполнения при каждом запросе. Такое программное обеспечение, как eAccelerator для PHP, mod_perl для perl, mod_python для python и т. д. могут кешировать серверные скрипты в скомпилированном состоянии, существенно ускоряя загрузку вашего сайта. Кроме этого, стоит найти профилирующий инструмент для вашего языка программирования, чтобы установить, на что же тратятся ресурсы CPU. Если вам удастся устранить причину больших нагрузок на процессор, то страницы будут отдаваться быстрее, и вы сможете выдавать больше трафика при меньшем числе машин.
Если на сайте при создании страницы выполняется много запросов к базе данных или какие-либо другие тяжелые вычисления, стоит рассмотреть добавление кеширования на стороне сервера для медленных операций. Большинство людей начинают с записи кеша в локальную память или локальный диск, однако, эта логика перестает работать, если ваша система расширяется до кластера веб-серверов (каждый со своим локальным диском и локальной памятью ). Стоит взглянуть в сторону использования memcached , который создает очень быстрый общий кеш, который объединяет свободную оперативную память всех имеющихся машин. Клиенты к нему портированы на большинство распространенных языков.
(Опционально) Подать петиция производителям браузеров с целью включить конвейерную обработку HTTP-запросов по умолчанию в новых браузерах. Если это будет сделано, то нам не придется исполнять эти «танцы с бубнами» (these tricks ), и большая часть веба будет загружаться быстрее для среднего пользователя. (В Firefox"е это отключено, предположительно, из-за некоторых прокси, некоторых балансировщиков нагрузок и некоторых версий IIS (привет, Microsoft! ), которые впадают в шок при конвейерных запросах. Но в Opera, по-видимому, провели существенную работу для того, чтобы включить эту возможность по умолчанию. Почему так не могут поступить все остальные браузеры?)
Заключение
Указанный список содержит мои мысли по увеличению скорости связи между браузером и сервером и может быть применен, в общем случае, ко многим сайтам не зависимо от того, как используется веб-сервер или язык разработки для написания сайта. Однако, к сожалению, все эти вещи делают довольно редко.
Хотя все советы направлены на уменьшения времени загрузки страницы, положительными побочными эффектами могут стать уменьшения трафика от сайта и уменьшения нагрузки на серверный процессор на просмотр одной страницы. Уменьшения затрат на ваш вебсайт при улучшении пользовательского восприятия ресурса должно быть веской причиной, чтобы потратить некоторое время на оптимизацию такого рода.