{"id":9658,"date":"2022-11-20T14:27:02","date_gmt":"2022-11-20T14:27:02","guid":{"rendered":"https:\/\/stevepedwards.today\/DebianAdmin\/?p=9467"},"modified":"2023-11-26T03:02:11","modified_gmt":"2023-11-26T03:02:11","slug":"first-site-pages-speed-and-seo-tweaks","status":"publish","type":"post","link":"https:\/\/stevepedwards.today\/DebianAdmin\/first-site-pages-speed-and-seo-tweaks\/","title":{"rendered":"First Site Pages Speed and SEO Tweaks"},"content":{"rendered":"
<\/div>\n

<\/path><\/svg><\/i> \"Loading\"<\/p>\n

<\/div>\n

My new sites - the Landing Page, Debian Admin and Electronics Stuff pages once functional, were tested initially in PageSpeed Insights to get a feel for performance jargon and some suggestions, then finding some things I needed to test in DevTools in Chrome (F12 key) and PageSpeed Insights.<\/p>\n

Changing .png images to Webp and adding a favicon for different platforms as suggested from the summaries of Pagespeed and starting with those I could create without much trouble or knowledge, which were changing the book cover .png images on my Landing Page to webp using a free web converter.<\/p>\n

Dev-Tools then also complained that my favicon.ico wasn't square - as it's circular - so I re-scanned it with the Win11 Snipping Tool rectangle mode:<\/p>\n

\"\"<\/a><\/p>\n

Once all the required favicon types were generated for different platforms (Apple, Chrome etc) from the online converter tool, I uploaded the zip file to my site's cPanel and changed the HTML for each site to include these files and delete the .png images.<\/p>\n

<link rel=\"apple-touch-icon\" sizes=\"76x76\" href=\"\/favicon_package_v0.16\/apple-touch-icon.png\">\r\n<link rel=\"icon\" type=\"image\/png\" sizes=\"32x32\" href=\"\/favicon_package_v0.16\/favicon-32x32.png\">\r\n<link rel=\"icon\" type=\"image\/png\" sizes=\"16x16\" href=\"\/favicon_package_v0.16\/favicon-16x16.png\">\r\n<!--<link rel=\"manifest\" href=\"\/favicon_package_v0.16\/site.webmanifest\">-->\r\n<link rel=\"mask-icon\" href=\"\/favicon_package_v0.16\/safari-pinned-tab.png\" color=\"#5bbad5\"><\/pre>\n
Before changing the HTML, I took Lighthouse Performance and Network load values in Chrome DevTools that showed load times for the .png images:<\/p>\n
\"\"<\/a><\/p>\n
\"\"<\/a><\/p>\n
After changing the head HTML to include the new webp images to replaces the .png images and add a favicon:<\/p>\n
<head>\r\n    <meta charset=\"UTF-8\">\r\n    <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\r\n    <meta name=\"IT, WEB DEV, Javascript, programming, linux, admin, ubuntu, mint\">\r\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n    <title>Landing Page<\/title>\r\n<link rel=\"apple-touch-icon\" sizes=\"76x76\" href=\"\/favicon_package_v0.16\/apple-touch-icon.png\">\r\n<link rel=\"icon\" type=\"image\/png\" sizes=\"32x32\" href=\"\/favicon_package_v0.16\/favicon-32x32.png\">\r\n<link rel=\"icon\" type=\"image\/png\" sizes=\"16x16\" href=\"\/favicon_package_v0.16\/favicon-16x16.png\">\r\n<!--<link rel=\"manifest\" href=\"\/favicon_package_v0.16\/site.webmanifest\">-->\r\n<link rel=\"mask-icon\" href=\"\/favicon_package_v0.16\/safari-pinned-tab.png\" color=\"#5bbad5\">\r\n<meta name=\"msapplication-TileColor\" content=\"#da532c\">\r\n<meta name=\"theme-color\" content=\"#ffffff\">\r\n    <link rel=\"stylesheet\" href=\"styles.css\">\r\n<\/head><\/pre>\n
I re-ran the Lighthouse and Network tests in Incognito mode to prevent any prior cache issues affecting the results from before (cahcing is the biggest pain in the ass for web dev page testing - especially on a phone as you have to clear the damn cache in Android Chrome browser Settings EVERY page reload, as a refresh does not clear the page cache.)<\/p>\n
The webp image results after:<\/p>\n
\"\"<\/a><\/p>\n
 <\/p>\n
\"\"<\/a><\/p>\n
A performance increase, but best practices decrease!? The load times for the webp images are a huge decrease!<\/p>\n
420msec to 150msecs for the Valves.png image over the .png!<\/p>\n
This infers that it would be best to install a webp converter plugin such as I have de-activated at present in my sites. I'll find some pic laden page, take some Network load times, then switch in the webp Plugin and see the difference...this Post should be good as it has a monetised video also with many images to do some fault finding with.<\/p>\n
Laney Klipp 100W Repair and Design Study \u2013 Part 1<\/a><\/h1>\n
Best to look at some initial faults too before starting, but I won't change http to http site wide using Better Search and Relace Plugin just yet, as I want to see the difference JUST the image changes from .jpg, .gif and .png files to webp that occur (if any?!) with the EWWW Image Optimizer Plugin.<\/strong><\/p>\n
\"\"<\/a><\/p>\n
Now I'll check the Network load times:<\/p>\n
\"\"<\/a><\/p>\n
Load time 3.58secs.<\/p>\n
Now I'll run Lighthouse - eww, terrible:<\/p>\n
\"\"<\/a><\/p>\n
I'll switch on EWWW webp plugin and re-run:<\/p>\n
\"\"<\/a><\/p>\n
\"\"<\/a><\/p>\n
\"\"<\/a><\/p>\n
\"\"<\/a><\/p>\n
Terrible result!<\/p>\n
\"\"<\/a><\/p>\n
Ahh, you MUST use Incognito mode to remove Chrome Extension effects...so Lighthouse Basline:<\/p>\n
\"\"<\/a><\/p>\n
Network times:<\/p>\n
\"\"<\/a><\/p>\n
Load time decrese to 1.36 secs over non EWWW plugin load time 3.58secs a 2.6 times increase in load speed!<\/p>\n
Now I'll change the whole site \"http\" to \"http\" using the Search\/Replace plugin to try remove the cautions.<\/p>\n
Hmm, odd - they've disappeared but replaced by settimeout handler warnings in Chrome, but that's due to Adblock Extension...<\/p>\n
\"\"<\/a><\/p>\n
...but I need to check Incognito mode to remove the Extensions effects - all clean - good:<\/p>\n
\"\"<\/a><\/p>\n
29 \/ 58 requests<\/div>\n
<\/div>\n
231\u00a0kB \/ 641\u00a0kB transferred<\/div>\n
<\/div>\n
235\u00a0kB \/ 1.5\u00a0MB resources<\/div>\n
<\/div>\n
Finish: 1.50\u00a0s<\/div>\n
<\/div>\n
DOMContentLoaded: 704\u00a0ms<\/div>\n
<\/div>\n
Load: 1.36\u00a0s<\/span><\/strong><\/div>\n
<\/div>\n
So, EWWW plugin makes an big improvemnet but will only give you 30% potential as it states in the free version. Is it worth trying another webp Plugin? Of course, if a plugin wants money for extra functionality, then it implies things can be much better - maybe for free?<\/div>\n
<\/div>\n
\n
\"How do I get to 100%?<\/strong><\/em><\/p>\n