perf-rocks / perf.rocks

Curated resources that help you build lightning fast websites

Perf:zap:Rocks

Web performance matters. Find resources that help you build lightning fast websites.

Perf Rocks is a place for front-end performance resources. Articles, talks, tooling, books and the people behind them.

Contributing resources

Submit your resources using the form available at http://perf.rocks/submit/, by opening a new issue or by submitting a pull request.

perf.rocks's Issues

Performance Sponsor

Hi Daniel,

To quickly introduce myself I work for CDNify: We speed up the web!

I love all the content on your site (especially the tools as they're super useful) and wondered if you're interested in a sponsor for perf.rocks?

Let me know what you think 👍

Thanks,
Jamie

A Beginner’s Guide to Website Speed Optimization

Hey guys,
Great initiative! I've written a short, 11,000 words :) guide on the topic, it has been shared many many times and we've received lots of positive feedback from readers, I'd be honored if it could be featured in the Articles section!
https://kinsta.com/learn/page-speed/
Thanks,
Mark

Tool search

Video Not Found: Crash Course on Frontend Performance

In Talks and Slides category, the last 3rd from the list Crash Course on Frontend Performance videos & slides link are not found.

Resource: Wicked Fast Websites

You may be interested in a series I wrote on "wicked fast websites": http://gomakethings.com/wicked-fast-websites. Links, data, and lots of techniques.

Add Nines Performance Tool & Images Article

Nines is a performance aimed to help developers find critical performance issues. v2 supports RUM (using Navigation Timing & Resource Timing APIs) and Synthetic testing (using WebPageTest.org API). You can see median site speed for your current view, overall from the info collected using RUM, and the median site speed for each country that's visited the site.

It also provides a list of resources and the time it took to load each resource, allowing the ability to pinpoint troublesome assets. The tool show basic stats from WebPageTest.org (TTFB, Speed Index, Load Time, Document Size, etc.) and provides a break down of video frames to allow the user to see how the page loads.

It can be demoed at http://mattshull.com/perf and the code can be viewed at http://github.com/derekshull/nines

Also here's an article on image performance: http://blog.thinkful.com/post/103650638583/optimizing-your-images-make-your-website-load

Loading webfonts with high performance

http://bdadam.com/blog/loading-webfonts-with-high-performance.html

An article about loading webfonts without delaying rendering or blinking.

Browser Diet

I'm not sure which is the best category to fit this but I think it's quite useful: http://browserdiet.com/

Article categories and tags

Resources about images

How about following some articles and a tool?

• We should optimize images - An article which I wrote up on Medium.
• Introduction to WebP - An article which I wrote up on Medium.

-
    title: 'We should optimize images'
    author: ['Shogo Sensui']
    category: 'image'
    url: https://medium.com/@1000ch/we-should-optimize-images-8435760e0ec9
    tags: ['image']
-
    title: 'Introduction to WebP'
    author: ['Shogo Sensui']
    category: 'image'
    url: https://medium.com/@1000ch/introduction-to-webp-b593dfe1d1d1
    tags: ['image']

• WebPonize - a Mac App which converts images into WebP format.

-
    name: WebPonize
    description: WebPonize is a Mac OS App for converting PNG, JPEG, animated (or not) GIF images into WebP.
    website: https://webponize.github.io
    category: 'Image Optimization'
    tags: ['image', 'WebP', 'optimization']

Additional Performance Tool

I didn't see http://gtmetrix.com/ in your list of performance tools. It should definitely be added. Btw, love the Perf.Rocks site. It's great. Thanks for taking the time to put it together.

perf.rocks URL doesn’t work without www

…so I got redirected to this IP.

Optimistic page loading

http://bdadam.com/blog/optimistic-page-loading-with-instantclick-io.html

An article about how to spare a few hundred milliseconds when the user navigates to another page on the same website. It's all about perceived performance with optimistic (pre)loading.

People

Not sure if we can submit ourselves but I've created a performance tool, write performance posts, and I'm lined up this year to give a talk at 2 different events on web performance (Feb 10 & Oct TBD).

Bio: Matt Shull

Twitter: TheMattShull

Bio:
Matt is a performance nerd who loves experimenting with web technologies to boost efficiency. He currently works at Aristotle Interactive and mentors FEWD and AngularJS students through Thinkful. He hopes to share what he's learned "in the trenches" about web performance and cultivate a community that strives to make the web faster.

Critical Path Performance Optimization

http://ponyfoo.com/articles/critical-path-performance-optimization

Describes a series of performance optimization techniques I've applied to my blog.

Add new resource

For web design and dev :

1. Mixture.io
2. Prepros
3. Yeoman, Grunt and Bower
4. Atom Text Editor
5. Firefox Developer

Simpler way to submit new content

http://www.sitespeed.io

sitespeed.io is a tool for analysing webpage performance and speed.

People

Ana Tudor: http://twitter.com/thebabydino
Hugo Giraudel: http://twitter.com/hugogiraudel
Mary Lou: http://twitter.com/crnacura

Create section Case Studies

Create a new section Case Studies with all items with category Case Studies in articles

statico.io

statico.io offer front end optimization as a service. All you need to optimize front end: cleancss / uncss / loadCSS / lesscss / uglifyjs / sprite / data-url / kraken / CDN.

Free unless used for commercial site with more than 10,000 monthly unique visits.

Hope you found it useful & thanks!

Yellow Lab Tools

Hello!

I created Yellow Lab Tools, which is an open-source tool that analyzes front-end performance and quality of a webpage. It is online (http://yellowlab.tools) and it's free, i'd love to see it added to perf.rocks.

https://github.com/gmetais/YellowLabTools

Add websitetest.com to tools

name: Website Test
description: 'Synthetic testing for web apps, highlighting performance bottlenecks from page structure, content domains or individual resources. Analyze requests by geography, network speed, and resources by type, domain, load times, marks and more. Based on open-source project wpt.'
website: http://www.websitetest.com
categories: ['Performance analysis']
related: ['webpagetest']
tags: ['analysis']

Add Podcasts section

Some initial content:

• http://pathtoperf.com/2015/04/07/01-with-lara-hogan.html
• http://pathtoperf.com/2015/04/22/02-with-mark-dorison.html
• http://pathtoperf.com/2015/05/05/03-with-jeff-lembeck.html
• http://pathtoperf.com/2015/05/19/04-with-jeff-veen.html
• http://pathtoperf.com/2015/06/04/05-with-brian-greene-and-john-hoyt.html
• http://pathtoperf.com/2015/06/19/06-with-matt-shull.html
• http://pathtoperf.com/2015/07/14/07-with-brenna-heaps.html
• http://ttlpodcast.com/episodes/emily-nakashima.html

Going Beyond onload - How Fast Does it Feel?

Panelists:
Patrick Meenan (Google)
Chao (Ray) Feng (Microsoft)
Mike Petrovich (Next Big Sound)

Video: https://www.youtube.com/watch?v=mx0G8NPqNBc
Slides: http://velocityconf.com/velocityny2013/public/schedule/detail/31344

Add SpeedCurve to tools section

https://speedcurve.com

RSS feed

Add a global RSS feed that includes all the categories (except for people). And individual feeds to each category and also one for people.

Tool filters

Filter tools by platform and/or tags