Building smart websites for small businesses

Tag: browsers

1 to 10 of 51 posts tagged with browsersview tags

Faster websites with HTTP/2

Since Google paved the way for HTTP/2 with SPDY, the future is looking brighter for web developers. HTTP/2, the new protocol that will replace HTTP/1.1 (which was published in 1999) will help to make websites load faster while bringing an extra layer of security.

Although not a requirement, ensuring your website uses Transport Layer Security (TLS) is the recommendation given by Rachel Andrew in her article Getting Ready For HTTP/2: A Guide For Web Designers And Developers. As well as gaining an extra notch on Google's indexing radar, it means your website content (and any form submissions from your site) will be done so securely by encrypting the data passing between your server and the site visitor.

Multiple Simultaneous Requests

The real benefits of HTTP/2 though appear to be in the delivery of multiple simultaneous requests. The new multiplexing ability of HTTP/2 means that content-blocking requests, like images, CSS and JavaScript could be a thing of the past. Instead of worrying about the time it takes to load numerous images, this new protocol handles everything simultaneously. As Andrew says: HTTP requests are cheap in the world of HTTP/2.

The implications of this though, move outside the realm of our current best practises. For example, rather than compress all our site JavaScript into one file and let the end user download and cache it, it might be a better solution to load only the JavaScript needed for a particular page. Likewise with images and style sheets.

Switch to HTTP/2 today?

Two things are required to start using HTTP/2 today:

  1. Your server needs to provide the software that supports HTTP/2
  2. The browsers your website visitors use need to support HTTP/2 *

* shouldn't be a hurdle as all major browsers support the new protocol.

Further reading

Daniel Sternberg has written a useful looking free ebook called http2 explained which goes into all the details you need to know.

In The Future of Loading CSS, Jake Archibald takes a look at how best to load CSS. Up to now, as CSS normally blocks page rendering, we've usually combined all styles into one file and loaded them after the main content has been downloaded. However, an update to the Chrome browser, bringing it into line with Microsoft's Edge browser, could help to change CSS loading best practise. The general idea is that we load multiple smaller CSS files that in turn render the content that directly follows it, resulting in a more progessive page render.

As more websites make the transition to delivering their content securely and encrypted, this SSL Server Test could prove to be a very useful service for assessing the quality of your secure certificate.

 

If this list over at statusIE is anything to go by, then it's clear to see that web browsers are becoming extremely complex pieces of software. A few developments that sound intriguing are Box Alignment, CSS Calc, CSS Intrinsic Sizing, CSS Variables, Drag and Drop Directories, HTML Imports, <img srcset>, Masks, <picture> Element, Shapes, Web SQL Database, WebP image format support, and all the Canvas protocols. Lots to get excited about.

What's My Browser is a handy way to gather useful debug information about an end-user's browsing set-up. Get them to visit the What's My Browser page and send you back the short URL to view their data. Collects info on things like operating system, screen and resolutions sizes and if cookies are enabled.

It sounds scary at first, permitting a third-party to track your movements when surfing the web, but cottonTracks takes your browsing habits and generates a useful summary, categorising your interests for handy retrieval later.

It's a browser extension available for Chrome and Opera.

An overview of the proposed HTML5 <picture> element. The new tag is designed to display a different resolution of image depending on the media type and screen width requesting it. By declaring three further <source> elements within the <picture> element, one for high-res, medium-res and low-res, the web browser then chooses which image to send. And for unsupported browsers, there's the default <img> tag as a fallback.

  1. accessibility
  2. social networking
  3. software
  4. security
  5. usability
  6. browsers
  7. email
  8. copywriting
  9. technical
  10. marketing
  11. seo
  12. ecommerce
  13. news
  14. law
  15. help
  16. business
  17. blog
  18. design
  19. analytics
  20. css
  21. mobile
  22. spam
  23. hardware
  24. cms
  25. domains
  26. fun
  27. brand
  28. misc
  29. social media
  30. advertising
  31. blogging
  32. podcast
  33. typography
  34. privacy
  35. services
  36. clients
  37. rss

©Doepud 2006–2017. All rights reserved.