网站优化-首屏时间

•Als PPTX, PDF herunterladen•

4 gefällt mir•1,374 views

irideas

Design Technologie

这是为神马都不是浮云老齐：团购导航打开好慢！老周：游戏浏览器好慢！有白屏！XX童鞋：360导航打开需要10秒XXVP：能否再快一点再优化一些

我感觉不出慢的原因可能有：公司网络太好了是XX光纤伟大的帝都离机房特别近我感知的都是缓存！的确不慢，是对方的网络环境较差 RPWT 木有感知幸好，我们有无线网卡。换上无线网卡来测试看看

果然真是慢！白屏时间长！首屏时间长！看一下QQ TAOBAO的国内性能指数 http://www.networkbench.com/?_m=ranklist_v3

评测网站性能指标NO.1 首屏时间：指网站在浏览器第一屏区域被充满所需时间，反映了用户在打开网站第一时间的感觉性能。通常一个网站，如果首屏时间在5秒以内是比较优秀的，10秒以内是可以接受的，10秒以上就不可容忍了。超过10秒的首屏时间用户会选择刷新页面或立刻离开。

首屏时间影响因素 a. 页面落在首屏部分的页面结构，包括页面内容大小、图片大小、JS外链文件及CSS外链文件、调用第三方内容、层次结构等都会直接影响首屏时间。 b. 网络因素，评定的指标有：DNS解析时间，建立连接时间，SSL握手时间，发出请求时间，重定向时间，第一个包时间，剩余包时间，内容下载时间。 c. 其他因素，比如Javascript脚本运行时间。

发现影响首屏时间的相关问题 HTTP数据包嗅探记录HTTP请求形成的瀑布图分析HTTP请求间的顺序分析单个请求的内容和时间线 (域名解析，建立连接，发送请求，等待响应，接收数据) 单机工具： HTTPWatch Firebug 联网工具： www.webpagetest.org

分析HTTP瀑布图单个域名HTTP1.1请求并发数 IE6，7 为2个，IE8 为6个， Firefox 3+为6个分析工具： WebPagetest IE7 分析案例 tuan.360.cn game.360.cn/?/ge/ hao.360.cn

Tuan.360.cn (chicago IE7 DSL) http://www.webpagetest.org/result/110303_5T_34S0/1/details/ 1 IE7同一个域名最多2个并发请求 2 do.min.js的执行阻塞其他下载 3 Jquery的并行请求不阻塞其他下载 4 页面请求没有Keep-live

game.360.cn/?/ge/ (chicago IE7 DSL) http://www.webpagetest.org/result/110303_AV_34V9/

Hao.360.cn (chicago IE7 DSL) http://www.webpagetest.org/result/110303_06_34WK/ 1 页面请求有KEEP-ALIVE

当我们无法改变用户的网络环境时 DNS lookup 域名解析耗时加强DNS服务器的规划与部署建立连接 WEB服务的规划与部署，使用CDN,开启keep-alive 等待响应减小服务端执行耗时，使用chunked 发送请求接收数据这个和用户所在的网络环境极其相关在HTTP响应头及内容中做优化工作

为了让浏览器尽早渲染的一些经验减少<head>内的CSS的请求，1个最佳生产环境的CSS避免使用@import 首屏的页面结构不要过于复杂，CSS不要使用expression，selector注意优化首屏中避免JS的请求延迟首屏交互代码的执行服务端进行请求可缓存的相关设置服务端启用GZIP压缩避免使用IFRAME

更深入的改进点静态文件放置在CDN 静态文件采用独立域名，cookie-free Domain img.qihoo.com  s.qhimg.com 图像优化 (大题目) 信息量的大页面使用 chunked 公司级的缓存策略(需要代码级公用) 结构的表现采用平稳过渡，即使背景图片没有下载完成，依然可以有配色区分内容。

Weitere ähnliche Inhalte

Empfohlen

https://www.hubspot.com/state-of-marketing · Scaling relationships and proving ROI · Social media is the place for search, sales, and service · Authentic influencer partnerships fuel brand growth · The strongest connections happen via call, click, chat, and camera. · Time saved with AI leads to more creative work · Seeking: A single source of truth · TLDR; Get on social, try AI, and align your systems. · More human marketing, powered by robots

2024 State of Marketing Report – by Hubspot

Marius Sescu

ChatGPT is a revolutionary addition to the world since its introduction in 2022. A big shift in the sector of information gathering and processing happened because of this chatbot. What is the story of ChatGPT? How is the bot responding to prompts and generating contents? Swipe through these slides prepared by Expeed Software, a web development company regarding the development and technical intricacies of ChatGPT!

Everything You Need To Know About ChatGPT

Expeed Software

Product Design Trends in 2024 | Teenage Engineerings

Pixeldarts

Mental health has been in the news quite a bit lately. Dozens of U.S. states are currently suing Meta for contributing to the youth mental health crisis by inserting addictive features into their products, while the U.S. Surgeon General is touring the nation to bring awareness to the growing epidemic of loneliness and isolation. The country has endured periods of low national morale, such as in the 1970s when high inflation and the energy crisis worsened public sentiment following the Vietnam War. The current mood, however, feels different. Gallup recently reported that national mental health is at an all-time low, with few bright spots to lift spirits. To better understand how Americans are feeling and their attitudes towards mental health in general, ThinkNow conducted a nationally representative quantitative survey of 1,500 respondents and found some interesting differences among ethnic, age and gender groups. Technology For example, 52% agree that technology and social media have a negative impact on mental health, but when broken out by race, 61% of Whites felt technology had a negative effect, and only 48% of Hispanics thought it did. While technology has helped us keep in touch with friends and family in faraway places, it appears to have degraded our ability to connect in person. Staying connected online is a double-edged sword since the same news feed that brings us pictures of the grandkids and fluffy kittens also feeds us news about the wars in Israel and Ukraine, the dysfunction in Washington, the latest mass shooting and the climate crisis. Hispanics may have a built-in defense against the isolation technology breeds, owing to their large, multigenerational households, strong social support systems, and tendency to use social media to stay connected with relatives abroad. Age and Gender When asked how individuals rate their mental health, men rate it higher than women by 11 percentage points, and Baby Boomers rank it highest at 83%, saying it’s good or excellent vs. 57% of Gen Z saying the same. Gen Z spends the most amount of time on social media, so the notion that social media negatively affects mental health appears to be correlated. Unfortunately, Gen Z is also the generation that’s least comfortable discussing mental health concerns with healthcare professionals. Only 40% of them state they’re comfortable discussing their issues with a professional compared to 60% of Millennials and 65% of Boomers. Race Affects Attitudes As seen in previous research conducted by ThinkNow, Asian Americans lag other groups when it comes to awareness of mental health issues. Twenty-four percent of Asian Americans believe that having a mental health issue is a sign of weakness compared to the 16% average for all groups. Asians are also considerably less likely to be aware of mental health services in their communities (42% vs. 55%) and most likely to seek out information on social media (51% vs. 35%).

How Race, Age and Gender Shape Attitudes Towards Mental Health

ThinkNow

AI Trends in Creative Operations 2024 by Artwork Flow.pdf

marketingartwork

Skeleton Culture Code

Skeleton Technologies

PEPSICO Presentation to CAGNY Conference Feb 2024

Neil Kimberley

Content Methodology: A Best Practices Report (Webinar)

contently

How to Prepare For a Successful Job Search for 2024

Albert Qian

A report by thenetworkone and Kurio. The contributing experts and agencies are (in an alphabetical order): Sylwia Rytel, Social Media Supervisor, 180heartbeats + JUNG v MATT (PL), Sharlene Jenner, Vice President - Director of Engagement Strategy, Abelson Taylor (USA), Alex Casanovas, Digital Director, Atrevia (ES), Dora Beilin, Senior Social Strategist, Barrett Hoffher (USA), Min Seo, Campaign Director, Brand New Agency (KR), Deshé M. Gully, Associate Strategist, Day One Agency (USA), Francesca Trevisan, Strategist, Different (IT), Trevor Crossman, CX and Digital Transformation Director; Olivia Hussey, Strategic Planner; Simi Srinarula, Social Media Manager, The Hallway (AUS), James Hebbert, Managing Director, Hylink (CN / UK), Mundy Álvarez, Planning Director; Pedro Rojas, Social Media Manager; Pancho González, CCO, Inbrax (CH), Oana Oprea, Head of Digital Planning, Jam Session Agency (RO), Amy Bottrill, Social Account Director, Launch (UK), Gaby Arriaga, Founder, Leonardo1452 (MX), Shantesh S Row, Creative Director, Liwa (UAE), Rajesh Mehta, Chief Strategy Officer; Dhruv Gaur, Digital Planning Lead; Leonie Mergulhao, Account Supervisor - Social Media & PR, Medulla (IN), Aurelija Plioplytė, Head of Digital & Social, Not Perfect (LI), Daiana Khaidargaliyeva, Account Manager, Osaka Labs (UK / USA), Stefanie Söhnchen, Vice President Digital, PIABO Communications (DE), Elisabeth Winiartati, Managing Consultant, Head of Global Integrated Communications; Lydia Aprina, Account Manager, Integrated Marketing and Communications; Nita Prabowo, Account Manager, Integrated Marketing and Communications; Okhi, Web Developer, PNTR Group (ID), Kei Obusan, Insights Director; Daffi Ranandi, Insights Manager, Radarr (SG), Gautam Reghunath, Co-founder & CEO, Talented (IN), Donagh Humphreys, Head of Social and Digital Innovation, THINKHOUSE (IRE), Sarah Yim, Strategy Director, Zulu Alpha Kilo (CA).

Social Media Marketing Trends 2024 // The Global Indie Insights

Kurio // The Social Media Age(ncy)

The search marketing landscape is evolving rapidly with new technologies, and professionals, like you, rely on innovative paid search strategies to meet changing demands. It’s important that you’re ready to implement new strategies in 2024. Check this out and learn the top trends in paid search advertising that are expected to gain traction, so you can drive higher ROI more efficiently in 2024. You’ll learn: - The latest trends in AI and automation, and what this means for an evolving paid search ecosystem. - New developments in privacy and data regulation. - Emerging ad formats that are expected to make an impact next year. Watch Sreekant Lanka from iQuanti and Irina Klein from OneMain Financial as they dive into the future of paid search and explore the trends, strategies, and technologies that will shape the search marketing landscape. If you’re looking to assess your paid search strategy and design an industry-aligned plan for 2024, then this webinar is for you.

Trends In Paid Search: Navigating The Digital Landscape In 2024

Search Engine Journal

From their humble beginnings in 1984, TED has grown into the world’s most powerful amplifier for speakers and thought-leaders to share their ideas. They have over 2,400 filmed talks (not including the 30,000+ TEDx videos) freely available online, and have hosted over 17,500 events around the world. With over one billion views in a year, it’s no wonder that so many speakers are looking to TED for ideas on how to share their message more effectively. The article “5 Public-Speaking Tips TED Gives Its Speakers”, by Carmine Gallo for Forbes, gives speakers five practical ways to connect with their audience, and effectively share their ideas on stage. Whether you are gearing up to get on a TED stage yourself, or just want to master the skills that so many of their speakers possess, these tips and quotes from Chris Anderson, the TED Talks Curator, will encourage you to make the most impactful impression on your audience. See the full article and more summaries like this on SpeakerHub here: https://speakerhub.com/blog/5-presentation-tips-ted-gives-its-speakers See the original article on Forbes here: http://www.forbes.com/forbes/welcome/?toURL=http://www.forbes.com/sites/carminegallo/2016/05/06/5-public-speaking-tips-ted-gives-its-speakers/&refURL=&referrer=#5c07a8221d9b

5 Public speaking tips from TED - Visualized summary

SpeakerHub

Everyone is in agreement that ChatGPT (and other generative AI tools) will shape the future of work. Yet there is little consensus on exactly how, when, and to what extent this technology will change our world. Businesses that extract maximum value from ChatGPT will use it as a collaborative tool for everything from brainstorming to technical maintenance. For individuals, now is the time to pinpoint the skills the future professional will need to thrive in the AI age. Check out this presentation to understand what ChatGPT is, how it will shape the future of work, and how you can prepare to take advantage.

ChatGPT and the Future of Work - Clark Boyd

Clark Boyd

Getting into the tech field. what next

Tessa Mero

Google's Just Not That Into You: Understanding Core Updates & Search Intent

Lily Ray

How to have difficult conversations

Rajiv Jayarajah, MAppComm, ACC

Introduction to Data Science

Christy Abraham Joy

Time Management & Productivity - Best Practices

Vit Horky

The six step guide to practical project management If you think managing projects is too difficult, think again. We’ve stripped back project management processes to the basics – to make it quicker and easier, without sacrificing the vital ingredients for success. “If you’re looking for some real-world guidance, then The Six Step Guide to Practical Project Management will help.” Dr Andrew Makar, Tactical Project Management

The six step guide to practical project management

MindGenius

Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...

RachelPearson36

Empfohlen (20)

2024 State of Marketing Report – by Hubspot

Everything You Need To Know About ChatGPT

Product Design Trends in 2024 | Teenage Engineerings

How Race, Age and Gender Shape Attitudes Towards Mental Health

AI Trends in Creative Operations 2024 by Artwork Flow.pdf

Skeleton Culture Code

PEPSICO Presentation to CAGNY Conference Feb 2024

Content Methodology: A Best Practices Report (Webinar)

How to Prepare For a Successful Job Search for 2024

Social Media Marketing Trends 2024 // The Global Indie Insights

