This may be the worst article I have read in 2017. It's not just that it is incomplete, some of the advice goes in the exact opposite direction of the desired effect.
Okay, let's start with this, which always makes me want to scream. There are hundreds of articles on the web pleading with people to spreading this disinformation, and yet it persists.
For most Internet purposes, it used to be the case that you'd gain nothing by saving images in 300dpi resolution.
And you would LOSE NOTHING. Images on the web show at the resolution you set for your screen, not the DPI. This is one of my pet peeves when people talk about optimization.
Question: How much water do you need?
Answer: 1kg per liter
Question: How far is it to New York?
Answer: 70mph
Question: How far does this car travel on a tank of gas?
Answer: 32 mpg
Question: How big does this image need to be?
Answer: 300DPI
Arrgghhh. You can set the resolution to anything you want and for the most part it will change nothing. The display resolution will always be determined by the resolution of the monitor, not the resolution set in the metadata of the image, which generally only comes into play when you print something from a printer that has a wide range of available resolutions. This may come if pixel sizes continue to drop and we see 300DPI monitors, but generally it still doesn't matter, because of the difference between CSS pixels and physical pixels.
If you don't need transparency, there's no reason to use a png file. They're nearly always larger files than jpg files
Again, total BS. PNG and JPEG use completely different compression algorithms. The "messier" the image (photo of a field vs clean vector-based logo) the better jpg does and the worse png does, but the opposite is true as well.
PNG is basically like a zip file - it looks for repeated bits of code that are
exact matches and aggregates them. If you have a lot of exact matches, you'll get fantastic compression without any artifacts around letters. JPG works by liking for
similar pixels and aggregates them and as long as they are similar enough, you don't see the artifacts. But if you try this with anti-aliased text and you want high quality, JPG will be bigger unless the text is overlayed on a photo background.
Once you have your images set to the proper dimensions and file sizes, you can compress them to make them download even faster. For some files, gzip is the right choice, but gzip tends to make image files larger, rather than smaller. A good alternative is the online image compression tool, ShortPixel.
Mabye. If you have people uploading images without properly optimizing them manually in Photoshop, then this might help. But at the end of the day, JPG is JPG and Shortpixel and similar services will not compress them further in my experience. You'll get a sense of this in your Pagespeed or Lighthouse reports, but quite often when I go in and try to optimize to the level suggested, the quality falls below a clear visual threshhold. And often, it's just a few bytes and there are other optimizations that matter more.
Now, you can get benefits by converting to WebP and getting the same quality in a smaller package, but if you are already serious about optimizing, Shortpixel is probably going to be no help. In any case, every one of these I have tested has minimal effect unless people are uploading massively oversized images.
The beauty of vector graphics such as svg files is that they are very small files and they can be scaled up in size with no loss of quality from pixelation
Again, this needs to be tested. The more complex the vector, the less efficient SVG is. I have seen SVG images that weigh in a 4MB and which render perfectly fine at the size needed as a 30KB PNG. The designer and developer, buying into the "svg files... are very small files" thing didn't even check until I ran a Pagespeed report.
As with PNG vs JPG, there is no clear winner and sometimes SVG makes sense, and sometimes it doesn't, but you can't say "If it's a vector-based line drawing, use SVG." Sometimes SVG will be *massively* larger than the corresponding PNG (and BTW, this a case where PNG will almost always beat JPG).
JS, CSS and HTML can all be minified.... If you're running on WordPress ... go with an all-in-one plugin, like Autoptimize.
Yes. This will speed things up a lot. This helps a lot on WP. The equivalent is built into Drupal and put on steroids with AdvAgg and I believe you can do the same via Cloudflare on any site.
Finally, something that is not BS
Combine CSS and JS. You can eliminate several server calls by combining your CSS and JS files
Usually way more important than the previous, but this can break your site. All JS-driven functionality needs to get tested.
As mentioned, gzip isn't for use on image files, but on HTML and scripts, it works a treat! It removes all the superfluous comments, line-breaks and indents
Seriously?
? gzip does no such thing. gzip compresses text by finding similar strings and aggregating them and creating a shortcode representation that gets replaced with the full code on expansion. It is a lossless compression, so when decompressed, you have the same file you started with, including line breaks and comments.
Minification removes line breaks and comments...
Lazyloading is simply delaying the download of images until needed.
Yes. If possible. You can lazy load other resources or delay loading other resources. On one site where the client simply would not consider changing the front page, I delayed loading the navigation, which took the site from having a full 10 seconds of white screen as their stupid menu, which depending on render-blocking scripts, loaded.
Another method of reducing server calls is to avoid the use of inline CSS wherever practical.
What is he a doctor OF exactly? He has this exactly backwards. This should read "Another method of reducing server calls is to
promote the use of inline CSS ."
Inline CSS reduces the number of server calls because it is sent out in the initial HTML document. We don't do this all the time because it increases the payload of that initial document. But if you have a one-page site or you really want your site to be fast on first page load and don't care about optimizations for subsequent loads by the same user, then inline CSS will *reduce* the number of server calls.
Google officially recommends that you *DO* inline your critical path CSS so that CSS that renders above the fold content gets sent down the pipeline with the first response.
Buckworks and I had a discussion here recently about critical path CSS. See here
http://th3core.com/talk/web-development/css-shorthand-generator