Editing source code Wordpress

PageSpeed insights

[Rookie Pookie]

When I go to PageSpeed Insights I see my site is very quick on PC and fairly slow on mobile. I need to be able to edit the source code, I think, which you see when you rightclick an empty space in a webpage and hit view source. For example, I see a CLS of 0.888 for mobile just because of a line:
<div class="hfeed site" id="page"> (I don't have a clue why this makes the layout shift by the way)
The website is still young and I can make some errors here and there by editing directly into the code. But I don't know how to get access to the source code for editing, I can only view it. Where is this source code located? Is it a file somewhere?

I also want to get rid of pagead2.googlesyndication.com in my code, and I presume I need to manually remove some lines, as I need Google Adsense to look for Keywords. But maybe somebody knows an easier way to get rid of these Google delayscripts that slow down my mobilefriendliness.

I can ask many more questions, but when I get access to the source code, I think for now I got enough to do.

A nice day to all.

[NickMNS]

<div class="hfeed site" id="page"> (I don't have a clue why this makes the layout shift by the way)

Layout shift is caused when an element changes sizes after it has been previously rendered. Vertical size changes don't matter provided they do not cause other elements to be pushed down. The typical causes is when content is loaded after an initial page render, this often caused by ads*. It can also be caused by the use of non-standard/default fonts. Often text is rendered with a default font, then when the non-standard font is loaded, the block of text is rendered with the desired font. If the spacing of the letters varies between the two fonts it can cause the text to add or remove lines thus causing a re-flow.

I also want to get rid of pagead2.googlesyndication.com in my code,

If you remove this code your ads will no longer display. The best you can do is to lazy load the ads, but that is a complex task.

as I need Google Adsense to look for Keywords.

What? Can you explain what you mean. Are you confusing Adsense and Adwords?

* often caused by ads:
I have noticed after some recent research that the Adsense code sets the height of the ad div before the ad is fetched and rendered, so I have not seen Adsense ads causing this issue. But if you are using ads from other networks this is likely a problem. But note that it can caused by any content that is delivered to the page "late" due to fetch requests (AJAX) or network delays.

[not2easy]

Hi Rookie Pookie and welcome to WebmasterWorld [webmasterworld.com]

If you have a WordPress site, it is not as simple as editing the source code because WP is not built on static HTML at all. WP is a series of pieces of .php code that generates various sections or elements of a viewable page using PHP and based on a sql database for the content of each "page". The source code for any WP page shows as HTML but it is dynamically created as the page is built and does not exist anywhere that could be edited.

There is a 'header.php' file, for example that contains the php code to create the header of the page but editing it (unless you are conversant in php and understand the consequences of your edits) will likely break the site and will be overwritten on the next WP update. The default header.php file does not contain anything related to AdSense. Same thing with all of the WP default .php files.

WP is intended to offer a way for people to create a website without learning html and css but without those skills you're limited to the WP templates of your theme. If you did not add AdSense code to your site you should not have it. If you do see AdSense code in your pagesource, look into Appearance > Widgets or Appearance > Menus to find and remove it. It may possibly be added with some plugin.

If you actually have an AdSense account and want to show ads, then leave it alone, the slowdown is 'normal' and universal with AdSense. If speed is more important than ads, remove the code.

I'm as curious as NickMNS about how AdSense is a help for keywords. That does sound more like 'AdWords' or Google Ads.

[Rookie Pookie]

Thank you.
I need the Keyword Planner from Google Ads indeed. My name tells you a lot ;) I don't need Adsense, my site just started, but I do need to look up keywords to create pages.
At least I am no longer looking for ghosts, now I know you cannot edit the source code. I guess I'll look up some book or course on CSS and PHP, any suggestions on free courses would be helpful. I need to have at least some basic skills in it, as I am planning more sites. I used to make websites in HTML but I switched to Wordpress because of plugins doing massive work for you.
I'll take a look at your suggestions and see if I can at least remove some problems with my new knowledge. Will let you know.

[NickMNS]

I need the Keyword Planner from Google Ads indeed. My name tells you a lot ;) I don't need Adsense, my site just started

