-
Notifications
You must be signed in to change notification settings - Fork 12.3k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Reduce the size of the 404 page #1443
Conversation
lgtm, but would un-minify the source code |
relevant: http://chrismorgan.info/blog/github-links-case-study.html I am not too keen on big "404" as to regular people that is less useful than "not found", IMO. I'm happy with minimizing the payload of the page however. And I like the new design Our current 404 ( http://demo.html5boilerplate.com/sdoifjs ) does indeed need a refresh. |
And let's kill the sad face. Let's stay positive even though the content isnt found. :) |
Is there any reason to show the 404 error at all? It's a technical detail tied to the HTTP specification. It would make far more sense to say something like "Page Not Found" and omit the "404" entirely. |
Minification in a H5BP HTML page does no makes sense. |
I agree with @FagnerMartinsBrack. We shouldn't minify the 404 page. In a case where someone would like to use the 404 page as a good base for a fork minification makes no sense. It makes "look, explore & learn" much harder. |
Thanks guys for all the suggestions / opinions so far, I really appreciate them. 👍 I modified the page.
@necolas Done.
@paulirish Most of the points in the post require some server side logic that I do not think H5BP can't tackle.
@paulirish I've removed it.
@AndrewBrinker I've included the
@paulirish Done.
@FagnerMartinsBrack As long as it's under 1 KB, I guess I'm ok with it being unminified. |
The new version looks great to me. I'd say let's add it to v5.0.0. |
Does anybody know if this still applies in IE? From the default Apache 404 <!--
- Unfortunately, Microsoft has added a clever new
- "feature" to Internet Explorer. If the text of
- an error's message is "too small", specifically
- less than 512 bytes, Internet Explorer returns
- its own error message. You can turn that off,
- but it's pretty tricky to find switch called
- "smart error messages". That means, of course,
- that short error messages are censored by default.
- IIS always returns error messages that are long
- enough to make Internet Explorer happy. The
- workaround is pretty simple: pad the error
- message with a big comment like this to push it
- over the five hundred and twelve bytes minimum.
- Of course, that's exactly what you're reading
- right now.
--> |
Quick check with browserstack says yep, even ie 11 - http://www.404-error-page.com/404-error-page-too-short-problem-microsoft-ie.shtml |
@mikealmond @patrickkettner good catch, thanks! I've update the page. :) |
I don't think the few bytes you save on omitting quotes and end tags is worth it. It will confuse beginners and it's inconsistent and ugly. I would also like to see the CSS rules being separated by empty lines for readability. |
p { | ||
line-height: 1.2 | ||
} | ||
@media only screen and (max-width: 270px){ |
This comment was marked as abuse.
This comment was marked as abuse.
Sorry, something went wrong.
Changes: * simplify the overall design * remove the Google search functionality as in most cases, it does not provide much value * reduce the overall file size while keeping the gzipped size over 512 bytes to prevent IE from displaying its own custom error page (thanks @mikealmond and @patrickkettner): http://www.404-error-page.com/404-error-page-too-short-problem-microsoft-ie.shtml Benefits include: * small file size (1409 bytes / 580 bytes gzipped), which is particular- ly useful when users are on a data plan and / or the server is wrongly configured (e.g.: tries to redirect to a "mobile" version of the web page and ends up serving a 404 page) or developers forget to provide certain files (e.g.: /favicon.ico - http://zoompf.com/blog/2012/04/instagram-and-optimizing-favicons) * improved performance (less HTTP requests, less memory consumption, faster rendering, etc.) * designed to work with all kinds of screen sizes and support IE 6+ Close #1443.
Thanks for all the feedback! |
* Link to a more official page for the information regarding Internet Explorer's "friendly HTTP error pages", namely: http://blogs.msdn.com/b/ieinternals/archive/2010/08/19/http-error-pages-in-internet-explorer.aspx. * Remove the indentation for the `<head>` and `<body>` tags in order to reduce the file size even closer to the 512 bytes limit. This is particularly helpful when compression is not enabled. * Stats: - before: original size: 1409 B gzipped size: 580 B ───────────────────────────── reduction: 829 B [58.8%] - after: original size: 1242 B gzipped size: 580 B ───────────────────────────── reduction: 662 B [53.3%] Ref: #1443.
Changes: * simplify the overall design * remove the Google search functionality as in most cases, it does not provide much value * reduce the overall file size while keeping the gzipped size over 512 bytes to prevent IE from displaying its own custom error page (thanks @mikealmond and @patrickkettner): http://www.404-error-page.com/404-error-page-too-short-problem-microsoft-ie.shtml Benefits include: * small file size (1409 bytes / 580 bytes gzipped), which is particular- ly useful when users are on a data plan and / or the server is wrongly configured (e.g.: tries to redirect to a "mobile" version of the web page and ends up serving a 404 page) or developers forget to provide certain files (e.g.: /favicon.ico - http://zoompf.com/blog/2012/04/instagram-and-optimizing-favicons) * improved performance (less HTTP requests, less memory consumption, faster rendering, etc.) * designed to work with all kinds of screen sizes and support IE 6+ Close h5bp#1443.
* Link to a more official page for the information regarding Internet Explorer's "friendly HTTP error pages", namely: http://blogs.msdn.com/b/ieinternals/archive/2010/08/19/http-error-pages-in-internet-explorer.aspx. * Remove the indentation for the `<head>` and `<body>` tags in order to reduce the file size even closer to the 512 bytes limit. This is particularly helpful when compression is not enabled. * Stats: - before: original size: 1409 B gzipped size: 580 B ───────────────────────────── reduction: 829 B [58.8%] - after: original size: 1242 B gzipped size: 580 B ───────────────────────────── reduction: 662 B [53.3%] Ref: h5bp#1443.
Changes: * simplify the overall design * remove the Google search functionality as in most cases, it does not provide much value * reduce the overall file size while keeping the gzipped size over 512 bytes to prevent IE from displaying its own custom error page (thanks @mikealmond and @patrickkettner): http://www.404-error-page.com/404-error-page-too-short-problem-microsoft-ie.shtml Benefits include: * small file size (1409 bytes / 580 bytes gzipped), which is particular- ly useful when users are on a data plan and / or the server is wrongly configured (e.g.: tries to redirect to a "mobile" version of the web page and ends up serving a 404 page) or developers forget to provide certain files (e.g.: /favicon.ico - http://zoompf.com/blog/2012/04/instagram-and-optimizing-favicons) * improved performance (less HTTP requests, less memory consumption, faster rendering, etc.) * designed to work with all kinds of screen sizes and support IE 6+ Close #1443.
* Link to a more official page for the information regarding Internet Explorer's "friendly HTTP error pages", namely: http://blogs.msdn.com/b/ieinternals/archive/2010/08/19/http-error-pages-in-internet-explorer.aspx. * Remove the indentation for the `<head>` and `<body>` tags in order to reduce the file size even closer to the 512 bytes limit. This is particularly helpful when compression is not enabled. * Stats: - before: original size: 1409 B gzipped size: 580 B ───────────────────────────── reduction: 829 B [58.8%] - after: original size: 1242 B gzipped size: 580 B ───────────────────────────── reduction: 662 B [53.3%] Ref: #1443.
I think we should provide a smaller 404 page as in some cases, the server can generate a lot of 404 pages and users might care a lot about the page size.
People who ever used a mobile data plan know how irritating is to access a large web page, but even more irritating is when the site tries to redirect you the equivalent mobile page and keeps ending up serving you 404 pages that are quite large given the information they offer.
Also, I personally find the search feature in the 404 useless. I tried to use it a couple of times but ended up not finding what I was looking for (Google seems to be on the same page with this). I even asked some of my non-technical friends if they use such a feature. All of them said they don't and they either immediately go back or just close the page and move to the next site.
Give the above, I proposed the following
pagepage.Some screenshots:
Changes:
minified the code and removed unnecessary tags in order to reduce the file size (the 404 page is intended more as a placeholder and developers should change or customize it according to their needs)Benefits:
6001409 bytes /421580 bytes gzipped), which is particularly useful when users are on a data plan and / or the server is wrongly configured (e.g.: tries to redirect to a "mobile" version of the web page and ends up serving a 404 page) or developers forget to provide certain files (e.g.: /favicon.ico)