I am running a light wordpress installation, with a light theme (neve). I am running a CDN (cloudflare), I am making most optimizations that I can think of with some room around images and custom code stripping.
However I am not even close for my pages and even if I test AMP pages which are stripped down I don't get a passing score which concerns me. Can anyone help me out, for example 1 of my blog post pages:
Amp report:
https://pagespeed.web.dev/report?url=https%3A%2F%2Fwww.culturalistpress.com%2Fanycubic-photon-mono-3d-printer-is-it-good-what-materials-can-it-use-what-software-does-it-use-and-how-does-it-compare-to-the-anycubic-mega-series%2F%3Famp%3D1
Not amp report:
https://pagespeed.web.dev/report?url=https%3A%2F%2Fwww.culturalistpress.com%2Fanycubic-photon-mono-3d-printer-is-it-good-what-materials-can-it-use-what-software-does-it-use-and-how-does-it-compare-to-the-anycubic-mega-series%2F
In both cases my main thread processing is too much and too much JS - short of that I don't see a lot of savings. Most the JS comes from ads which I don't understand why they are blocking in this case.
I have checked your both reports, the man issue is with Javascript. As your website has developed in WordPress use some 3rd party plugin like WProcket and perfmatters to reduce unused Javascript. Your page DOM size, it is created when you have too many sections in your page. Try to reduce those sections to reduce the page size, minimize the gap between paragraphs.
Adjust the images size and try to use WEBP format of images. Also check the compatibility of third party plugins with you WordPress version which you have installed.
Related
I am working on a site that when going to the URL on desktop it seems like the content is loading first then the styles about a 1 second late that creates a kind of 'flashing' effect on each page,
The sections expand and then the background images are loaded next,
I am using the WPRocket plugin - does anybody know what the cause of this is likely to be?
I am not sure if I am allowed to include the domain,
Many thanks,
It is likely a case of Flash of unstyled content,
Wikipedia has a good breakdown.
procureure.com/types-de-droits
Here's how it looks via customize.php
Link
I was not doing any major changes. Cleared cache and changed stuff in customize.php but thats it.
I've been working for 2 straight days to get a decent gtmetrix score and overall design. Help would be greatly appreciated.
Just a quick note: GTmetrix score/ Pingdom or google page speed test
are just recommended approach and the speed they show does not
necessarily mean real world differences. Those scores do not cover the
complexity of code of the server side (which also delays the page load
time). So there are scenarios where you have to ignore few of the
recommendations to make sure everything works fine.
Although in your case i can see that there are no css on you page applied externally nor internally. Kindly tweak the css rendering settings to see if it works. The theme is working fine on customize.php because the changes do not affect the back end of the website it's only the front end which gets affected. So CSS are rendering on back end but not of the frontend. It maybe of theme issue if css are not enqueued properly. there can be serveral reasons. Switch to one of the default themes and see if the plugin is working properly. This will help you find out where exactly the problem exists.
Since google updated their way of scoring mobile I have trouble to optimise my websites.
I want to know what am I doing wrong and what should be done to existing sites to make the score higher. Its easy to get 95-100 on desktop but on same site on mobile will be 25...
Before someone says to follow suggestions by insights then I will say that I do and I managed to remove most of them - worst thing is that the score didn't move at all. This is the biggest struggle I have, it seems that whatever I do it wont be good enough...
I followed this guide https://kinsta.com/blog/google-pagespeed-insights/ + some of my own solutions.
Is there anyone that has any good tips or permanent solution for this issue?
Google Report
As evident from your Page Speed Insights report, the main factor responsible for your low score is images. The solution to this is using RESPONSIVE IMAGES, which will drastically improve the speed of your website on mobile. What it basically means is that, you'll have to keep different sizes of the same image available for the browser and browser will decide which version of the image is suited on a particular resolution.
1) Here's everything you need to know about Responsive Images --> Responsive Image (CSS Tricks)
2) You have to shift the <link href=".." .../> and <script> tags from top of the page to the bottom of the page, just after the <body> tag. This will fix the `Eliminate render blocking resources issue.
3) You can use Javascript Minifier to minify your JS. Just paste your existing JS code inside the Input Javascript box on the website and click MINIFY
Also, cache policy is also one of the factors, bringing your score down. An efficient Cache policy will make browsers, load your website faster, after the first load. Cache handling is server specific, its different for Apache, Express etc.
my site seems to be downloading very slowly. I recently changed the CSS and HTML to improve the layout, but I think I might have messed it up somehow.
Can anyone give me feedback on things I could do to speed it up?
Thanks.
www.aerlawgroup.com
There are many online Web Optimization sites that you can use.
I've attached some optimized results for your page.
From http://www.webpagetest.org/
See The Result
and you can use Google Page Speed Link
Simply, I would suggest one thing based on your page design and the code is..., use CSS Simplify Tool and the HTML Symplify Tool. It reduces the Page Loading time dramatically. and as well as some Image Compression Tool too.
One thing that really reduces the page speed is Flash contents or Images. so be focus on that primarily
http://csslint.net/ for linting
http://csscomb.com/ for ordering attributes
http://prefixr.com/ for adding browser prefixes
There are many many factors that come in play with a slow page besides CSS/HTML. The size of the images, whether they are optimized, how fast the server delivers, caching, etc...
I would recommend using Google PageSpeed Insights or similar service - they show you a lot of info.
Go to https://developers.google.com/speed/pagespeed/insights/
Edit: Your URL loads this JS file which has an anonymous function that runs again and again:
http://s3.amazonaws.com/scripts.hellobar.com/bfa7653204b92054d559e0d8dd1ba2dd6fbdc183.js
You can view for yourself by using a web inspector - I am in Safari 7 and under Timelines on the Inspector panel - select "Layout & Rendering" from leftside menu and reload page. You can see that the HelloBar is doing some kind of adjusting over and over.
I have website and i have lots of images on home page.
Almost 60 images in row and i have almost 5 rows of carousel.
But all this image comes from remote website feed so i cant optimize them and the occupy lots of size
when i test my website in gt matrix it shows me 26mb of page so it is obvious it will take
much loading time.I have applied lazy loading images,how ever the speed is very slow
What steps should i take to speed up this kind of page?I dont want to use any plugin because they brake website some times
Upon showing images from another server makes the site slow, because that server may be slow.
So better you try to get those images from your server if possible, else you can try using
plugins like wp-supercache
Minify all your JS and CSS files
For better page speed and avoid these error you should try following things.
Enable Compression from Cpanel
You are using Wordpress so use any of the cache plugin.
Use header expiry using httaccess or page header.
minimize you scripts (css,js).
Use compressed images (jpegtran,pngout).
If your image is casing issue try to use CDN for images.
This will help you to improve page speed.
Crop the images using timthumb. There is wordpress plugins for timthumb probably. Check in wordpress directory as well as it's use. Once images size is reduced, Page would be loaded fast. Additionally, follow the #Jobin Jose's comment, will help you to optimize the speed. Moreover, use WP Super Cache plugins.