Skip to content
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

Merged
merged 1 commit into from Oct 12, 2013

Conversation

Projects
None yet
10 participants
@alrra
Copy link
Member

commented Oct 5, 2013

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 page page.

Some screenshots:

Browser (OS) Portrait Landscape
Chrome (Android 4.1.2)
Safari (iOS 7.0.2)

Changes:

  • simplified the overall design
  • remove the Google search functionality as in most cases, it does not provide much value
  • 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)
  • 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:

  • small file size (600 1409 bytes / 421 580 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)
  • improved performance (less HTTP requests, less memory consumption, faster rendering, etc.)
  • designed to work with all kinds of screen sizes and support IE 6+
@necolas

This comment has been minimized.

Copy link
Member

commented Oct 5, 2013

lgtm, but would un-minify the source code

@paulirish

This comment has been minimized.

Copy link
Member

commented Oct 7, 2013

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.

@paulirish

This comment has been minimized.

Copy link
Member

commented Oct 7, 2013

And let's kill the sad face. Let's stay positive even though the content isnt found. :)

@alilleybrinker

This comment has been minimized.

Copy link
Contributor

commented Oct 7, 2013

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.

@FagnerMartinsBrack

This comment has been minimized.

Copy link
Contributor

commented Oct 7, 2013

Minification in a H5BP HTML page does no makes sense.
Even if the project does not encourages outside optimizations it should at least assume ppl are using gzip in the HTML for the sake of readability.
In my point of view H5BP is more than a copy/paste but a reference place where you get the code and customize it for your needs, so any custom thing should not be minified. Even for a page with just presentation like the 404.

@sarukuku

This comment has been minimized.

Copy link

commented Oct 7, 2013

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.

@alrra

This comment has been minimized.

Copy link
Member Author

commented Oct 8, 2013

Thanks guys for all the suggestions / opinions so far, I really appreciate them. 👍

I modified the page.


would un-minify the source code

@necolas Done.

relevant: http://chrismorgan.info/blog/github-links-case-study.html

@paulirish Most of the points in the post require some server side logic that I do not think H5BP can't tackle.

I am not too keen on big "404"

@paulirish I've removed it.

Is there any reason to show the 404 error at all?

@AndrewBrinker I've included the 404 text because all the non-technical friends I've asked knew what 404 meant and I thought it would make the page even more recognizable. I was wrong there, and I agree with you guys on removing the 404 text.

And let's kill the sad face.

@paulirish Done.

Minification in a H5BP HTML page does no makes sense.

@FagnerMartinsBrack As long as it's under 1 KB, I guess I'm ok with it being unminified.

@drublic

This comment has been minimized.

Copy link
Member

commented Oct 8, 2013

The new version looks great to me. I'd say let's add it to v5.0.0.

@mikealmond

This comment has been minimized.

Copy link
Contributor

commented Oct 8, 2013

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.
   -->
@patrickkettner

This comment has been minimized.

Copy link
Contributor

commented Oct 8, 2013

Quick check with browserstack says yep, even ie 11 -

http://www.404-error-page.com/404-error-page-too-short-problem-microsoft-ie.shtml

@alrra

This comment has been minimized.

Copy link
Member Author

commented Oct 8, 2013

@mikealmond @patrickkettner good catch, thanks! I've update the page. :)

@sindresorhus

This comment has been minimized.

Copy link
Member

commented Oct 8, 2013

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.

@sindresorhus

View changes

404.html Outdated
p {
line-height: 1.2
}
@media only screen and (max-width: 270px){

This comment has been minimized.

Copy link
@sindresorhus

sindresorhus Oct 8, 2013

Member

270px) {

Redesign 404 page
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.

@alrra alrra merged commit 782aefa into v5.0.0 Oct 12, 2013

@alrra alrra deleted the 404 branch Oct 12, 2013

@alrra

This comment has been minimized.

Copy link
Member Author

commented Oct 12, 2013

Thanks for all the feedback!

alrra added a commit that referenced this pull request Jan 7, 2014

Update `404.html`
* 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.

@alrra alrra referenced this pull request Jan 7, 2014

Merged

Redesign 404 page #202

kcmckell added a commit to kcmckell/html5-boilerplate that referenced this pull request Feb 25, 2014

Redesign 404 page
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.

kcmckell added a commit to kcmckell/html5-boilerplate that referenced this pull request Feb 25, 2014

Update `404.html`
* 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.

alrra added a commit that referenced this pull request Mar 20, 2014

Redesign 404 page
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.

alrra added a commit that referenced this pull request Mar 20, 2014

Update `404.html`
* 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.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.