For JPEG images, you can give a try to WebP.

You can use the loading="lazy" attribute on <img tag.

You can also load the adsense code, once the page is finished loading.

I came to recommend mod_pagespeed, but I see that you've already done that. I had to force it to exclude PNG and CSS, though, because it was causing problems with some browsers.

You'll also want to configure Apache warnings to "warn" level. I had mine set to "info" and the error log was over 1G each day! Mostly with warnings that it couldn't rewrite PNG and CSS files.

I don't know if this will affect "scores", but it helped my user experience... I moved a lot of things that were below the fold or not critical to Ajax scripts, and controlled the order in which they load. So the initial page and above the fold content loads in about 400ms, and lower stuff can wait a second.

I came to recommend mod_pagespeed, but I see that you've already done that.

buckworks was actually using PageSpeed Insights [pagespeed.web.dev] in Chrome to find areas for improvement.
Apache's mod_pagespeed [modpagespeed.com] will solve many of the issues reported in PageSpeed Insights but isn't necessary to do so.

Ohhhhh, I misunderstood. My bad.

In that case, look in to installing mod_pagespeed. It sped up my pages by about 500ms... which may seem insignificant, but in the grand scheme of things it was a minor thing to install and set up so why not?

It sped up my pages by about 500ms... which may seem insignificant, but in the grand scheme of things it was a minor thing to install and set up so why not?

i can assure you it is possible to get that 500ms savings without using mod_pagespeed.
while it works well for some, the all-in-one solution may not be optimal for all.

Agreed, I had to fine tune mine a bit because it was making things load out of order, and sometimes images would just break entirely. But overall I think it was faster than manually making changes throughout.

As for -

