Skip to content

Instantly share code, notes, and snippets.

@crazyyy

crazyyy/_readme.md

Last active August 22, 2024 18:17
Show Gist options
  • Save crazyyy/0a322d97ad2df2dbbd7c0f4a35824426 to your computer and use it in GitHub Desktop.
Save crazyyy/0a322d97ad2df2dbbd7c0f4a35824426 to your computer and use it in GitHub Desktop.
Download ZIP
PageSpeed Lighthouse
Raw
_readme.md

💨 Google PageSpeed optimization tips

Measure page quality services

Measure pagespeed applications

Images

JS

CSS

Documentation

Docs other

preload prefetch

For the browser to download resources more efficiently, we can indicate how to optimize these different steps. dns-prefetch: indicates to the browser that it should perform the resolution of a given domain name (determining the IP to contact) before that domain is used to download resources. preconnect: indicates to the browser that it should connect a given origin, before that domain is used to download resources. Preconnecting involves, like – dns-prefetch, the DNS resolution, but also the TCP handshake and TLS negotiation (if the page is secure). prefetch: indicates to the browser that it can download a given resource, even if it is not detected in the page. The resource is downloaded with a low priority. preload: tells the browser that it must download a given resource as soon as possible, with high priority.

Wordpress CDN Subdomain

  1. Create subdomain
  2. Create ssl verification for subdomain
  3. Go to file manager subdomain, create: index.php and type echo $_SERVER["DOCUMENT_ROOT"];
  4. Go to subdomain url in browse, Copy dir path
  5. Go to wp-admin/options.php. Search upload_url_path / upload_path, put dir path into Store uploads in this folder, put subdomain into Full URL path to files
  6. Test Media Upload and image in front end
  7. Move all folder and files in wp-content/uploads into subdomain in file manager
  8. Use better search and replace to replace Old link to new link: maindomain/wp-content/uploads/ -> subdomain/
  9. Useful links: https://webmtp.com/toi-uu-hoa-website-wordpress-tren-pagespeed-insights/ link: https://wordpressvn.com/t/huong-dan-toi-uu-flatsome-tang-diem-toi-da-google-insight/2848 link: https://aaron.kr/content/code/move-wordpress-media-uploads-to-a-subdomain/

Examples

Script preload

<link rel="preload" as="script" href="async_script.js"onload="var script = document.createElement('script'); script.src = this.href; document.body.appendChild(script);">
<link rel="preload" as="style" href="async_style.css" onload="this.rel='stylesheet'">

Defer google analytics

https://pagespeedchecklist.com/defer-google-analytics

// https://constantsolutions.dk/2020/06/delay-loading-of-google-analytics-google-tag-manager-script-for-better-pagespeed-score-and-initial-load/
document.addEventListener('DOMContentLoaded', () => {
  /** init gtm after 3500 seconds - this could be adjusted */
  setTimeout(initGTM, 3500);
});
document.addEventListener('scroll', initGTMOnEvent);
document.addEventListener('mousemove', initGTMOnEvent);
document.addEventListener('touchstart', initGTMOnEvent);
function initGTMOnEvent(event) {
  initGTM();
  event.currentTarget.removeEventListener(event.type, initGTMOnEvent); // remove the event listener that got triggered
}
function initGTM() {
  if (window.gtmDidInit) {
    return false;
  }
  window.gtmDidInit = true; // flag to ensure script does not get added to DOM more than once.
  const script = document.createElement('script');
  script.type = 'text/javascript';
  script.async = true;
  script.onload = () => {
    dataLayer.push({ event: 'gtm.js', 'gtm.start': new Date().getTime(), 'gtm.uniqueEventId': 0 });
  }; // this part ensures PageViews is always tracked
  script.src = 'https://www.googletagmanager.com/gtm.js?id=YOUR-GTM-ID-HERE';
  document.head.appendChild(script);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment