FEND_P4:FEND网站优化项目

  • B2_732547
    了解作者
  • 579.4KB
    文件大小
  • zip
    文件格式
  • 0
    收藏次数
  • VIP专享
    资源类型
  • 0
    下载次数
  • 2022-06-13 05:20
    上传日期
网站效果优化组合项目 如果您希望接受(并且我们当然希望您会接受),您的挑战就是优化此在线产品组合以提高速度! 特别是,通过应用您在“的技术,优化关键渲染路径,并使此页面尽快。 首先,请查看存储库,检查代码, 入门 ####第1部分:优化index.html的PageSpeed Insights得分 一些有用的技巧可以帮助您入门: 签出仓库 要检查手机上的站点,可以运行本地服务器 $ > cd /path/to/your-project-folder $ > python -m SimpleHTTPServer 8080 打开浏览器并访问localhost:8080 下载并安装以使您的本地服务器可以远程访问。 $ > cd /path/to/your-project-folder $ > ngrok 8080 复制ngrok给您的公共URL,然后尝试通过PageSpeed Insi
FEND_P4-master.zip
  • FEND_P4-master
  • project-mobile.html
    2.4KB
  • project-webperf.html
    2.6KB
  • project-2048.html
    2.5KB
  • js
  • perfmatters.js
    513B
  • views
  • images
  • pizzeria.jpg
    2.8KB
  • pizza.png
    48.7KB
  • js
  • main.js
    23.3KB
  • css
  • style.css
    649B
  • bootstrap-grid.css
    12.7KB
  • pizza.html
    5.4KB
  • css
  • style.css
    1.5KB
  • print.css
    471B
  • README.md
    4.9KB
  • index.html
    3.9KB
  • img
  • .gitignore
    10B
  • profilepic.jpg
    4.5KB
  • 2048.png
    63.9KB
  • cam_be_like.jpg
    261.7KB
  • mobilewebdev.jpg
    186KB
内容介绍
## Website Performance Optimization portfolio project Your challenge, if you wish to accept it (and we sure hope you will), is to optimize this online portfolio for speed! In particular, optimize the critical rendering path and make this page render as quickly as possible by applying the techniques you've picked up in the [Critical Rendering Path course](https://www.udacity.com/course/ud884). To get started, check out the repository, inspect the code, ### Getting started ####Part 1: Optimize PageSpeed Insights score for index.html Some useful tips to help you get started: 1. Check out the repository 1. To inspect the site on your phone, you can run a local server ```bash $> cd /path/to/your-project-folder $> python -m SimpleHTTPServer 8080 ``` 1. Open a browser and visit localhost:8080 1. Download and install [ngrok](https://ngrok.com/) to make your local server accessible remotely. ``` bash $> cd /path/to/your-project-folder $> ngrok 8080 ``` 1. Copy the public URL ngrok gives you and try running it through PageSpeed Insights! Optional: [More on integrating ngrok, Grunt and PageSpeed.](http://www.jamescryer.com/2014/06/12/grunt-pagespeed-and-ngrok-locally-testing/) Profile, optimize, measure... and then lather, rinse, and repeat. Good luck! ####Part 2: Optimize Frames per Second in pizza.html To optimize views/pizza.html, you will need to modify views/js/main.js until your frames per second rate is 60 fps or higher. You will find instructive comments in main.js. You might find the FPS Counter/HUD Display useful in Chrome developer tools described here: [Chrome Dev Tools tips-and-tricks](https://developer.chrome.com/devtools/docs/tips-and-tricks). ### Optimization Tips and Tricks * [Optimizing Performance](https://developers.google.com/web/fundamentals/performance/ "web performance") * [Analyzing the Critical Rendering Path](https://developers.google.com/web/fundamentals/performance/critical-rendering-path/analyzing-crp.html "analyzing crp") * [Optimizing the Critical Rendering Path](https://developers.google.com/web/fundamentals/performance/critical-rendering-path/optimizing-critical-rendering-path.html "optimize the crp!") * [Avoiding Rendering Blocking CSS](https://developers.google.com/web/fundamentals/performance/critical-rendering-path/render-blocking-css.html "render blocking css") * [Optimizing JavaScript](https://developers.google.com/web/fundamentals/performance/critical-rendering-path/adding-interactivity-with-javascript.html "javascript") * [Measuring with Navigation Timing](https://developers.google.com/web/fundamentals/performance/critical-rendering-path/measure-crp.html "nav timing api"). We didn't cover the Navigation Timing API in the first two lessons but it's an incredibly useful tool for automated page profiling. I highly recommend reading. * <a href="https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/eliminate-downloads.html" rel='nofollow' onclick='return false;'>The fewer the downloads, the better</a> * <a href="https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/optimize-encoding-and-transfer.html" rel='nofollow' onclick='return false;'>Reduce the size of text</a> * <a href="https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/image-optimization.html" rel='nofollow' onclick='return false;'>Optimize images</a> * <a href="https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/http-caching.html" rel='nofollow' onclick='return false;'>HTTP caching</a> ### Customization with Bootstrap The portfolio was built on Twitter's <a href="http://getbootstrap.com/" rel='nofollow' onclick='return false;'>Bootstrap</a> framework. All custom styles are in `dist/css/portfolio.css` in the portfolio repo. * <a href="http://getbootstrap.com/css/" rel='nofollow' onclick='return false;'>Bootstrap's CSS Classes</a> * <a href="http://getbootstrap.com/components/" rel='nofollow' onclick='return false;'>Bootstrap's Components</a> ### Sample Portfolios Feeling uninspired by the portfolio? Here's a list of cool portfolios I found after a few minutes of Googling. * <a href="http://www.reddit.com/r/webdev/comments/280qkr/would_anybody_like_to_post_their_portfolio_site/" rel='nofollow' onclick='return false;'>A great discussion about portfolios on reddit</a> * <a href="http://ianlunn.co.uk/" rel='nofollow' onclick='return false;'>http://ianlunn.co.uk/</a> * <a href="http://www.adhamdannaway.com/portfolio" rel='nofollow' onclick='return false;'>http://www.adhamdannaway.com/portfolio</a> * <a href="http://www.timboelaars.nl/" rel='nofollow' onclick='return false;'>http://www.timboelaars.nl/</a> * <a href="http://futoryan.prosite.com/" rel='nofollow' onclick='return false;'>http://futoryan.prosite.com/</a> * <a href="http://playonpixels.prosite.com/21591/projects" rel='nofollow' onclick='return false;'>http://playonpixels.prosite.com/21591/projects</a> * <a href="http://colintrenter.prosite.com/" rel='nofollow' onclick='return false;'>http://colintrenter.prosite.com/</a> * <a href="http://calebmorris.prosite.com/" rel='nofollow' onclick='return false;'>http://calebmorris.prosite.com/</a> * <a href="http://www.cullywright.com/" rel='nofollow' onclick='return false;'>http://www.cullywright.com/</a> * <a href="http://yourjustlucky.com/" rel='nofollow' onclick='return false;'>http://yourjustlucky.com/</a> * <a href="http://nicoledominguez.com/portfolio/" rel='nofollow' onclick='return false;'>http://nicoledominguez.com/portfolio/</a> * <a href="http://www.roxannecook.com/" rel='nofollow' onclick='return false;'>http://www.roxannecook.com/</a> * <a href="http://www.84colors.com/portfolio.html" rel='nofollow' onclick='return false;'>http://www.84colors.com/portfolio.html</a>
评论
    相关推荐
    • Tastebuds:食品订购网站https存储
      食品订购网站的存储库 Tastebuds是一个独特的食品订购网站,您可以在其中自由定制自己的食品。 最好的部分是,您可以根据需要,日期和时间安排下达订单。 味蕾本身就是一个组织,不与其他餐馆捆绑以提供食物。 ...
    • 存储资料
      NULL 博文链接:https://hongyabing.iteye.com/blog/1569369
    • LearningDirectX11:https的源代码存储
      DirectX 12中的纹理和照明 的源代码存储库 控制项 钥匙 行动 W 向前移动相机 A 向左移动相机 S 向后移动相机 D 向右移动相机 Q 向上平移相机 E 向下平移相机 Esc 关闭申请 Alt + Enter 切换全屏模式
    • 存储过程
      NULL 博文链接:https://canglang0.iteye.com/blog/1513344
    • kubemacro-hub:https的宏存储
      KubeMacro集线器 宏存储库。
    • 文档存储
      NULL 博文链接:https://wangjichun.iteye.com/blog/2057313
    • fno-specification:https存储
      存储库 快速开始 编辑dev.html 确保所有本地资产都在resources文件夹中,并且dev.html文件中的链接是相对的(这很重要,因为发布脚本会创建多个嵌套路径) 将快照另存为index.html 运行node publish.js index....
    • commons:此存储库已弃用。 访问 https
      Codenvy 公共类 此存储库已弃用。 访问
    • nur-packages:我的个人NUR存储https
      神经包装 我的个人存储
    • LegacyVEX:https
      这是我用于个人项目的Legacy VEX设备的待添加(TBA)存储库。 如果我的代码可以帮助您完成任务,请随时使用它-如果您使用我的代码的大部分内容,请给我发送代码链接,并在注释部分中将其归功于我,谢谢。 如果您是...