j09

@iromprey you’ll get the hang of it in no time.

The page I linked to is more on the techie side. You don’t need to know any of those things. I just added it for reference.

No, PNG files are no good. PNG files are much bigger.

What lossless means is that png files won’t degrade in quality every time you save them. JPEG files degrade in quality every single time you save them.

Ideally what you want to do is create the images in PNG format while working on them then display them as JPEG once you have a final product.

You should never use PNG format photos unless you run a very high quality photography website where visuals matter that much.

For 99% of the cases slightly compressed JPEG files are the way to go.

Prior to your latest change your page size was slightly over 1MB. Now that you’re using PNG files your page size is over 4MB.

Here are my recommended Ewww settings:

https://ibb.co/c2FaeF
https://ibb.co/n5sz6v
https://ibb.co/iE9OYa
https://ibb.co/isnozF
https://ibb.co/jZdveF

Go back to JPEG photos then regenerate the thumbnails then run bulk-optimize and try google one more time.

Once the images are ok, we can proceed to other things.

@iromprey

There are three things you need to understand about “above the fold” optimization.

1- Above the fold simply means what ever shows up on your screen before you scroll down.

2- CSS and JS files block rendering by default.

When a browser encounters a CSS or JS file above the fold – usually in the page header – it stops doing everything and focuses on downloading and reading/parsing the CSS or JS file it’s currently working on.

3- The way to eliminate that is to tell the browser to go ahead and continue downloading the rest of the page.

With JS files you can either async, defer, or simply move the files to the footer or anywhere below the fold. Again.

With CSS files, it’s a different story. removing render blocking CSS is more complicated.

I won’t go into too much detail, ask if you need clarification.

What Google wants is that users won’t have to wait long before something shows on their screens when they visit your website.

@iromprey No worries, happy to help.

Your images are still not optimized I just checked 30 minutes ago. You probably have to do a bit of reading into Ewww docs and support threads because something is off. I know Ewww works, it’s something on your end. You might want to try to regenerate the post thumbnails

No, you should not have to go through the images one by one, that is not very efficient once your website grows larger.

No problem @iromprey

No, you don’t need to use Compress.io at all. I only used it for reference.

Once you install Ewwww, it will automatically optimize any new images uploaded via the WordPress media image uploader according to the settings you set for it.

However, it will not be able do anything about images that have already been uploaded prior to the plugin installation. For those you need to run the bulk-optimize function once your finished setting it up. You can find the bulk-optimize option under the media tab in the admin side menu.

I don’t recommend using two plugins that serve the same function at the same time. Pick one and uninstall the other. Otherwise, you might run into conflicts.

Yes, WP super cache would work. Just go through their docs as they would explain anything better than I can.

let me know if you have any other question.

@iromprey

I don’t know if you’re interested in the long story so I’ll skip it for now.

Most of the issues will be handled if you install Autoptimize

There might be a few scripts that still need some work but Autoptimize will combine and minify most of your CSS and JS files.

As for the images, well, they are not optimized. This can be caused by any number of reasons which need more investigation.

I ran one of your images through Compress.io and it shows room for up 70% reduction in size.

I prefer Ewwww for image optimization. You need to let it bulk-optimize files that are already in your library once you install it.

You’re not serving cached static content. You should look into the many available caching.

serving pages without caching is equivalent to writing up an entire document on every request instead of serving a pre-saved copy of it.

Again, I didn’t want to add too many details here.

Ask if you need more information.

@elsbro

I came across this today. It appears google has made some changes on their end.

Google font josefin changed overnight

let me know if you need more help

@kyousefi

No problem. Glad you got it sorted out.

@kyousefi

You can use “broader” CSS selectors in that case.

For example [id*="multidisciplinary"] would select any element with a partial match for the word multidisciplinary in its id.

So, in your case you use

[id*="brandmarks"] .portfolio-entry:nth-of-type(n) {
    pointer-events: none;
}

to apply the CSS to any item that has the class .portfolio-entry which falls under any item with which contains the word brandmarks in its id – even if partially.

Let me know if you nee more help.

@kyousefi

You have three different tabs. Each of those tabs has a specific id.

We can use those ids to target items listed under each tab.

The ids for your tabs are

#multidisciplinary-59a6546b88de1
#brandmarks-59a6546ba4088
#advertisement-59a6546bd85dd

If you want to target the second and fourth item in the brandmarks tab you can use

#brandmarks-59a6546ba4088 .portfolio-entry:nth-of-type(2), 
#brandmarks-59a6546ba4088 .portfolio-entry:nth-of-type(4) {
    pointer-events: none;
}

and if you want to target the fifth item under the advertisement tab you use

#advertisement-59a6546bd85dd .portfolio-entry:nth-of-type(5) {
    pointer-events: none;
}

If you want to disable all links under the second tab you use

#brandmarks-59a6546ba4088 .portfolio-entry:nth-of-type(n) {
    pointer-events: none;
}

using (n) without specifying a number will select all items that match the selector

I hope that’s clear.

Let me know if you need more help.

• This reply was modified 7 years, 6 months ago by j09.
• This reply was modified 7 years, 6 months ago by j09.
• This reply was modified 7 years, 6 months ago by j09.

@kyousefi

You can use pointer-events

Say you want to disable clicking functioanlity on the entire portfolio item, then you use

.portfolio-entry:nth-of-type(n) {
    pointer-events: none;
}

Where (n) is the order number of the item you want to remove click functionality from.

If you want to disable #2 and #5 for example, you would use it like so:

.portfolio-entry:nth-of-type(2), .portfolio-entry:nth-of-type(5), {
    pointer-events: none;
}

Let me know if you need more help

@ketuchetan
@lawrenceagles

Thank you both for your replies, but that is not what I mean.

The images I’m referring to are fetched from w.org They are not my images.

I have no control over those images. the images need to be fixed by the WordPress team.

IT will just have to wait then. Thank you.

Just a side-note,

I hope you manage to fix the issue and that your database is fine.

However, if the the database turns out to be wiped, run your domain through the internet archive as you are more likely to find more of your old content there.

@family75

I see.

Well, thank you for your reply and thanks again for this great plugin. ??

Hello @dbushrod

try and see if this CSS code does the trick

.fl-page-bar {
    border-bottom: 0;
}

Let me know if you need more help