├── CHANGELOG.md
├── LICENSE.txt
├── README.md
├── images
├── bad.svg
├── good.svg
├── na.svg
└── partially.svg
├── index.html
├── scripts
├── moment-2.13.0.min.js
└── scripts.js
└── styles
└── styles.css
/CHANGELOG.md:
--------------------------------------------------------------------------------
1 | # Changelog
2 |
3 | ## May 19th 2016
4 |
5 | * Add Spanish sites.
6 | * Add gazzetta.it and abc.net.au/news to bump up to 100 sites. 🎉
7 |
8 | ## May 18th 2016
9 |
10 | * Add Swiss sites.
11 |
12 | ## May 17th 2016
13 |
14 | * Update chip.de metrics.
15 | * Add skynews.com metrics.
16 |
17 | ## May 6th 2016
18 |
19 | * Add Australian sites.
20 | * “partially” for W3C validation errors now is for “less than 50 errors”. It’s less strict now.
21 | * Add 20minutes.fr.
22 | * Add total websites count at the end of the table.
23 | * Add Dutch sites.
24 |
25 | ## May 4th 2016
26 |
27 | * Add Italian sites.
28 | * Add Austrian sites.
29 | * Show values of metrics like page weight or validation errors.
30 | * Add average calculation on the bottom of certain metrics.
31 | * Add heute.de and tagesschau.de.
32 |
33 | ## May 3rd 2016
34 |
35 | * Fix https://github.com/isellsoap/front-end-side-of-news/issues/19 where I accidently tested the wrong NBC site.
36 | * Fix https://github.com/isellsoap/front-end-side-of-news/issues/20 where I accidently tested the wrong ABC site.
37 |
38 | ## May 2nd 2016
39 |
40 | * Use “good” instead of “very good” for SSL encryption metric.
41 | * Use fixed categories for page weight metrics. This results in a much clearer result. Before that a “good”/“bad” measure wouldn’t have been per see “good”/“bad”, but only “good”/“bad” in comparison to all other websites.
42 | * Remove [chroma.js](http://gka.github.io/chroma.js/) dependency (not longer needed).
43 | * Add french sites.
44 |
45 | ## May 1st 2016
46 |
47 | * Added UK sites.
48 |
49 | ## April 29th 2016
50 |
51 | * New metric: usage of security headers (as defined by [securityheaders.io](https://securityheaders.io/)).
52 | * Tiny styling fixes for main data table.
53 |
54 | ## April 28th 2016
55 |
56 | * Initial release ([blog post](https://francescoschwarz.de/en/blog/the-front-end-side-of-news/)).
57 |
--------------------------------------------------------------------------------
/LICENSE.txt:
--------------------------------------------------------------------------------
1 | The MIT License (MIT)
2 |
3 | Copyright (c) 2016 Francesco Schwarz
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # The front-end side of news
2 |
3 | Front-end metrics from big news sites around the world. https://isellsoap.github.io/front-end-side-of-news/
4 |
5 | ## Motivation
6 |
7 | On March 30th 2015 [I tweeted an image](https://twitter.com/isellsoap/status/582456573139804160) of a weekend project I did showing a chart of HTTP requests and page weights of big news sites from various countries. I got a lot of feedback from that tweet (at least for my standards). [Anselm Hannemann asked](https://twitter.com/helloanselm/status/582457282111356928) if I would put up a HTML version of the image, so this is it.
8 |
9 | I think especially big news sites have a certain responsibility of delivering a certain quality of front-end code to their customers because they normally have **massive reach**, **massive traffic**, **loyal readers** and are confronted with a **heterogenous pallet of end-user devices** they have to serve. Last but not least they offer **information people want to consume** if they visit their site, so the information should be served as **fast** and **accessible** as possible.
10 |
11 | ## Contributing
12 |
13 | Do you miss any metrics? Did you spot an error? Please be sure to check out [the list of existing issues](https://github.com/isellsoap/front-end-side-of-news/issues) before creating [one of your own](https://github.com/isellsoap/front-end-side-of-news/issues/new). You are most welcome to do so, I appreciate every feedback, criticism and help.
14 |
15 | ## Credits and links
16 |
17 | * [blog post introducing this repository](https://francescoschwarz.com/blog/the-front-end-side-of-news/)
18 | * [Website](https://isellsoap.github.io/front-end-side-of-news/)
19 | * [CHANGELOG.md](https://github.com/isellsoap/front-end-side-of-news/blob/gh-pages/CHANGELOG.md) detailing what changed over time
20 | * created by [Francesco Schwarz](https://francescoschwarz.com/) ([@isellsoap](https://twitter.com/isellsoap))
21 | * type face: [Fira Sans](https://www.google.com/fonts/specimen/Fira+Sans)
22 | * relative time calculation: [moment.js](https://github.com/moment/moment/)
23 | * accessible color concept: [Say Goodbye to Red-Green Color Scales](http://vis4.net/blog/posts/goodbye-redgreen-scales/)
24 | * information about page weight of websites: [Measuring page weight](https://mobiforge.com/design-development/measuring-page-weight)
25 |
26 | ## License
27 |
28 | This repository is published under the [MIT License](https://opensource.org/licenses/mit-license).
29 |
--------------------------------------------------------------------------------
/images/bad.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/images/good.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/images/na.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/images/partially.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | The front-end side of news
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
The front-end side of news
16 |
Front-end metrics from big news sites around the world.
“Transferred page weight” measures the total content transferred to the browser, which may be reduced due to compression. Measured on the home page with a 15 inch MacBook and
Please note: As pointed out in this GitHub issue a valid website isn’t per se a well-crafted website. But I do think that developers should try to keep validation errors to an absolute minimum.
1570 |
1571 |
Legend
1572 |
1573 |
1574 |
no errors
1575 |
1576 |
1577 |
1578 |
less than 50 errors
1579 |
1580 |
1581 |
1582 |
between 50 and 100 errors
1583 |
1584 |
1585 |
1586 |
more than 100 errors
1587 |
1588 |
1589 |
1590 |
1591 |
SSL encryption
1592 |
1593 |
Legend
1594 |
1595 |
1596 |
1597 | fully encrypted, no mixed unsecure content, automatic redirect to SSL version of page URL
1598 |
1599 |
1600 |
1601 |
1602 |
1603 | encryption is theoretically available, mixed unsecure content, no automatic redirect to SSL version of page URL
1604 |
1652 | excellent usage of headings, order of heading levels makes sense
1653 |
1654 |
1655 |
1656 |
1657 |
1658 | pretty good and consistent usage of headings, order of heading levels sometimes not optimal (e.g. h6 followed by h2), maybe tiny fraction of actual headings aren’t marked up as heading elements
1659 |
1660 |
1661 |
1662 |
1663 |
1664 | overall good and frequent usage of headings, still some or many actual headings aren’t marked up as heading elements
1665 |
1666 |
1667 |
1668 |
1669 |
1670 | (very) rare usage of headings, most actual headings aren’t marked up as such
1671 |
1672 |
1673 |
1674 |
1675 |
1676 | no usage of heading elements whatsoever
1677 |
1694 | image in markup, existing textual representation, overall good implementation
1695 |
1696 |
1697 |
1698 |
1699 |
1700 | CSS background image, existing textual representation, sometimes text hidden with CSS
1701 |
1702 |
1703 |
1704 |
1705 |
1706 | no textual representation in the markup
1707 |
1708 |
1709 |
1710 |
1711 |
1712 |
Usability without JavaScript
1713 |
1714 |
Legend
1715 |
1716 |
1717 |
1718 | almost no difference
1719 |
1720 |
1721 |
1722 |
1723 |
1724 | most content visible and clickable, main navigation and search are usable, some images not visible but placeholder images exist
1725 |
1726 |
1727 |
1728 |
1729 |
1730 | most content visible and clickable, sometimes main navigation and/or search not usable, some or all images underneath the fold not visible
1731 |
1732 |
1733 |
1734 |
1735 |
1736 | no or only some images visible, main navigation and/or search not usable
1737 |
1738 |
1739 |
1740 |
1741 |
1742 | most content not visible or usable, main navigation and search not usable
1743 |