I checked the pageinsights of "http://www.briddles.com/riddle/9-bodmas?l=333"
Most of these are thirdparty. How can i sove it ?
I see 3 important groups there:
Youtube
Google Ads or analytics
Facebook
Here is what I would do:
I see the youtube player is hidden by default, I would reserve some space for the player (maybe with a lightweight placeholder) and only append the iframe when the user clicks "view answer". This lite-youtube web component is awesome and might help you out. Trust me.
Normally Google ads is not something you want to get rid of. I would just make sure to load these scripts with the async attribute at least.
For the facebook comments I imagine 3 approaches:
3.1. Render a placeholder with a button saying "See comments" or something like that and only fetch the scripts when the user press that button.
3.2. Use the Intersection Observer API so when comments section scroll into view, fetch de scripts and render. (You will have to reserve some space to avoid CLS).
3.3. Remove the comments section (if there is almost no usage) or use a different provider that is optimized for web vitals. I don't know which one, but it's still an option.
Extra recommendations:
The main image is too heavy for mobile users, try to use a responsive image, compress the image and choose a lighter format like webp for browsers that support it. More info about image optimization here.
Reduce the amount of fonts you use and, if possible, host it by yourself and use a CDN. Google fonts is practical but to host your fonts is better for performance.
Related
I am trying to make Facebook playable ad using Phaser3.60 but the problem is that Facebook block XMLHttpRequest which is used internally in phaser load to load images and sounds.
do do any one know a way to images to phaser without using its loader and without using XMLHttpResquest.
I tried to use imageLoadType: "HTMLImageElement" but it also gives me the same error, I dont know if facebook detect the XMLHttpRequest in the Phaser.min or in the game code.
I'm not sure if this is the solution for your specific problem, but after some tinkering, I learn abit about facebooks playable ads.
Disclaimer: First of all, I was not able the get the zip version to run.(not on the preview Tool and not even on a real campain)
With a single file index.html, with all the data inlined (just under the 2MB limit), I can upload the application and get the same Warning,
BUT after I click the Application (what executes FbPlayableAd.onCTAClick(), as mentioned in the yellow highlighted part), then the Done Button is activated, and I can deploy the ad.
I hope this helps.
When submitting updates for our extension, we receive the following message with rejection from the Chrome store:
"To have your item reinstated, please ensure:
The purpose of the extension is clear to users; and
The extension either limits its functionality to a narrow focus area of subject matter or to a narrow browser function.
To serve multiple purposes with your extensions, please package each purpose as a separate extension."
Does anyone know the criteria used when determining if the purpose is clear or if the extension is trying to do too much? Our extension is used to demonstrate metrics more conveniently that our clients would normally go to our webpage to see, so it shows a few different but very related items (all of which fit the central theme of showing connected metrics).
Check the Chrome Extension Quality Guideline:
Extensions Quality Guidelines
An extension must have a single purpose that is narrow and
easy-to-understand. Do not create an extension that requires users to
accept bundles of unrelated functionality, such as an email notifier
and a news headline aggregator, or downloads a local executable. If
two pieces of functionality are clearly separate, they should be put
into two different extensions, and users should have the ability to
install and uninstall them separately. For example, functionality that
displays product ratings and reviews, but also injects ads into web
pages, should not be bundled into a single extension. Similarly,
toolbars that provide a broad array of functionality or entry points
into services are better delivered as separate extensions, so that
users can select the services they want.
This is further explained in the FAQS page answering these questions:
Why did Google launch a “single purpose” Chrome extensions policy?
Where can I find the “single purpose” policy?
What does “single purpose” actually mean?
So I have this wordpress blog set up on a VPS with litespeed and cloudflare. The website loads some banners from a revive insallation on the same VPS server, only that domain doesn't have cloudflare installed.
Although the page speed and wslow scores are good, I still get a 3 to 5 secs page load. You can see the results here:
https://gtmetrix.com/reports/www.survivalsullivan.com/WIZjVt68
Although individual resources seem to load fast (including the revive banners), there seem to be inexplicable "delays" in the waterfall... I'm no wiz in website optimization but do have some experience.
Am I missing something? I couldn't find a decent resource on how to read the waterfall, although I figured out most of it. Thanks!
Overall you got pretty good results!
First of all deal with all those images gtmetrix displays: optimize them using photoshop, jpeg mini or sprites.
If you haven't already, install bj lazy load plugin and above the fold.
Install and configure W3C cache which will fix the YSLOW settings that still not green in gtmetrix.
I assume you use some kind of theme / page builder? see if you can reduce the number of dom elements in page. Use DOM Monster! to see how nested is your page.
For example if need to display an image dont nest it in div inside column inside row inside container div.
If your website is gonna be used by users in multiple countries I would suggest paying for MAXCDN. It also integrated into W3C cache plugin.
If you use google fonts try adding them locally to style instead of GETing them.
I am developing a responsive website. For each and every change I made in javascript, css & html file, I need to test it in all possible screen size in portrait and landscape mode. Normally we used to test it in 3 to 5 different browser window size, and in portrait & landscape. I felt changing screensize and orientation again and again is a tedious job. So planned to write a tool, which will open multiple browser windows in a different screen size with the given url loaded in it. Any idea, or advice how to start this?
PS. If you are voting for deleting this question, please consider commenting with some suggestion how I can start, or is there any free tool available for this.
Thanks in advance.
There are number of great tools and services for helping test a website in just about every possible OS/browser/size these days.
BrowserStack.com allows you to pull up your website on nearly every combination of OS/browser/size and use the site to see how elements and features perform. There are other many other services that do this.
Another option would be a browser extension/plugin like Chrome's Window Resizer. It allows you to quickly toggle between common (and custom) window sizes. This is the most manual of the three options here, and the only free option.
One final option is Adobe's Edge Inspect. This app allows you to connect several devices to your computer and simultaneously browse a site across each of the devices. It also allows you to remote inspection on each of the connected devices.
Tools like Selenium can drive browsers and resize them as needed. Depending on the language of your choice, google for something like: selenium resize browser (language of your choice)
I´m planning to make a full dynamic site using pjax, with static menu (only the content will be updated with pjax). How bad is this?
The site that i have planned to implat this on have a lots of data on it, most images.
I have tested my solution on my local machine and it seems to work but in production it will probably be slow or what do you guys think? Are this bad practise?
Now on pjax start i slide out my container to the left, and slide in the new content from the right. I have noticed a small performance lost when i do this in Safari and FireFox. Should i skip my solution and just do regular updates of the page? I want to do something like Twitters iPhone app, but on the web.
The reason i want to do this are that i have a full size google maps with a lot of pins that take some time to load.
I have found Tubrolinks (http://www.github.com/rails/turbolinks) that would be included in Rails 4.0, its great adn i think a good answer to my question.