AdSense and Google Ads are two completely different things. You only need Adsense if you are showing/selling ads, if you are not the definitely remove the code from your page.

...but I do need to look up keywords to create pages.

The concept of keyword is dead, there can be many iteration of words or terms that can be interpreted by Google to be the same thing, and the there can be a specific word that can have many meaning depending on context and/or user intent. There is no need to include all iterations of a keyword, or a specific keyword in your content to receive traffic for a given topic. Assuming of course that your page is about that topic. I often get traffic for keywords that do not appear anywhere on my website, but that are directly related to my topic.

Example if you have a webpage about "green cars", and a user searches for "green automobiles" then you will likely rank for that term. Whereas, if your website is about the green color cars, has a an h1 tag "Green Cars" and then a user searches for "green cars" but with the intent on finding information about environmental cars then despite the fact that your website uses the term "Green Car" you are not likely rank for the "keyword". Note: intent is determined by a searchers history among other factors.

Writing content based on a "keyword" is likely less than optimal. For best results content should be written in natural language for humans by humans and about a specific topic.

[Rookie Pookie]

Unfortunately I write pages about a popular item. So probably I won't get noticed any time soon. But hey, it is a practice site. I do need to start getting visitors for this site just because if I write a selling website I need to know how to get traffic. So I search for keywords because I need to know how many times people search for a long tail keywords with low competition, like 10-200 searches a month. I write solely for visitors, but without a search on Google for what I offer I get 0 visitors for sure, like I have now :P
Looks like there's a killer on the road. I see Adsense ducking. Oh well, he's a robot anyways. Thank you for thinking with me.

[NickMNS]

long tail keywords with low competition, like 10-200 searches a month.

First the term long tail, means that the keyword appears in the tail of the distribution, in other words it is by definition "rarely searched". Long tail does not mean that the the search term has many words.
[en.wikipedia.org...]

You are making an assumption (a common one) that competition among ad-buyers for a "keyword" somehow relates to your ability to rank for that term. But this assumption doesn't hold. Given that "ads" are sold based on "keywords" it is rarely profitable for these buyers to focus on keywords with low search volumes. But, this provides no information on how easy or not easy it is to rank organically for that low volume "keyword". Given what I wrote in my post above, there is really no reason for Google to treat a less common keyword any different than a more frequently searched one, assuming of course that the meaning and intent of the those keywords are the same.

Thus writing a blog post about "how to paint your car lime green" instead of "how to paint your car green" simply because the "lime green" version has "less competition" is pointless. Google will likely point users for both those keywords to the same place unless there is some really compelling reason to show different content for the "lime" specifier. Writing content specific to "lime green" where there is no reason for it will likely hurt you more than help you.

[Rookie Pookie]

I got few illusions, if I got competition from sites that are around a decade or more, that got 200 pages and endless information I will never rank on short and wide keywords, like "car".

[martinibuster]

>>>now I know you cannot edit the source code.

Making big changes to WP may require creating a child theme and a child function.php file, plus associated css files, etc. For that you'll need to know a little bit about hacking php files.

At the beginning of the year WP Rocket redesigned their site using Gutenberg blocks and they wrote an interesting article detailing what they went through to obtain better page speeds.

WP has subsequently improved Gutenberg and is soon going to release one that is more complete than it was in January 2021.

Here's the WP Rocket article:
[wp-rocket.me...]

And this is the PageSpeed Insights results for that article:
[tinyurl.com...]

[Rookie Pookie]

"AdSense and Google Ads are two completely different things. You only need Adsense if you are showing/selling ads, if you are not the definitely remove the code from your page."

I am often just sitting in front of my screen pondering how you do a thing, in fact I spend way less on creating content than on trying to get how Wordpress works. Removing code from a page is something I don't know how to. If this was in HTML it would be easy, simply remove the lines from the code. But as this is in WP I haven't got a clue how to. When PageSpeed Insights tells me to change something it all sounds like Abracadabra to me and so I go on a reading spree again, in the end having read a ton and changed nothing.