CSS: one thing I did was load CSS in the header on the first pageview, then loaded a separate stylesheet in the footer. Then I set a cookie at the footer via Ajax (to make sure it's done last), and on subsequent pages I checked for that cookie; if it exists then PHP doesn't print the CSS in the header again.

Fonts: I don't use Google Fonts at all, I just stick with the standards. But in your case, keep in mind that the user probably has Google Fonts in their cache from a previous site, anyway, so there's a good chance that it would still load faster than you doing it manually on your end.

Is there a way to see if Google Fonts is in their cache before trying to load it manually? I dunno, but it might be worth investigating.

Do you know where your bottlenecks are, or are you just throwing things at the wall to see what sticks? That's what I did (seeing what sticks, I mean). I probably did a lot of unnecessary work, but that method helped me shave 100ms here, 75ms there until it all added up to become relevant.

>> throwing things at the wall

Yes, mainly guided by PageSpeed and GTMetrix.

I'm a marketer, far more than a techie. The things I know are quite limited compared to some folks around here, but I muddle forward.

Since this thread started I have learned about the <picture> tag in HTML5 and have started using it in some places to serve smaller images for smaller screen sizes. That seems to please PageSpeed.

Someone cautioned me that using <picture> to serve different images is good for the user experience but can be crazy-making for the developer to come up with suitable images. Point noted!

Also be sure to check that HTML5 is backwards compatible with browsers that frequent your site. I have amount of traffic using older browsers, so I'm pretty limited on the cool new tags.

[caniuse.com...]

Not working with IE at all makes <picture> unusable for me :-(

Also be sure to check that HTML5 is backwards compatible with browsers that frequent your site.

The information from caniuse is not wrong but it is misleading. The picture tag itself is not supported by IE, but the tag should include an <img> tag that acts as a fallback and that would work in IE. So you can use the <picture> tag in IE you just would gain any benefit, but all your users that use modern browsers will see the benefit.

The <img> element serves two purposes:
It describes the size and other attributes of the image and its presentation.
It provides a fallback in case none of the offered <source> elements are able to provide a usable image.

[developer.mozilla.org...]

You can use the loading="lazy" attribute on <img tag.

I found that lazyload doesn't help page speed calcs because the images are still included in the load time.

Text may appear faster, but unless there are placeholders, the page shifting as images appear can be annoying.

Or are others finding that to be different?

I found that lazyload doesn't help page speed calcs because the images are still included in the load time.

The loading="lazy" attribute only has an effect on images that would be loaded outside the initial viewport, i.e. below the fold. Well, a little further down than that actually, there's a variable threshold to ensure that the user does not notice the lazy-loading process (the image is loaded when the user scrolls to a position close to the image). So it does not lazy-load all images.

Ideally you should not apply loading="lazy" to images that appear above the fold (use loading="eager" instead), there's a very small performance degradation involved because the browser first needs to calculate where the image is to appear on the page.

>> but can be crazy-making for the developer to come up with suitable images. Point noted!

not at all, i process all my images in photoshop, i'm not a photoshop expert but it is not difficult to set up an action that will create multiple (different sized) images from each original image ... and you can do a folder at a time at the click of a button. (any developer that says otherwise is giving you the BS)

it does take some time to tweak the action to your needs and what looks good - but once done, it requires little to no updating.

photoshop is incredibly powerful for doing stuff like that, and i'm still using cs5 ... doubtless the newer versions are even better.

i process all my images in photoshop, ... any developer that says otherwise is giving you the BS

I am dev and I have never touched Photoshop, that is the roll of a graphic designer. I actually do everything, since I'm a one man show, if I needed to, I would actually do it. But the point is that Photoshop is typically used by graphic designers. Then again I would likely write a script in Python to resize the images, but that just me... it's probably faster too.

That said there are likely on-line tools to do this too. I have used some that are were specific for creating various image sizes and formats for icons (because god forbid that Apple, Google et al. could decide on single image format for an icon image).

Then again I would likely write a script in Python to resize the images, but that just me...

Same here, excepting that I use PHP.

By the way, an alternative to raster images, is SVG, this might not be suitable for everything, of course, but a lot can be done with a fraction of the szte of a bitmap.

Then there is `jpegoptim --strip-all -m75` and `optipng -strip -o7` to remove unnecessary meta data from the images and do compression.
Review these and other options of these two utilities, if you haven't yet used them.

man jpegoptim
man optipng

One affiliate banner which was over 80k when retrieved from Shareasale was 16k after he worked on it and I can see no difference in how it looks.

This might be a result of the resolution of your computer screen being lower than the resolution of the compressed image.

For example, if your screen's resolution is 200 pixels per inch, then an image with a compressed resolution of 300 pixels per inch will be hard to distinguish from an original of 600 pixels per inch. But the download size will be reduced by a factor of 4.

It's been years since I did any work on images, but recall that their visual impact can often be enhanced by adjusting the contrast and color saturation. I also found that these adjustments should be made to the original before compressing it.

Do your old pages require updates? Can you replace comments with a 3rd party comment system if you allow them? Is the site wordpress based?

If so the biggest speed boost you'll see is by literally removing wordpress and serving each article in pure html. Just the act of not needing a database will yield some speed increases. You can use a flat-file database to serve up calls for ads or javascript from one file onto many pages.

Bonus: Less maintenance, less security risk and a lot less load on your web host. Wordpress is great but it has a lot of stuff you're probably not using and even with a cache plugin it has to load wordpress. To truly go fast go static and lose the CMS itself.

Then join a help group - you lose a lot of helpful functionality, lol. Not recommended unless you started building sites old-school style two decades ago. If that's you the auto-code help in wordpress has probably already driven you nuts :)

I also focused on achieving high speed delivery and covered the points you describe on your original post. Then reaching a limit, I'm happy where my sites are right now, stopped "caring".

Yes I'm caching a lot of content with diverse expiration dates, it made the sites amazingly fast. Yes, some speed services will complain as they insist everything should be directly included on your webpage, instead of linked. Yes, I reduced requests as much as possible, it does have impact on performance, same as cookies, you probably know this already, but if you use cookies, data is being read and sent on every request. Yes, I also decided to remove stuff to make the websites faster, like some js functions and services, yes, removing external fonts is the way to go.

Images... that's a difficult one. Specially with Google Insights as they insist on service precisely cropped final size images for every different screen size layout, sorry but nope, this would be easily to do with a custom CMS adding parameters to the image and having a script cropping them, yes I have a custom CMS but I'm not interested on doing this.

URL shortening. Nope, I didn't do this, why? SEO, I prefer my own human/seo like urls.
Open graph. Nope. My best improvements came when I got rid of Facebook or any other social media integration, I see no real negative impact after this, just improvement.

Ohhh yes. I also removed Google Adsense for a while, added a general function to my CMS so I can just turn it on and off when needed, websites are amazingly fast and better without it. BTW, regarding FB, the amount of stuff it adds to the pages is insane.

Also, I offer compressed pages removing all the duplicated spaces or tabs, it's an on/off option. And there is a cache version too, so there is no page being built, instead, it will be built just once and stored to serve way faster than any db request and data parsing until X criteria and so it expires and it's built again.

On GT Metrix I'm on A / 98% / 97%, and just like any other speed service, it gets better when I turn off Adsense. The thing with Ads... it will have different impact each time you check depending on what ad is served, and how.