Сократите время ответа сервера на начальном этапе с помощью Netlify и Gatsby

Я использую PageSpeed Insights на своем веб-сайте и иногда получаю одну большую ошибку является

Сократите время первоначального ответа сервера

Сократите время ответа сервера для основного документа, потому что от него зависят все остальные запросы. Учить больше.

React Если вы выполняете рендеринг каких-либо компонентов React на стороне сервера, подумайте об использовании renderToNodeStream() или renderToStaticNodeStream(), чтобы позволить клиенту получать и обрабатывать различные части разметки вместо всех сразу. Учить больше.

Я посмотрел renderToNodeStream() и renderToStaticNodeStream(), но я действительно не понимал, как их можно использовать с Гэтсби.

Похоже на проблема, с которой сталкиваются и другие

Если вы хотите посмотреть, это домен https://suddenlysask.com.

Мои записи DNS

Sam 14.07.2020 источник

comment

Я думаю, что gatsby-plugin-offline может в этом помочь. Если сервер может отвечать в автономном режиме, он может ответить как можно скорее, но если нет, это вызовет некоторую задержку. Просто догадываюсь. - Sam 14.07.2020

comment

- Sam 29.11.2020

Ответы (2)

arrow_upward
1
arrow_downward

Используйте запись CNAME в домене без вершины. Используя домен bare / apex, вы обходите CDN и заставляете все запросы проходить через балансировщик нагрузки. Это означает, что вы получаете один IP-адрес, обслуживающий все запросы (меньшее количество одновременных подключений), сервер проксирует контент без кэширования, и расстояние до пользователя, вероятно, будет больше.

РЕДАКТИРОВАТЬ: Кроме того, ваш HTML-файл превышает 300 КБ. Это непристойно. Похоже, вы дважды включаете в него Bootstrap, вы повторяете одни и те же встроенные теги <style> снова и снова с немного разными хэшами селектора, и у вас есть тонна (неиспользуемых) служебных классов. Если возможно, вы хотите встроить только критический CSS; остальное обслуживайте из внешнего файла, если вы не можете его встряхнуть.

coreyward 14.07.2020

comment

На самом деле я не знаю, почему все эти повторяющиеся классы в основном одни и те же, я думал, что они действительно раздражают, но думал, что они просто должны были быть там из-за Гэтсби или чего-то в этом роде. Два бутстрапа могут быть связаны с тем, что у меня есть React-bootstrap, и я не уверен, что у меня также есть обычный бутстрап, но я проверю. - Sam; 15.07.2020

comment

Не могли бы вы перефразировать, что хотите встроить только критический CSS, если это возможно. Я не уверен, говорите ли вы о встроенном CSS или не о встроенном CSS - Sam; 15.07.2020

comment

До использования CSS в решениях JS большинство веб-сайтов помещали CSS во внешние файлы. Это было хорошо для кэширования, поскольку любые общие стили можно было использовать на всех страницах без передачи каких-либо дополнительных данных в браузер, но это означало, что браузер должен был загрузить весь ваш CSS при первом просмотре страницы. Для оптимизации стили, необходимые для начальной отрисовки (подумайте о содержимом складки), можно поместить непосредственно в файл HTML в теге стиля, что сделает их доступными, как только браузер сможет проанализировать файл. - coreyward; 15.07.2020

comment

Для всех, кто читал это, плагин gatsby-plugin-purgecss работал очень хорошо, избавляясь от неиспользуемых css почти без усилий, хотя, если вы используете пакет react-bootstrap, это избавит вас от некоторых классов, которые вы фактически используете для стилизации. - Sam; 10.08.2020

comment

Не могли бы вы объяснить, как это сделать Use a CNAME record on a non-apex domain? - Sam; 10.08.2020

comment

@Sam https://docs.netlify.com/domains-https/custom-domains/#definitions - coreyward; 11.08.2020

comment

CNAME - это сокращение от личного домена? Эта ссылка ни разу не упоминает CNAME - Sam; 12.08.2020

comment

Не могли бы вы привести пример? - Sam; 12.08.2020

comment

@Sam CNAME - это тип DNS-записи. Ваш сайт работает медленнее, потому что вы не используете запись CNAME для указания на Netlify, что позволило бы им динамически маршрутизировать границы CDN. Вы можете использовать запись CNAME только в субдомене. https://docs.netlify.com/domains-https/custom-domains/configure-external-dns/ - coreyward; 12.08.2020

comment

Я знаю, что это тип DNS-записи, но не знаю, как ее заполнить. Я обновил свой вопрос, чтобы показать свои DNS-записи. На этом рисунке я пытаюсь назначить запись DNS. Я установил value на suddenlysask.com, потому что когда я набираю @ и нажимаю "Сохранить", я получаю уведомление. Пожалуйста, соблюдайте запрошенный формат. Я установил name на www, потому что не знал, какой еще вариант? Я даже не знаю, является ли www правильным вариантом, но из того, что я прочитал на CNAME, кажется, что, возможно, www - это вариант? - Sam; 12.08.2020

arrow_upward
0
arrow_downward

Что ж, поведение неожиданное, я провел анализ скорости страницы вашего сайта, и он дал мне предупреждение при первом тесте с начальным временем отклика 0,74 секунды. Затем я использовал свои инструменты разработчика, чтобы посмотреть начальное время отклика в корне документа, которое составляло примерно от 300 до 400 мс. Итак, я снова провел тест скорости страницы, и ответ составил 140 мс. Тест пройден. После этого было 120 мс. См. Прикрепленное изображение.

Я полностью уверен, что с сайтом проблем нет. Тем не менее, если вы хотите попробовать, я бы порекомендовал вам хотя бы раз сменить сервер или хостинг, попробовать что-то другое. Я не знаю, какой у вас сейчас сервер, на котором развернут сайт. Вы можете попробовать AWS S3 и CloudFront, мне подходит.

Kuldeep 16.08.2020

comment

Я использую Netlify и Github. Netlify выполняет SSR, и все файлы хранятся на Github. - Sam; 17.08.2020

comment

Хоть раз попробуй переключиться на S3. проверить, как это работает, пока полностью не переключайтесь. просто разверните свою сборку на s3 хоть раз. Добавьте облачный фронт и проверьте ответ. Думаю, этот вопрос будет решен. - Kuldeep; 17.08.2020

Сократите время ответа сервера на начальном этапе с помощью Netlify и Gatsby

Ответы (2)

Вопросы по теме