I do work with a child theme, as I don't want to make changes and then when an update comes all my hard work is gone. I know being a webmaster is a trade, but right now I'm in a doubt if the great plugins from Wordpress are really worth the effort of endless reading up and getting nowhere. I do suppose that I will stick to WP, but getting the base in my head that goes further than just creating pages and blogs is wearing me out. I feel that I got way too little control over what's getting "dumped" into my pages and I don't like that. I want to feel in total control. Any suggestions to complete that goal?

[Rookie Pookie]

I just looked at Chrome Dev Tools. This seems to do just about what I wanted and more. I read this story: (not sure if I can use external links) <nope> When you go there it highlights what section you are editing - code right, website page left - and you can see live what would happen if you change the code. I guess I need to have a book on CSS and PHP and I would be basically good to go, I hope. Only thing I wonder is if I start changing code there if the website doesn't become broken somehow. Does anyone use these DevTools by Chrome or other browser? And does it work well with Wordpress?

[edited by: not2easy at 5:58 pm (utc) on Jul 1, 2021]
[edit reason] Please see ToS [webmasterworld.com] [/edit]

[martinibuster]

Chrome dev tools is kind of inappropriate for what you said you want to do. It's great if you want to edit CSS files but not for the WP core edits you want to do to improve page speed. There is some page speed information available there with regard to javascript and css and render blocking but a lot of that information is also provided by PageSpeed Insights, too.

But it does NOT tell you what part of the core PHP files are responsible.

Chrome Dev Tools does not see which php file is responsible for the section you want to change. It just shows you the place in the raw HTML that it is, but NOT the underlying PHP code that precedes that.

The HTML is just the final product of all the php files parts behind the scenes that go into building all the different parts that make up a web page.

[not2easy]

Most common browsers offer dev tools for editing and finding things to edit. However, what you see in Dev Tools is a representation of the finished product, the page that is produced when the PHP elements interact with the database. Editing in dev tools will not fix problems such as removing the AdSense code - though IF the problems were with your css it could help. If you want to get an idea of what those PHP elements look like, you can download them from your site to your desktop and take a look using text editing tools as you would for css and html.

If you click that Welcome link above, you can see how to edit your post and add in styling such as

quotes

It also explains where to find out the topics covered in each forum and what is acceptable to post. That blog selling courses is not appropriate here - and it is dated 2014, before most of today's mobile friendly coding was important. I'm sure their courses have been updated since then, but things like dev tools have been around for a long time and aren't relevant to this topic.

There are places to go to learn more about coding, both paid and free DIY learning. For example, w3schools is free, Mozilla Developers is free. The WebmasterWorld forums don't offer tutorials, though we're happy to help you solve problems.

[not2easy]

I feel that I got way too little control over what's getting "dumped" into my pages and I don't like that. I want to feel in total control. Any suggestions to complete that goal?

Don't rely heavily on plugins. Use only what you need to do what you need to do and only use plugins from the WP plugins Repository after you investigate their history and reviews. Keep everything up to date. Old themes and old plugins are a security risk.

[Kendo]

Keep everything up to date.

If using WordPress that will mean that any customization will be lost when you update WordPress.

[not2easy]

Yes, editing WP core files is not a recommended practice for that reason, plus it can break the functionality of plugins. I just thought that by the time the OP is ready and able to edit any WP files that they would understand and avoid the risks. Using a child theme will not protect your custom WP files, only your customized theme.

I do not suggest that editing the WP files is a smart thing to do, but if you understand what you are doing you also understand that you would need to rework your custom files after every WP update and to ensure that all your plugins are functional when updating. A WP plugin listed as "tested up to WP 5.7" has not been tested on your customized build. It is always better to use a customized functions.php file than to edit WP default build .php files.

In the meantime it is important not to over-rely on plugins and to keep all of it up to date.