![]() Vector graphics use lines, points, and polygons to represent an image.Raster images should be used for complex scenes with lots of irregular shapes and details.Vector images are zoom and resolution-independent.Vector images are ideal for images that consist of geometric shapes.Use web fonts instead of encoding text in images.Automate, automate, automate: invest into automated tools and infrastructure that will ensure that all of your image assets are always optimized.Pay close to attention to large images in particular, as they account for largest overhead when resized! Serve scaled images: resize images on the server and ensure that the “display” size is as close as possible to the “natural” size of the image.Use appropriate tools to strip this data. Remove unnecessary image metadata: many raster images contain unnecessary metadata about the asset: geo information, camera information, and so on.Experiment with optimal quality settings for raster formats: don’t be afraid to dial down the “quality” settings, the results are often very good and byte savings are significant.Pick best raster image format: determine your functional requirements and select the one that suits each particular asset.Minify and compress SVG assets: XML markup produced by most drawing applications often contains unnecessary metadata which can be removed ensure that your servers are configured to apply GZIP compression for SVG assets.Prefer vector formats: vector images are resolution and scale independent, which makes them a perfect fit for the multi-device and high-resolution world.In practice, GZIP performs best on text-based content, often achieving compression rates of as high as 70-90% for larger files.Īll modern browsers support and automatically negotiate GZIP compression for all HTTP requests.Ī quick and simple way to see GZIP in action is to open Chrome DevTools and inspect the “Size / Content” column in the Network panel: “Size” indicates the transfer size of the asset, and “Content” the uncompressed size of the asset. GZIP is a generic compressor that can be applied to any stream of bytes. The same library, but minified (removed comments, etc.) is about 3x smaller: ~100KB. We can keep the original page as our “development version” and then apply the steps above whenever we are ready to release the page on our website.Ĭase in point, the uncompressed development version of the JQuery library is now approaching ~300KB. Strip out all the whitespaces (tabs and spaces).Remove inefficient ways of defining CSS rules.Minification: preprocessing & context-specific optimizations Eliminating unnecessary data always yields the best results. Optimizing encoding and transfer size of text-based assetsĬompression is the process of encoding information using fewer bits. Determine if the resources are providing sufficient valueįor best results you should periodically inventory and revisit these questions for each and every asset on your pages.Measure the performance of each asset: its value and its technical performance.Inventory all own and third party assets on your pages.The fastest and best optimized resource is a resource not sent. Apply GZIP to compress the minified output.Apply content-specific optimizations first: CSS, JS, and HTML minifiers.Analysing Critical Rendering Path Performance.Optimizing encoding and transfer size of text-based assets.Google Developer - Critical Rendering Path.Udacity - Website Performance Optimization.Minimize the critical path length, like preload scanner.Minimize the number of critical bytes, like optimizing content efficiency, minify, compress and HTTP cache control.Minimize the number of critical resources, like optimizing CSS (inline, or specify media query), and optimizing JavaScript (defer execution). ![]() So I spent some time digging and learning, the things finally got clear.įor short, what’s the basic idea of web performance optimization? But all the knowledge are scattered, and the real mechanism, like the HTML rendering, seems like a mysterious process to me. ![]() Website Performance OptimizationĪfter several years working, I’ve learned many lessons like how to write HTML, how to minify and compress CSS and JavaScript files, where to put the CSS and JavaScript reference, how to do the cache control and etc.
0 Comments
Leave a Reply. |