How to Embed YouTube Videos without Increasing Page Load Time. Learn how to embed YouTube videos responsively and without increasing the page load time.
The embeds are light and mobile friendly and the YouTube player is loaded only when the user initiates the video playback. It is easy to embed a YouTube video but you’ll be surprised to know how much extra weight that embedded YouTube video can add to your web pages. The browser has to download about half a Mb of extra JavaScript files (see screenshot) for rendering the YouTube video player alone. And these files are downloaded even if the visitor never plays the embedded video. The embedded video not only increases the byte size of your web pages but the browser has to make multiple HTTP requests to render the video player.
Google+ uses a clever technique for embedding YouTube videos – it just embeds the thumbnail image of a YouTube video and the actual video player is loaded only when the user manually clicks the thumbnail. The video above is embedded using the same on-demand technique (demo). Improving UX Through Front-End Performance. Imagine you’re at an intersection waiting for your turn to walk across the street.
You push the button to call the walk signal, and you take out your phone. You want to accomplish one thing: maybe check your e-mail, add an item to your to-do list, or check Twitter. You have a limited amount of time to accomplish that one thing. That amount of time is how long users have to finish what they want to do on your site. And it matters. Adding half a second to a search results page can decrease traffic and ad revenues by 20 percent, according to a Google study.
Can you keep up? It’s time we make performance optimization a fundamental part of how we design, build, and test every single site we create—for every single device. Designing for performance#section1 Website performance starts with design. Not every design decision will favor performance. But sometimes, performance will win. My teammate at the time put all 26 images into a sprite, which: Coding for performance#section2.
How to lose weight (in the browser) 12 Steps to Sustainable Web Design. Hey, you’re a caring person.
You use a recycling bin, and you bicycle to work. In the past, you were also a bit smug about your job as a web designer as well. What you did (as opposed to those nasty tree-killer print designers), seemed soooooo good for the planet. However, these days we know that the web is not as green as once imagined. The Internet consumes several percent of the world’s electricity. Given this problem, what can you do about web sustainability? Step 1: Read the WPO standards 50% of sustainability is web efficiency. It’s time to check your own sites.. (URL hidden to protect the guilty) Step 2: (Really) optimize your images JPEGS, while great at compressing photographic images, are hard to render. It’s also important to note that Photoshop doesn’t optimally compress images. Savings are typically in the range of 6-10%, which adds up to significant performance gains on complex sites. Step 3: Use CSS Sprites Step 4: Replace bitmaps with vectors Step 7: Validate your markup.
Best Practices for Speeding Up Your Web Site. The Exceptional Performance team has identified a number of best practices for making web pages fast.
The list includes 35 best practices divided into 7 categories. Minimize HTTP Requests tag: content 80% of the end-user response time is spent on the front-end. Most of this time is tied up in downloading all the components in the page: images, stylesheets, scripts, Flash, etc. One way to reduce the number of components in the page is to simplify the page's design. Combined files are a way to reduce the number of HTTP requests by combining all scripts into a single script, and similarly combining all CSS into a single stylesheet.
CSS Sprites are the preferred method for reducing the number of image requests. Image maps combine multiple images into a single image. Inline images use the data: URL scheme to embed the image data in the actual page. Reducing the number of HTTP requests in your page is the place to start. Top | discuss this rule Use a Content Delivery Network tag: server tag: css. Web Performance Best Practices - Make the Web Faster.