Trends In Paid Search: Navigating The Digital Landscape In 2024

5 Public speaking tips from TED - Visualized summary

ChatGPT and the Future of Work - Clark Boyd

Getting into the tech field. what next

Google's Just Not That Into You: Understanding Core Updates & Search Intent

How to have difficult conversations

Introduction to Data Science

Time Management & Productivity - Best Practices

The six step guide to practical project management

Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...

网站优化-首屏时间

1. 网站性能优化分享一 — 关于首屏时间

2. 这是为神马都不是浮云老齐：团购导航打开好慢！老周：游戏浏览器好慢！有白屏！XX童鞋：360导航打开需要10秒XXVP：能否再快一点再优化一些

3. 这究竟是为什么呢，我在公司没感觉到慢啊。

4. 首先考虑，什么是慢？？？通常用户所感知的慢是指网站载入时空白时间长。

5. 我感觉不出慢的原因可能有：公司网络太好了是XX光纤伟大的帝都离机房特别近我感知的都是缓存！的确不慢，是对方的网络环境较差 RPWT 木有感知幸好，我们有无线网卡。换上无线网卡来测试看看

6. 果然真是慢！白屏时间长！首屏时间长！看一下QQ TAOBAO的国内性能指数 http://www.networkbench.com/?_m=ranklist_v3

7. 评测网站性能指标NO.1 首屏时间：指网站在浏览器第一屏区域被充满所需时间，反映了用户在打开网站第一时间的感觉性能。通常一个网站，如果首屏时间在5秒以内是比较优秀的，10秒以内是可以接受的，10秒以上就不可容忍了。超过10秒的首屏时间用户会选择刷新页面或立刻离开。

8. 首屏时间影响因素 a. 页面落在首屏部分的页面结构，包括页面内容大小、图片大小、JS外链文件及CSS外链文件、调用第三方内容、层次结构等都会直接影响首屏时间。 b. 网络因素，评定的指标有：DNS解析时间，建立连接时间，SSL握手时间，发出请求时间，重定向时间，第一个包时间，剩余包时间，内容下载时间。 c. 其他因素，比如Javascript脚本运行时间。

9. 我们优化的目标：减少首屏时间那么，怎么分析造成首屏时间过长的具体原因呢？

10. 发现影响首屏时间的相关问题 HTTP数据包嗅探记录HTTP请求形成的瀑布图分析HTTP请求间的顺序分析单个请求的内容和时间线 (域名解析，建立连接，发送请求，等待响应，接收数据) 单机工具： HTTPWatch Firebug 联网工具： www.webpagetest.org

11. 分析HTTP瀑布图单个域名HTTP1.1请求并发数 IE6，7 为2个，IE8 为6个， Firefox 3+为6个分析工具： WebPagetest IE7 分析案例 tuan.360.cn game.360.cn/?/ge/ hao.360.cn

12. Tuan.360.cn (chicago IE7 DSL) http://www.webpagetest.org/result/110303_5T_34S0/1/details/ 1 IE7同一个域名最多2个并发请求 2 do.min.js的执行阻塞其他下载 3 Jquery的并行请求不阻塞其他下载 4 页面请求没有Keep-live

13. game.360.cn/?/ge/ (chicago IE7 DSL) http://www.webpagetest.org/result/110303_AV_34V9/

14. Hao.360.cn (chicago IE7 DSL) http://www.webpagetest.org/result/110303_06_34WK/ 1 页面请求有KEEP-ALIVE

15. 当我们无法改变用户的网络环境时 DNS lookup 域名解析耗时加强DNS服务器的规划与部署建立连接 WEB服务的规划与部署，使用CDN,开启keep-alive 等待响应减小服务端执行耗时，使用chunked 发送请求接收数据这个和用户所在的网络环境极其相关在HTTP响应头及内容中做优化工作

16. 为了让浏览器尽早渲染的一些经验减少<head>内的CSS的请求，1个最佳生产环境的CSS避免使用@import 首屏的页面结构不要过于复杂，CSS不要使用expression，selector注意优化首屏中避免JS的请求延迟首屏交互代码的执行服务端进行请求可缓存的相关设置服务端启用GZIP压缩避免使用IFRAME

17. 更深入的改进点静态文件放置在CDN 静态文件采用独立域名，cookie-free Domain img.qihoo.com  s.qhimg.com 图像优化 (大题目) 信息量的大页面使用 chunked 公司级的缓存策略(需要代码级公用) 结构的表现采用平稳过渡，即使背景图片没有下载完成，依然可以有配色区分内容。

18. 讨论时间下次优化分享：图像优化

19. Thanks All irideas@gmail.com 2011.3.3