В настоящее время мой сайт занимает тысячу лет для загрузки, хотя в нем ничего нет. Мое предположение заключается в том, что это потому, что на странице имеется довольно много изображений и JavaScript.
Есть ли способ проверить, что вызывает длительное время загрузки?
Проверьте свою страницу здесь PageSpeed Insights - разработчики Google, и вы увидите все предложения по созданию сайта быстрее.
Вот некоторые основные вещи, которые вы можете использовать для увеличения скорости вашего сайта:
example.com до com1.example.com и com2.example.com. Это позволяет вам максимизировать параллельные загрузки. Не держите более двух-четырех доменов, иначе это даст вам штраф за просмотр DNS.Вот список, где вы можете проверить свою веб-страницу:
Также для ускорения вашей страницы вы можете использовать:
1. Оптимизируйте свои изображения
Знайте, когда использовать подходящий формат файла для ваших изображений. Изменение на другой формат файла может значительно уменьшить размер файла изображения.
Ознакомьтесь с этими ресурсами, чтобы узнать больше об оптимизации изображений:
Для уменьшения размера вашего изображения я бы порекомендовал TinyPNG
2. Не уменьшайте изображения
Избегайте использования изображения большего размера, чем вам нужно, просто потому, что вы можете установить атрибуты width и height элементов <img> в HTML.
* Если вам нужно изображение размером 100x100 пикселей и изображение размером 700x700 пикселей, используйте графический редактор, например Photoshop, или один из этих сетевых графических редакторов, чтобы изменить размер изображения до необходимых размеров.Это уменьшает размер файла изображения, что помогает сократить время загрузки страницы.
3. Сжатие и оптимизация вашего контента
Задача сжатия контента вашего сайта может оказать огромное влияние на сокращение времени загрузки. При использовании сжатия HTTP все данные вашей веб-страницы отправляются в одном файле меньшего размера, а не в запросе, заполненном множеством разных файлов. Для получения дополнительной информации см. Эту статью в Википедии о HTTP-сжатии.
Вы также можете оптимизировать и сжать свои файлы JavaScript и CSS, комбинируя их и уменьшая исходный код.
4. Поместите ссылки на таблицу стилей вверху.
Перемещение ссылок на таблицу стилей в <head> вашего HTML-документа помогает вашим страницам чувствовать, что они загружаются быстрее, потому что это позволяет вашим страницам постепенно воспроизводить стили. Кроме того, это не повредит, что это стандарт W3C.
5. Поместите ссылки на сценарии внизу.
Браузеры могут загружать только два компонента на одно имя хоста одновременно. Если вы добавите ваши сценарии в начало страницы, то при начальной загрузке страницы будет заблокировано все, что ниже этого. Это дает ощущение, что страница загружается медленнее.
Чтобы избежать этой ситуации, поместите ссылки на скрипты как можно дальше вниз по HTML-документу, желательно прямо перед закрывающим <body>.
6. Поместите JavaScript и CSS во внешние файлы
Если ваш JavaScript и CSS находятся непосредственно в вашем HTML-документе, они загружаются каждый раз, когда запрашивается HTML-документ. Таким образом, это не использует преимущества кэширования в браузере и увеличивает размер HTML-документа.
Всегда размещайте свой CSS и JavaScript во внешних файлах; Это лучшая практика, которая упрощает поддержку и обновление вашего сайта.
7. Минимизируйте HTTP-запросы
При посещении новой веб-страницы большая часть времени загрузки страницы тратится на загрузку компонентов этой страницы (например, изображений, таблиц стилей и сценариев).
Минимизируя количество запросов, которые должна сделать веб-страница, она будет загружаться быстрее. Чтобы уменьшить HTTP-запросы на изображения, вы можете использовать спрайты CSS для объединения нескольких изображений.
Если у вас есть несколько таблиц стилей и библиотек JavaScript, рассмотрите возможность их объединения, чтобы уменьшить количество HTTP-запросов.
8. Кэшируйте свои веб-страницы
Если вы используете систему управления контентом, которая динамически генерирует ваши веб-страницы, вы должны статически кэшировать свои веб-страницы и запросы к базе данных, чтобы уменьшить нагрузку на сервер и ускорить время рендеринга страниц.
9. Уменьшить 301 перенаправления
Каждый раз, когда используется редирект 301, он заставляет браузер использовать новый URL, что увеличивает время загрузки страницы. Если возможно, избегайте использования перенаправлений 301.
В других ответах здесь подробно описываются инструменты отладки производительности и советы по увеличению времени загрузки, поэтому я не буду их повторять.
Основная проблема заключается в том, что вы загружаете абсолютно все на своем сайте, прежде чем показывать свою домашнюю страницу посетителю. Это необязательно и является основным источником восприятия того, что ваш сайт загружается медленно.
Я могу понять, что вы хотите как можно дольше загружать предварительную загрузку, так что, когда посетитель просматривает ваш сайт, все будет загружаться мгновенно. Тем не менее, все, что вы делаете, это перемещение малых времен загрузки для каждого раздела в одно огромное время загрузки. Если посетитель может просматривать только одну область вашего сайта, они по-прежнему платят за время загрузки всего сайта, а не только за разделы, которые они посещают.
Самый простой способ реализовать небольшое время загрузки - разделить каждый раздел на свою собственную страницу, а затем загрузить только то, что вы показываете на этой странице. Ресурсы, такие как Javascript и CSS, обычно кэшируются довольно хорошо, поэтому вам обычно не нужно беспокоиться о том, что время загрузки влияет на что-то другое, кроме вашей домашней страницы.
В качестве альтернативы, предполагая, что вы хотите, чтобы весь сайт находился на одной странице, вам необходимо динамически добавлять различные подразделы на страницу с помощью Javascript, как только все, что требуется для вашей домашней страницы, закончит загрузку, а индикатор выполнения был скрыт, Да, если посетитель быстро щелкнет по подразделу, он увидит, что его содержимое загружено, но если они заинтересованы только в разделе "Свяжитесь со мной", они смогут получить необходимую им информацию намного раньше даже не заметив, что другие разделы еще не загружены.
Это, и не используйте огромные фоновые изображения. Это нормально, чтобы увеличить изображение с более низким разрешением, чтобы заполнить экран, и увеличить уровень сжатия JPEG, чтобы уменьшить размер файла. Это фоновое изображение и не должно быть фокусом - оставляйте изображения с высоким разрешением для своего портфолио.:)
Chrome имеет консоль, где вы можете просмотреть время загрузки сайта и все, что нужно загрузить.
Установите плагин FireBug в FireFox, затем загрузите ваш сайт с открытой вкладкой NET в FireBug. Вы можете видеть, сколько времени занимает загрузка каждого ресурса.
Похоже, есть два фоновых изображения, каждое из которых загружается более 20 секунд.
Обновить
С тех пор, как я это опубликовал, мир немного изменился. Теперь в Chrome имеется вкладка Аудит, которая позволяет вам моделировать диапазон устройств, скорости сети и т.д., А также анализаторы сети, производительности и памяти. Плагин для маяка https://chrome.google.com/webstore/detail/lighthouse/blipmdconlkpinefehnmjammfjpmpbjk?hl=en также довольно хорош.
У меня мало предложений по улучшению времени загрузки:
Итак: Да, вам действительно нужно исправить свой сайт. Люди не будут ждать загрузки сайта, особенно личного/профессионального сайта. Самая большая вещь, которую я вижу на вашем сайте - это почти несуществующее сжатие/оптимизация изображений. Вот несколько рекомендаций:
Используйте JPEG для фотографий и градиентов. Используйте PNG (или GIF) для штриховых рисунков или текста. Это связано с алгоритмами сжатия, используемыми для каждого типа изображения.
Обычно степень сжатия JPEG 80% довольно хороша для большинства изображений в Интернете, включая все ваши снимки миниатюр/галереи. Например, этот JPEG здесь: http://www.jj-triggs.com/images/page4_img3.jpg 25k. 25k !!! Это ОГРОМНОЕ, и у вас есть около 15 из них на странице! При степени сжатия 80% (размер изображения 7 КБ) я могу обнаружить несколько артефактов сжатия, но я также профессиональный дизайнер и ищу его. Даже на 85% размер изображения падает примерно до 8к.
Так же ваши фоновые изображения. bg_img1.jpg работает примерно на 900k; bg_img2.jpg - 1,5 МБ. Это безумие! Тем более, что городской пейзаж уже частично размыт - нет деталей для сохранения, которые гарантировали бы полное отсутствие сжатия JPEG. Я поднял сжатие на bg_img2.jpg до 60%, получил размер файла <200 КБ, и почти не было заметной разницы в качестве: https://d3vv6lp55qjaqc.cloudfront.net/items/1y3V2B2r0S1W0T1i081n/cityscape-compressed.jpg?X- CloudApp-Visitor-Id = 695722fcc5cecec10f09e16181dbdf5f & v = 3cf18008.
Иногда, когда изображение находится в фокусе контента/сайта, вполне нормально, чтобы оно было большим и менее сжатым. Но эти изображения на вашем фоне и в ваших галереях просто не важны: это фоновые изображения. Они не предназначены для изучения. Галерея изображений то же самое; они просто дают пользователю представление о том, что они получат при следующем нажатии.
Используйте выборочное сжатие JPEG. Adobe Fireworks предлагает следующее: если у вас есть большое изображение, часть которого четкая и в фокусе, а остальное размыто или будет покрыто содержимым, вы можете выбрать регион, для которого требуется более высокая степень сжатия JPEG (например, 85%). ) и накрутите оставшуюся часть изображения до 50% или что-то еще. Например, здесь Cityscape с выборочным выбором JPEG https://d3vv6lp55qjaqc.cloudfront.net/items/2V1I1o0B1H0v2O141w1R/cityscape-compressed-selective.jpg?X-CloudApp-Visitor-Id=695722fcc5cecec10f3ef1e1.1v1e1. Части в фокусе на 75%; остальное на 50% при включенном сглаживании.
Не используйте графику для текста. В этот день TypeKit, Google Webfonts и разумного типографского контроля через CSS это почти никогда не нужно.
Уменьшите количество файлов, которые необходимо передать. Каждое изображение, файл JavaScript, файл CSS и т.д. Требуют отдельного HTTP-запроса в дополнение к времени загрузки.
Вот несколько статей о сжатии изображений и времени загрузки:
Это длинный ответ... но я чувствую, что он предоставляет достаточно подробностей некоторым базовым подходам для улучшения производительности сайта. Следующий ответ также применим практически к любому сайту. Любые конкретные примеры, приведенные ниже, могут быть для текущей версии http://www.jj-triggs.com/
В приведенных ниже пунктах я имею в виду использование дополнения Net Panel от Firebug в Firefox, но другие браузеры также имеют похожие инструменты с почти таким же подходом, как я уже упоминал.
Установите Firebug на Firefox и откройте свой сайт. Включите Firebug для вашего сайта (F12). Включите панель Firebug Net, если она уже не включена.
Ваш сайт: http://www.jj-triggs.com/ - занимает 5-6 секунд в моей системе для повторных посещений (для этого ответа я не упомянул о подходах, чтобы улучшить это) - но первый визит занял около 60 секунд. (В приведенных ниже пунктах основное внимание уделяется тому, как улучшить это) Большинство пунктов, упомянутых ниже, улучшат ваш сайт для первой загрузки (или свежих перезагрузок).
После загрузки страницы уже, чтобы проверить свежие загрузки, вы можете использовать Ctrl + F5, Ctrl + R, Ctrl + Shift + R (в зависимости от браузера). Следите за сетевой панелью Firebug при загрузке страницы.
- The speed of the site host server (seems OK, nothing much to do for now)
- Visitor connection speed (cannot do anything for it)
- Everything else (where you need to fix many things).
The important approaches to resolve them are listed below:
- Serve the user files with less size but same content:
- Approach:
Enable gzip on files which contain text contents (*.js, *.css, *.html etc) (currently your site does not use gzip)
- How to identify:
In Net panel, expand the HTTP request details for a file, in the Headers tab of the expanded details, Content-Encoding field should show the value gzip.
- Solution:
It might need you to modify .htaccess file (or some other approach based on the server)
Search on Google or StackOverflow to see how to enable it.
- Approach:
Use minified JS and CSS files
- How to identify:
In Net panel, expand the HTTP request details for a JS/CSS file, in the Response tab of the expanded details, the code should be a minified version (no whitespace characters) of the file.
- Solution:
Use either the minified JS/CSS files as provided by the library.
Or you can minify them yourself by using tools like "JSMin" or "YUI (CSS and JS) Compressor"
- Approach:
- Serve the user optimum images, i.e., less size with good enough quality
- How to identify:
- In Net Panel, go to Images tab > Sort by size
- Generally the size of the images should be ... 1kb to 30kb for simple icons and logos and 20kb to 250kb for photos and large backgrounds.
- Solution:
- Compress the large images with softwares like GIMP (free) or Photoshop.
- Approach:
- Load the files from a CDN if possible
- eg: Load jQuery, jQuery UI etc from popular but still free CDN
- Advantage even for first visit: If the user has visited any other site which refers to the same path, it would be fetched from the cache itself
- How to identify:
- Check the Net panel "Domain" column for popular libraries like jQuery, jQuery UI etc.
They should be getting loaded from a popular CDN such as Google.
- Solution:
- Include JS and CSS from (Google) CDN if available.
- Approach:
- Load CSS before JS
- It may not necessarily help much with faster loading completion,
but it usually gives a faster feeling of load because your CSS gets applied as soon as possible.
- How to identify:
- Check the Timeline column in Net panel. Usually CSS files should be the getting loaded before JS.
- Solution:
- Move the <script> tags towards the bottom of the page.
- Approach:
- Wherever possible, load third-party components like Google Maps dynamically after the page load has completed
- How to identify:
- Check the Timeline column in Net panel. The 3rd-party components should usually begin loading after almost all the other code for the site has loaded.
- Solution:
- The solution would depend on the third-party component and might be a bit tricky.
Generally, loading the 3rd-party JavaScript after a small delay (using window.setTimeout and code to dynamically add script tags) would provide you better performance compared to loading the 3rd-party JS using plain HTML.
Я считаю, что исправление этих упомянутых проблем может сократить ваше время загрузки (http://www.jj-triggs.com/) до 10-30% времени, которое требуется в настоящее время.
Используйте YSlow плагин для Firefox. Это даст вам подробный анализ различных ведра производительности.
вы можете попробовать этот сайт и pingdom где вы можете ежедневно проверять производительность вашего сайта
Вы также можете проверить здесь: тестовый сайт
Этот тест показывает, что изображения являются отличным вкладом в ваше время загрузки. В частности, фоновые изображения, которые, кажется, не оптимизированы и вес 1,4 МБ
Изучите это, уменьшите количество запросов, уменьшите масштаб изображений, отложите загрузку и начните уменьшать время загрузки.
Отказ от ответственности: я являюсь одним из разработчиков, invovlved в бесплатном инструменте выше
Основная проблема на этой странице - большие изображения bg_img1.jpg, bg_img2.jpg и bg_img3.jpg. Они имеют размер от 0,91 до 1,45 МБ.
Все упоминают проблемы, связанные с сетевым трафиком, но загрузка страницы также может быть связана с JavaScript. Вот некоторые трюки, которые я взял на эту тему...
В инструментах разработчика Chrome есть профайлер, встроенный прямо в браузер. Вы можете запустить его, открыв инструменты разработчика, щелкнув профили, нажав кнопку "Пуск" и выполнив любую задачу.
Этот профилировщик расскажет вам, где тратится ваше время приложения и какие функции занимают большую часть вашего времени.
Так как JavaScript однопоточный, если вы выполняете много вещей в приложении "init", ваша страница будет неактуальна в течение короткого периода времени. Как вы можете узнать, есть ли какая-то JS, которая блокирует? Ну, главный симптом - когда вы прокручиваете колесико мыши или нажимаете на вещи, которые ничего не происходит в течение некоторого заметного количества времени при загрузке страницы.
Что происходит с вашими событиями прокрутки и кликами за это время? Ну, они попадают в очередь событий. Очередь событий вызывается, когда другой JavaScript не выполняется. Часто причина этих проблем может быть прослежена корнем, нажав кнопку "Пауза" в отладчике JS и исследуя трассировку стека... да, что медленное выполнение может быть!
Ниже приведены некоторые проблемы/решения
Как правило, есть два способа устранить такие проблемы:
- Сначала (не очень хороший, но часто разумный способ) вы могли бы взять дорогостоящие операции, которые могут выполняться в цикле for на загрузке страницы и бросать их в setTimeout(fn, 0). Примечание: 0 фактически составляет 4 мс или 5 мс, и ваша операция попадает в очередь событий. Это позволяет загружать больше частей вашего приложения, прежде чем понадобится много усилий.
- Во-вторых, создайте приложение таким образом, чтобы эти операции запускались только тогда, когда они нужны, а не бросали все на страницу "готово" или "загружать". Это очень превентивная мера или рефакторинг. Обычно трудно распутать эти проблемы.
Обычно вы можете решить это, сделав лучшую работу делегированием событий. Событие пузыря - это то, что каждый должен знать в JS. Короче говоря, подумайте о том, как событие click на одном объекте фактически является кликом, происходящим для каждого родителя, который содержит этот объект. Делегирование использует этот факт, чтобы позволить вам создать 1 обработчик для многих элементов DOM, которые выполняют аналогичную/одну и ту же вещь. Прочитайте документы для метода jQuery on и действительно сосредоточьтесь на том, как использовать параметр filter, и что e.currentTarget vs e.target vs this.
Один из способов исправить это - сделать запрос AJAX раньше. Вы можете разместить запрос на загрузку страницы, но до того, как страница будет готова. Затем ваш запрос будет распараллелен с остальной частью загружаемых вами ресурсов страницы.
В настоящее время люди используют системы модулей (проверьте AMD и CommonJS), но самый простой способ разрешить слишком большой сетевой трафик, который задерживает загрузку страницы, - это кошка для всех ваших JS файлов. Теперь, если у вас есть 100k строк JS, тогда у вас будет противоположная проблема (компиляция JS занимает слишком много времени, и вам нужно разделить ваши файлы). Как правило, все это связано с решением быстрого решения. Вы также можете разделить сетевой трафик на несколько поддоменов. Это позволит вам распараллелить больше загрузок. Я считаю, что сейчас у браузеров есть ограничение на 6 загрузок на домен. CDN также поможет в этом.
Firefox/Chrome/IE - нажмите F12, который откроет панель разработчика, где вы сможете найти сетевую панель.
Или попробуйте: http://tools.pingdom.com/fpt/
В этом случае я бы использовал Chrome и панель инструментов Dev (вкладка Network), чтобы посмотреть, какие тяжелые элементы.
Хотя это старый вопрос, я хотел бы выслать еще один ОТЛИЧНЫЙ бесплатный инструмент, который можно использовать для поиска проблем с производительностью на веб-сайте.
Compuware (dnyaTrace) Инструмент AJAX Free Edition помог мне решить некоторые вещи, которые я пропустил на нескольких моих сайтах в прошлом... Я помню, что у меня были проблемы с кешированием (связанные с htaccess), которые я обнаружил с помощью этого инструмента, среди других отличные советы.
В любом случае его можно загрузить здесь: http://www.compuware.com/en_us/application-performance-management/products/ajax-free-edition/overview.html